Realizzare un One Page Layout animato con scrollReveal.js

By Andrea Marchetti - 7 Apr , 2014

Realizzare un One Page Layout animato con scrollReveal.js
One Page Layout animato

Oggi vediamo come costruire un one page layout con fluide animazioni allo scroll grazie al fantastico plug-in scroll-Reveal.js.

Questo plug-in è di una semplicità disarmante sia nell’installazione che nell’utilizzo e, udite udite, non utilizza jquery ma è scritto in javascript puro, quindi basta includere il file nell’ html e si è pronti ad animare i contenuti della pagina.

Funzionamento

Scroll-reveal non fa altro che nascondere gli elementi e mostrarli con l’animazione impostata quando si scrolla alla relativa altezza nella pagina. Quando l’elemento entra nel wieport viene mostrato con gli effetti impostati.

Il plug-in ha una notevole fluidità nelle animazioni (grazie ai CSS3 che utilizza per animare gli oggetti) e funziona bene anche su mobile.

Installazione

Per installare il plug-in basta richiamare il file alla fine della nostra pagina html e inizializzarlo con la seguente sintassi:

<script src='js/scrollReveal.js'></script>
<script>
window.scrollReveal = new scrollReveal();
</script>	

Html

La struttura html dell’esempio è molto semplice, predisposta per essere responsive:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scroll Reveal</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div class="box"> 
[...]
</div>
<div class="box">
[...]	
</div>
<div class="box"> 
[...]
</div>
<div class="box"> 
[...]	
</div>
<div class="box"> 
[...]
</div>
</body>
</html>

Css

Applichiamo lo stile necessario:

body, html{height:100%; font-family: 'Exo 2', sans-serif;}
body{background: #2d3037; margin:0; padding:0;}
.box{height: 50%; background: #54303a; width:70%; margin-left: 15%;margin-top:5%;float:left;}
h1{text-align: center; color:#ed274a;}
p{text-align: center; color:#fff}
a{color:#e43a5e}
.img-box{float:left; width: 40%; height:100%; background: #ea2d49; line-height: 50%;position: relative;}
.content-box{float:left; width:60%;position: relative;height: 100%;}
.cont-in{top:50%; position: absolute;left:50%;width: 300px; margin-left: -150px;text-align: center}
.img-box .cont-in{margin-top: -10px; font-weight: bold; color:#9f1c2f;font-size: 150px;}
.content-box .cont-in{margin-top: -80px; font-weight: bold; color:#ea2d49; font-size: 40px; font-weight: 200;}
.final{margin-bottom: 10%}
@media (max-width: 600px) { 
.img-box .cont-in{font-size: 35px;width: 60px; margin-left: -30px;}
.content-box .cont-in{ font-size: 14px; margin-top: -20px;width: 140px; margin-left: -70px;}
}

Utilizzo base

Per applicare un effetto basta applicare l’attributo data-scroll-reveal all’elemento che si vuole animare. In questo attributo andiamo a definire i parametri. Se vogliamo per esempio un’ animazione fade-in con entrata dal basso, scriveremo:

<div class="box" data-scroll-reveal="enter bottom"> 
[...]
</div>

Il parametro enter definisce da dove entrerà l’elemento. Se vogliamo più controllo sull’animazione possiamo definire altri parametri come move che indica di quanto deve essere lo spostamento in px e over che indica il tempo della durata dell’animazione.

<div class="box" data-scroll-reveal="enter bottom and move 100px over 1.33s"> 
[...]
</div>

Così l’animazione sarà più visibile e d’impatto. Altro parametro utile è after che ci consente di eseguire l’animazione dopo tot millisecondi nell’esempio è stato applicato nell’ultimo elemento.

<div class="box" data-scroll-reveal="enter bottom and move 100px over 1.33s but wait 0.3s"> 
[...]
</div>

Con questa semplice sintassi possiamo definire in pochi secondi animazioni diverse tra loro, il risultato è notevole considerando il pochissimo tempo di implementazione. Aggiungere un tocco di magia ai nostri layout ora è più semplice.

Le frasi dell’esempio sono tratte da un interessante intervento sulla User Experience di Luca Mascaro al Wordcamp 2013. Demo e download sono disponibili qui di seguito.

Stay Tuned!

demo

Se ti và ringraziami con un Like a MarchettiDesign.net.

Oppure offrimi un caffè :-)
download

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *