Realizzare un One Page Layout animato con scrollReveal.js

By Andrea Marchetti · 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 *