Nike better world Parallax Effect Demo

Oggi voglio analizzare con voi l’effetto parallasse già affrontato in un articolo precedente. In particolare ha suscitato molto interesse il sito della Nike Better World. Oltre ad avere delle foto sraordinarie, Nike è riuscita in maniera originale a manipolare il classico jQuery di Verical Parallax riuscendo attraverso i css a muovere gli sfondi a diverese velocità. Con questa tecnica, sembra che il sito sia diviso in vari livelli che in base allo scrolling si muovono con prospettive differenti.

Ovviamente nella header dovrete includere i jquery che serviranno. jQuery 1.4.4 – jQuery localscroll – jQuery scrollTo – jQuery Inview

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript" src="scripts/nbw-parallax.js"></script>
<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script><script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="scripts/jquery.inview.js"></script><script type="text/javascript">// <![CDATA[
  $(document).ready(function(){ 	$('#nav').localScroll(); })
// ]]></script>

La pagina verrà composta da varie sezioni: header, footer e N° contenuti. A Destra avremo una serie di “ancore” che aiuterano la navigazione del sito.

</pre>
<ul id="nav">
	<li><a title="Next Section" href="#intro"><img src="images/dot.png" alt="Link" /></a></li>
	<li><a title="Next Section" href="#second"><img src="images/dot.png" alt="Link" /></a></li>
	<li><a title="Next Section" href="#third"><img src="images/dot.png" alt="Link" /></a></li>
	<li><a title="Next Section" href="#fourth"><img src="images/dot.png" alt="Link" /></a></li>
	<li><a title="Next Section" href="#fifth"><img src="images/dot.png" alt="Link" /></a></li>
</ul>
<pre>

Infine avremo il nostro codice HTML dove sarà presente il container dove pubblicheremo i contenuti

</pre>
<div id="intro">
<div class="story">Qui inseriremo il nostro contenuto</div>
 <!--.story--></div>
<pre> <!--#intro-->

Nel file CSS andremo a definire i songoli sfondi dei contenitori. Gli sfondi si ridimensionerenno in larghezza rispeto a quella del monitor. Dovrete tener presente anche dell’altezza in base alla media dei monitor.

#intro{
	background:url(images/firstBG.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 600px;
	margin: 0;
	padding: 160px 0 0 0;}

E’ possibile avere anche più sfondi per ogni contenitore che si sposteranno in maniera differente.

#second{
	background: url(images/secondBG.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 1300px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;}

#second .bg{
	background: url(images/trainers.png) 50% 0 no-repeat fixed;
	height: 1000px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 900px;
	z-index: 200;}

#fourth{
	background: url(images/bubbles2.png), url(images/bubbles2.png), url(images/bubbles1.png), url(images/fourthBG.jpg);
	background-position: 50% 0, 50% 0, 50% 0, 50% 0;
	background-color: #036;
	background-attachment: fixed;
	background-repeat: repeat, repeat, repeat ,no-repeat;
	color: white;
	height: 1300px;
	padding: 100px 0 0 0;}

Di seguito trovate la demo e i file da scaricare.