Tutorial One Page Scroll Responsive

Jquery Scroll Down Loading Effect in stile App

By Andrea Marchetti
@marchetti_design

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!

One Page Scroll, Responsive

Potrebbero interessarti:

Slider Responsive Full Screen con testi animati utilizzando Flex Slider

Come costruire un Sito Web Responsive

Creare un Parallax Design accattivante e Responsive con Bootstrap

Realizzare un Video Background con HTML e CSS