Tutorial One Page Scroll Responsive
Realizzare un One Page Layout animato con scrollReveal.js
By Andrea Marchetti
@marchetti_design
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!
Potrebbero interessarti:
