Effetto Collapsing – Davide Graziani

Ho visto questo effetto su diversi siti e mi son detto: “come funziona?”.

Detto, fatto! Ho cercato un po’ su youtube ed ho trovato un video breve ed interessante (qui il link) dal quale ho preso spunto per scrivere questo tutorial.

Cosa andremo a fare?

In pratica andremo a creare una pagina nella quale la barra del menù in alto, l’header, rimarrà sempre fissa, così come il banner sottostante; facendo lo scroll del contenuto, questo andrà a “scivolare” sopra il banner e sotto l’header, lasciandolo sempre visibile.

Iniziamo!

Creiamo due files che chiameremo rispettivamente:

index.html
style.css

Originale vero?? 🙂

index.html

Iniziamo ad inserire i tags per identificare la struttura della nostra pagina.

!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title>Effetto Collapsing dell'Header</title>
</head>	
<body>
<div id="container">
  <header>	
    <h1>Questo &egrave; il mio Header</h1>
  </header>
  <div id="banner">
    <h2>Questo &egrave; il mio Banner</h2>
  </div>
  <div id="content">
    <h4>Qui ci sarà il contenuto</h4>
  </div>
</body>
</html>

!DOCTYPE html>

<html>

<head>

<title>Effetto Collapsing dell'Header</title>

</head>

<body>

<h1>Questo è il mio Header</h1>

</header>

<h2>Questo è il mio Banner</h2>

</div>

<h4>Qui ci sarà il contenuto</h4>

</div>

</body>

</html>

Questo è tutto quello che ci occorre.

Style.css

All’interno del CSS inseriremo in primis i tag di reset della formattazione, che ho copiato dal sito http://meyerweb.com (la path completa è riportata nel commento all’inizio del file):

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* http://meyerweb.com/eric/tools/css/reset/

v2.0b1 | 201101

NOTE: WORK IN PROGRESS

USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

/* remember to define visible focus styles!

:focus {

outline: ?????;

} */

/* remember to highlight inserts somehow! */

ins {

text-decoration: none;

}

del {

text-decoration: line-through;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

Quindi passeremo al codice necessario per il nostro progetto. Creeremo infatti un header alto 100px che si estende per tutta la larghezza della pagina.

Importante:

position: fixed –> perché vogliamo che rimanga lì dove l’abbiamo messa;
z-indiex: 10 –> si poteva mettere anche un numero superiore (questo parametro ci permette di identificare gli oggetti che stanno in primo piano rispetto agli altri elementi della pagina).

/* Il mio codice CSS parte da qui */

header{
	background: #dbdbdb;
	height: 100px;
	width: 100%;
	z-index: 10;
	position: fixed;
	text-align: center;	
}

/* Il mio codice CSS parte da qui */

header{

background: #dbdbdb;

height: 100px;

width: 100%;

z-index: 10;

position: fixed;

text-align: center;

}

Successivamente ci occuperemo del banner:

#banner{
	width: 100%;
	height: 500px;
	background-image: url("firenze-banner.jpg");
	background-color: #cccccc;
	position: fixed;
	top: 100px;
}

#banner{

width: 100%;

height: 500px;

background-image: url("firenze-banner.jpg");

background-color: #cccccc;

position: fixed;

top: 100px;

}

infine inseriremo le caratteristiche per content:

#content{
	width: 100%;
	top: 500px;
	background-color: white;
	height: 1500px;
	position: relative;
}
h1{
	font-size: 24px;
}

#content{

width: 100%;

top: 500px;

background-color: white;

height: 1500px;

position: relative;

}

h1{

font-size: 24px;

}

Come potete vedere ho aggiunto anche la grandezza del carattere su h1.

Abbiamo finito…niente di estremamente complicato. 🙂

Esempio

Al seguente link trovate l’esempio.

Cosa andremo a fare?

Iniziamo!

index.html

Style.css

Esempio

Lascia un commento Annulla risposta