Jquery Scroll Down Loading Effect in stile App

By Andrea Marchetti
@marchetti_design

Jquery Scroll Down Loading Effect in stile App

Oggi andiamo a creare una struttura Responsive che anima i contenuti allo scroll del mouse. Le immagini e i testi appariranno dal basso con un animazione stile Mobile, la struttura ricreata ha come riferimento il tumblr di adidas analizzato settimama scorsa.

Struttura


Per creare una struttura di questo tipo utilizzeremo il plug-in jquery Superscrollorama. Questo plug-in permette di animare elementi in un pagina web allo scroll del mouse.

Come prima cosa scarichiamo il plug-in e richiamiamo i file necessari alla fine della pagina HTML.

<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write(‘<script src="_/js/jquery-1.9.1.min.js"><\/script>’)</script>
<script src="js/jquery.superscrollorama.js"></script>

HTML
La struttura html è un elenco di div larghi il 50% della larghezza della pagina

<div id="content-wrapper">

<div class="post-vis">
<div class="in-panel">

</div>
</div>
<div class="post-vis">
<div class="in-panel">

</div>
</div>
<div class="post">
<div class="in-panel">

</div>
</div>
<div class="post">
<div class="in-panel">

</div>
</div>
<div class="post">
<div class="in-panel">

</div>
</div>
<div class="post">
<div class="in-panel">

</div>
</div>

</div>

La classe post-vis serve a rendere visibile i primi due articoli, gli altri con classe post appariranno allo scroll della pagina.

CSS
Posizioniamo gli elementi tramite css.

#content-wrapper {width:100%;float:left;overflow: hidden}

.post{ width:50%; float:left;position: relative;}
.post-vis{ width:50%;float:left;position: relative;}

.post-vis .in-panel h2{padding:0px 0 0 0; }

.in-panel{ width:80%; margin: 10% 10% 10% 10%; float:left;}
.in-panel img{width:100%; height: auto;margin: 0 0 20px 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}

.in-panel img:hover{padding: 15px;background: #d9d9d9;margin: -20px 0 15px -15px;}

.in-panel h2{font-size:25px; font-weight: 400; margin:0 0 20px 0;padding:100px 0 10px 0; text-transform: uppercase; position: relative}
.date{margin:0 0 10px 0; padding:0;color:#fe4c5c;}
.big{font-size: 50px!important}

Animiamo le immagini allo stato hover con in-panel img:hover. Successivamente impostiamo le animazioni con superscrollorama.

JQUERY

$(document).ready(function() {
var controller = $.superscrollorama();
// individual element tween examples

$(".post:nth-child(odd)").each(function() {

$this = $(this);
controller.addTween( $this, TweenMax.from( $this, .5, { css: {opacity: 0, right:’1000px’, top: ‘100px’} }), 100);

});

$(".post:nth-child(odd) h2").each(function() {

$this = $(this);
controller.addTween( $this, TweenMax.from( $this, .5, { css: {opacity: 0, right:’600px’, top: ‘0px’} }), 300);

});

$(".post:nth-child(even)").each(function() {

$this = $(this);
controller.addTween( $this, TweenMax.from( $this, .5, { css: {opacity: 0, left:’1000px’, top: ‘200px’} }), 100);

});

$(".post:nth-child(even) h2").each(function() {

$this = $(this);
controller.addTween( $this, TweenMax.from( $this, .5, { css: {opacity: 0, left:’600px’, top: ‘0px’} }), 300);

});

controller.addTween(‘#text-2’, TweenMax.fromTo( $(‘#text-2′), .25, {css:{opacity:0, fontSize:’5vw’}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:’8vw’}, ease:Quad.easeInOut}));

});

Con $(“.post:nth-child(odd)”).each(function() { andiamo a selezionare tutti gli elementi pari con classe .post (quindi tutti quelli di destra). Con addTween controlliamo l’animazione, prima impostiamo il valore iniziale della propietà css per esempio “right:’1000px’” poi il valore di offset per gestire il punto di inizio dell’animazione per esempio 100.

Con il selettore opposto $(“.post:nth-child(even)”).each(function() { andiamo a prendere gli elementi dispari a sinistra della pagina, li animiamo impostando la proprietà css “left:’1000px’”

Il risultato è che gli elementi con classe .post entrano nel layout con un animazione laterale.

Con Superscrollorama si possono modificare molti parametri CSS degli elementi che compongono la pagina, per esempio opacità e posizione “css:{opacity:1, top:’0}”. Combinando i parametri css di default con quelli impostati da scrollorama possiamo animare gli elementi sulla pagina ottenendo effetti accattivanti.

Qui di seguito i link per la demo e il download della struttura, in futuro potremmo sviluppare ulteriormente il layout con un sistema per scrollare orizzontalmente i contenuti.

Stay Tuned!

,

Commenti

  1. CraftCrave | DigiFree | CraftCrave ha detto:

    […] Jquery Scroll Down Loading Effect in stile App – 1 freebie(s)? […]

  2. Avatar Roberto ha detto:

    Ciao Andrea, ho fatto il tutorial, come sempre è ben fatto e utile per imparare, però non sono riuscito a capire come funziona superscrollrama (che tra l’altro adesso mi sembra che si chiami scrollmagic). Mi è sembrato un po’ complicato e siccome non mi piace fare copia/incolla senza capire il codice, ho preso una scorciatoia e ho usato animate.css insieme a waypoint.js per attivare le animazioni css durante lo scrolling (forse è anche pigrizia… 😉

Lascia un commento

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

Share