In questo tutorial voglio parlarvi di una tecnica che è da qualche tempo un trend molto diffuso nel web design. Questa tecnica consiste nel posizionare in background un’immagine fissa mentre il contenuto principale scorre al di sopra del video ed in alcune sezioni della pagina compare l’immagine fissa di background. Possiamo applicare questa tecnica anche ai video ed in particolare ad un loop di 10 – 15 secondi e riuscirai a realizzare un effetto molto accattivante e bello da visualizzare in un sito web. Vediamo il risultato finale qui sotto nel link per capire bene cosa vogliamo realizzare.
#1 – Inserimento del video in HTML5
Il primo luogo dobbiamo convertire il nostro filmato nella versione appropriata per l’inserimento del video nella pagina html5 del nostro sito. Se hai scaricato il loop in formato .mov allora devi convertirlo nei seguenti formati: mp4, ogv e webm. Quest’ultima versione è fondamentale per la visualizzazione del video nel browser Mozilla Firefox. Il codice che dobbiamo inserire nella pagina html subito dopo l’apertura del tag “body” sara:
<video autoplay loop>
<source src="WD0182.mp4" type="video/mp4">
<source src="WD0182.webm" type="video/webm">
<source src="WD0182.ogv" type="video/ogg">
</video>
Le altre dure caratteristiche del video da inserire sono il tag “autoplay” per far partire il video automaticamente al caricamento della pagina e “loop” per visualizzare il video di continuo senza mai fermarsi.
#2 – Struttura della pagina
La struttura della pagina avrà due contenitori principali, il contenitore con larghezza 100% di colore bianco che scorrerà sul video che nella demo ho chiamato “wrapper” e il contenitore centrale che posizionerà il suo contenuto al centro che io ho settato in 1140px ma che puoi settare alla dimensione che preferisci e che ho chiamato nel tutorial “contenitore_centro”.
<div id="page">
<div class="wrapper">
<div class="contenitore_centro">
......
......
<div class="clearfix"></div>
</div>
</div>
<div class="spazio"></div>
Un altro elemento fondamentale è il contenitore “spazio” che ci permette di creare uno spazio tra le varie sezioni e che ci permette di creare lo spazio e di visualizzare il nostro video in loop in background.
#3 – Stile dei video
Quali caratteristiche dovrà avere il nostro video? Come impostiamo il suo stile? Molto semplice! Prima di tutto il video deve essere settato in posizione fissa, poi dobbiamo impostare una larghezza/altezza automatica, una larghezza/altezza minima pari al 100% e stabilire che il video sia messo al di sotto del contenitore con un livello pari a “z-index:-100”.
video{
position:fixed;
left:0;
top:0;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index:-100;
visibility: visible;
}
Nel caso in cui il video per qualche motivo non sia visualizzabile dal browser nelle versioni più vecchie è importante impostare nel body della pagina, un’immagine statica di background, di modo che venga visualizzata in caso di problemi con il video.
body {
background:url(../images/bg.jpg) #000 no-repeat center center fixed;
-webkit-background-size: cover;
background-size: cover;
}
#4 – Posizioniamo gli elementi sul video
Oltre a visualizzare il video in loop possiamo anche posizionare dei piccoli elementi al di sopra del video sia con visibilità totale che con opacità. Nel nostro caso abbiamo posizionato il logo e una frase di effetto con un pattern trasparente in background. Il codice è davvero molto semplice e inserendo gli elementi nel contenitore centrato possiamo posizionarli come vogliamo. Per esempio il logo l’ho posizionato al centro dell’header:
#logo{
width: 220px;
height: 220px;
margin: 80px auto;
text-align: center;
border-radius: 50%;
background:#fff;
border:10px solid #336;
-webkit-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.2);
-moz-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.2);
box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.2);
}
#5 – Stile degli spazi tra il video e il layout
Questo spazio è fondamentale per visualizzare il video in alcune sezioni dell layout. Grazie alla gestione degli spazi possiamo far si che questo accada molto semplicemente settando un’altezza dello spazio senza alcuna caratteristica:
.spazio { min-height: 240px; }
oppure settando lo spazio con un colore che ha un’opacità media per avere un effetto più bello:
.scuro_bg { background:rgba(0,0,0,0.5); }
Questo è quanto serve per creare questo effetto accattivante con il video in loop in background. Puoi aggiungere infiniti contenitori e il contenuto all’interno di essi e modificare lo stile a tuo piacimento. Ti piace questa tecnica? L’hai già utilizzata? Dimmi cosa ne pensi.
Fonte: WEB DESIGNER ( www.webdesignermag.co.uk )
