Tutorial One Page Scroll Parallax Responsive
Creare un One Page Parallax, Responsive, animato con Skrollr
By Andrea Marchetti
@marchetti_design
Questo articolo è la continuazione del tutorial: Creare un One Page Parallax con animazioni Css con Skrollr nel quale ho realizzato una struttura con effetto parallasse grazie al plug-in jQuery. Oggi rendiamo tutta la struttura Responsive mantenendo le animazioni sui testi.
Principio di Funzionamento
Se non hai letto o vuoi ripassare il principio di funzionamento del plug-in leggi l’introduzione a come Creare un One Page Parallax con animazioni Css con Skrollr
Nello sviluppo non è stato immediato rendere le animazioni fruibili su mobile, questo mi ha portato a cambiare notevolmente il codice del primo articolo, quindi partiamo da una struttura completamente nuova.
Come prima cosa includiamo i file necessari:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="js/skrollr.min.js"></script>
<script src="js/skrollr.menu.min.js"></script>
HTML
L’html rispetto la prima struttura è cambiato. Fuori dal contenitore del parallax “skrollr-body” ci sono i div che contengono le immagini del parallasse.
<!–
We position the images fixed and therefore need to place them outside of #skrollr-body.
We will then use data-anchor-target to display the correct image matching the current section (.gap element).
–><!– home –>
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#home"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)"><div
class="parallax-image parallax-image-100"
style="background-image:url(img/1.jpg)"
data-anchor-target="#home"
data-bottom-top="transform: translate3d(0px, -80%, 0px);"
data-top-bottom="transform: translate3d(0px, 80%, 0px);"
></div>
<!–the +/-80% translation can be adjusted to control the speed difference of the image–>
</div><!– slide 2 –>
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#amsterdam"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)"><div
class="parallax-image parallax-image-100"
style="background-image:url(img/2.jpg)"
data-anchor-target="#amsterdam"
data-bottom-top="transform: translate3d(0px, -80%, 0px);"
data-top-bottom="transform: translate3d(0px, 80%, 0px);"
></div>
</div><!– slide 3 –>
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#beautiful"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)"><div
class="parallax-image parallax-image-100"
style="background-image:url(img/3.jpg)"
data-anchor-target="#beautiful"
data-bottom-top="transform: translate3d(0px, -80%, 0px);"
data-top-bottom="transform: translate3d(0px, 80%, 0px);"
></div>
</div>
Dopo questi div inseriamo l’header con la navigazione.
<!– Nav /–>
<header data-0="background-color: rgba(255,255,255,0.25);" data-150="background-color: rgba(252, 252, 252, 1);"><div class="btn-responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div><ul id="nav" data-0="padding:20px 0;" data-150="padding: 0 0;">
<li><a href="#home">Home</a></li>
<li><a href="#amsterdam">Amsterdam</a></li>
<li><a href="#beautiful">Beautiful</a></li></ul>
</header>
A seguire abbiamo il contenitore “skrollr-body” che mostrerà le immagini grazie agli “id” corrispondenti.
<div id="skrollr-body">
<!– Home /–>
<div id="home" class="gap gap-100" style="background-image:url(img/1.jpg);" id="top">…
</div>
<!– Slide 2 /–>
<div id="amsterdam" class="gap gap-100" style="background-image:url(img/2.jpg);">…
</div>
<!– Slide 3 /–>
<div id="beautiful" class="gap gap-100" style="background-image:url(img/3.jpg);">…
</div>
</div>
Con la classe “box” definiamo gli elementi contenitori dei testi animati grazie a skrollr.
<div id="skrollr-body">
….
<!– Slide 2 /–>
<div id="amsterdam" class="gap gap-100" style="background-image:url(img/2.jpg);"><div id="container-1">
<div class="box" data-anchor-target="#container-1" data-bottom="left:100%;" data-top="left:20%;">
<h2>Amsterdam uses his…</h2>
</div>
</div>
</div>
<!– Slide 3 /–>
<div id="beautiful" class="gap gap-100" style="background-image:url(img/3.jpg);"><div id="container-2">
<div class="box end" data-anchor-target="#container-2" data-bottom="right:100%;bottom:10%;" data-top="right:45%;bottom:20%">
<h2>Beautilful Canal.</h2>
</div>
</div>
</div>
</div>
CSS
Lo stile di base necessario al parallax.
.parallax-image-wrapper {
position:fixed;
left:0;
width:100%;
overflow:hidden;
}.parallax-image-wrapper-50 {
height:50%;
top:-50%;
}.parallax-image-wrapper-100 {
height:100%;
top:-100%;
}.parallax-image {
display:none;
position:absolute;
bottom:0;
left:0;
width:100%;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}.parallax-image-50 {
height:200%;
top:-50%;
}.parallax-image-100 {
height:100%;
top:0;
}.parallax-image.skrollable-between {
display:block;
}.no-skrollr .parallax-image-wrapper {
display:none !important;
}#skrollr-body {
height:100%;
overflow:visible;
position:relative;
}.gap {
background:transparent center no-repeat;
background-size:cover;
position: relative;
}.skrollr .gap {
background:transparent !important;
}.gap-50 {
height:50%;
}.gap-100 {
height:100%;
}
Da notare le classi gap-100 e gap-50 che definiscono l’altezza che occuperà l’immagine nel parallax rispettivamente tutta l’atezza dello schermo e la metà.
jQuery
Inizializziamo il plug-in e il menu.
<script type="text/javascript">// <![CDATA[
$(function(){var s = skrollr.init({
smoothScrolling: false
});//The options (second parameter) are all optional. The values shown are the default values.
skrollr.menu.init(s, {
//skrollr will smoothly animate to the new position using `animateTo`.
animate: true,//The easing function to use.
easing: ‘sqrt’,//Multiply your data-[offset] values so they match those set in skrollr.init
scale: 2,//How long the animation should take in ms.
duration: function(currentTop, targetTop) {
//By default, the duration is hardcoded at 500ms.
return 500;//But you could calculate a value based on the current scroll position (`currentTop`) and the target scroll position (`targetTop`).
//return Math.abs(currentTop – targetTop) * 10;
},//If you pass a handleLink function you’ll disable `data-menu-top` and `data-menu-offset`.
//You are in control where skrollr will scroll to. You get the clicked link as a parameter and are expected to return a number.});
//When btn is clicked
$(".btn-responsive-menu").click(function() {
$("#nav").slideToggle(‘fast’, function() {});});
});
// ]]></script>
.btn-responsive-menu servirà per aprire e chiudere il menu grazie anche al css qui di seguito.
Responsive
Linearizzaimo le voci del menu e ridimensioniamo i box di testo su mobile, le animazioni vengo ridimensionate.
@media(max-width:767px) {
/* Menu */
#nav {display:none;margin: 0px 0 0px 0px;padding:0;float:left;width:100%; list-style: none;background: #fff!important; }
#nav > li {float: left;margin: 0 0px 0 0;padding:0;position: relative;display: block;width:100%;}
#nav a {color: #000; display: block;font: 14px;padding: 14px 20px;}
#nav a:hover {background:#666;}.btn-responsive-menu{display:block}
.box h2,
.box-home h2{font-size: 25px; color: #333; font-weight:300;text-align: center}.end h2{color:#fff}
.box{ width:50%;margin-left: 25%;margin-top:27%;position:absolute;}
.box-home{width:50%;margin-left: 25%;margin-top:27%;position:absolute;}}
Cosi abbiamo terminato la struttura One Page Parallax Responsive con animazioni sui testi.
Skrollr ha delle grandi potenzialità l’utilizzo non è semplicissimo soprattutto se vogliamo mantenere le animazioni su mobile, alcuni esempi mozzafiato di siti relizzati con Skrollr:
http://www.flatvsrealism.com/
http://pepsized.com/demo/?id=665
La demo e il codice dell’esempio sono disponibili qui di seguito, sei hai degli esempi interessanti postali nei commenti!
Stay Tuned!
One Page Scroll, Parallax, Responsive
Potrebbero interessarti:
Hi Andrea, great tutorial and thanks a lot, i would like to know if it’s possible to add the option to hide back the menu when you have the web in a screen under 767 Width and you click over home, amsterdam or beautiful to see the smooth scrolling to the desired section
Now you can only hide the menuby clicking again over the btn-responsive-menu.
Thanks
Cris
Hi Cristian, yes is possible (but not super easy) you have to modify the jquery code slide toggle at the end of the page..
Le tue guide sono sempre piene di spunti interessanti !!
Ciao , come mai quando carico la pagina su Android non si vedono le immagini e il menù non si blocca all’apertura ? Come posso risolvere ?
ciao , ho creato una home page in parallax , però quando vado a visualizzarla su un dispositivo samsung non si vedono le immagini . Come è possibile ?
Ciao, ricontrolla il codice e inspeziona con firebug test, test, test 😉
Ciao Andrea.
Grazie mille per aver messo a disposizione le tue conoscenze.
Tutorial davvero molto bello, ma ti volevo fare una domanda:
E’ possibile adattarlo a programmi come Weebly o WordPress?
Ciao Diego, si, si può dinamiccizare utilizzando un custom loop per esempio in wordpress.
Buongiorno sig. Marchetti,
le volevo fare i complimenti per il sito e per l’opportunità che ci da (almeno personalmente) di imparare attraverso i suoi interessanti tutorial sempre ben fatti e utili.
Al riguardo le volevo chiedere quanto i materiali demo che mette on line da scaricare siano fruibili. Quale è la licenza d’uso degli stessi?
Posso utilizzarli in toto anche a livello professionale, o sono solo per uno scopo educativo?
La ringrazio nuovamente,
Distinti saluti.
Nik
Ciao Nik, in generale utilizzo risorse con licenza GPL o create da me, quindi utilizzabili in progetti commerciali, ti consiglio per esempio nel caso di skrollr di verificare la licenza del plugin 😉