A growing repository with 690 lists & 8496 resources for web ninjas
    (freebies, plugins and snippets) updated & curated every day, so it never expires.
CLOSE
bypeople

One page website, vertical parallax

Created by Admin on Nov 10 2014

Once in a while, something new shows up that has the power to shake the world and stimulate all people to keep moving instead of stay still, this quote applies for practically every instance in life and business. A while ago, Nike released an astonishing website named “Nike Better World” to support all the athletes around the world; the design itself was brilliant and it generated a lot of positive reviews, but the real breakthrough came thanks to the navigation system that these guys made, a fantastic vertical Parallax system.

On this tutorial we’re going to undress the structure of this website and then we’re going to create something inspired by Nike’s website using jQuery and CSS. There are many ways that can help you achieve this effect, we chose to explore one of these methods that utilize the popular jQuery library; beyond serving as a programming exercise, you can use this effect to create a beautiful single page portfolio, which is something quite popular these days among designers. On this tutorial you will find both the logical part and the programming section, so you can understand the mechanism of this page and then proceed making your own Nike-like navigation, now let’s get it started.


View Demo

Disclaimer

This tutorial is a practical exercise, created with the only intention of explore the functionality behind the “Nike Better World” website, all the credits belong entirely to Nike. Due the fact that the original code was encrypted, our team thought several ways to achieve the effect starting from scratch, because of that, we can guarantee that the code part was effectively developed by our programming crew inspired by the fantastic creative team behind “Nike Better World”.

How does it work?

As we said on the intro, there are different ways of making this “Nike” effect, this is just one way of doing it that works great and uses the amazing jQuery library. Regarding the code, we can start saying that basically, this navigation was specifically created to work when the user scrolls down or up, though you can navigate across the page using all the other traditional ways. The system contains essentially 4 sections, 2 of them containing 2 DIVs, which gives us a total of 6 different sections.

If we simply place all the DIVs, you will not be able to see the effect because the key element is acceleration. Thanks to jQuery we can customize different values regarding the scrolling speed, and thanks to this you will actually be able to perceive this great simulation of the “Nike” effect, which majorly consists of different elements displacing at various scrolling velocities while overlapping them among each.

Parallax01

Understanding the “Nike” effect

Now that we are familiarized with the 4 main sections that compound our exercise, let’s take a closer look to each part, for you to perfectly understand their behavior regarding their position and scrolling speed. We could write a whole paragraph trying to explain this but instead let’s take a look to another illustration that explain us the essence of the “Nike” effect.

Parallax02

Step 1: Insert the HTML

Now that we’ve comprehended the logic behind this Parallax navigation, we can proceed calmly to the programming part. The code is actually really simple, we just need to set an HTML file which is going to be called index.html and then customize it according to the next code lines:

[html]

<!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>nikebetter world</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />

<script src=”js/jquery-1.5.js”></script>
<script src=”js/jquery.mousewheel.js”></script>
<script src=”js/functions.js”></script>

</head>

<body>
<div class=”header” align=”center” >
<img class=”header_bk_final” src=”http://www.webdesignshock.com/demos/photo_slider/img/header_banner.png” border=”0″ usemap=”#Map” />
<map name=”Map” id=”Map”>
<area id=”twitter_share” shape=”rect” coords=”766,62,798,99″ href=”#” />
<area id=”facebook_share” shape=”rect” coords=”800,63,833,100″ href=”#” />
<area id=”twitter_follow” shape=”rect” coords=”878,68,909,98″ href=”http://twitter.com/TutorialShock” />
<area id=”facebook_follow” shape=”rect” coords=”911,67,941,98″ href=”http://www.facebook.com/pages/TutorialShock/134270309924818″ />
<area id=”homepage” shape=”rect” coords=”27,8,359,85″ href=”http://www.webdesignshock.com/” />
<area id=”link_1″ shape=”poly” coords=”495,79,607,80,621,61,645,54,642,28,453,28,452,53″ href=”#” />
</map>
</div>
<a class=”themshock_banner” href=”http://www.wordpressthemeshock.com/the-shock-bundle/”><img src=”img/shock-bundle.jpg” border=”0″ alt=”loading_image” /></a>
<div class=”bk bk_0″>
<!–This is the first background and the remaining objects–>
<div class=”img_1″></div>
<!–This is our bell’s picture–>
</div>
<div class=”bk_blank title_1″>
<!–This is the first white bar–>
</div>
<div class=”bk bk_1″>
<!– This is the second background along with the remaining pictures–>
<div class=”img_2″></div>
<!–This is our Polaroid camera picture–>
</div>
<div class=”bk_blank title_2″></div>
<!–This is the second white bar–>
<div class=”footer” >
<div>
<img src=”http://www.webdesignshock.com/demos/photo_slider/img/rss_image.png” border=”0″ usemap=”#Map2″ class=”rss_image” />
<map name=”Map2″ id=”Map2″>
<area shape=”circle” coords=”475,80,61″ href=”http://feeds.feedburner.com/TutorialShock” />
</map>
</div>
</div>
</body>
</html>

[/html]

Step 2: Working with jQuery

Once we have set our HTML file, everything is ready for the magic begin hand in hand with jQuery. The code has been carefully documented to prevent any issues that may show up during the process, now let’s take a look to the following code that will bring to life the “Nike” effect.

[javascript]

jQuery(document).ready(function($) {
a=parseFloat(400);// Initial value for the first background (bk 0)
b=parseFloat(0);// Initial value for the first background (bk 0)
c=parseFloat(400);// Initial value for the second background (bk 1)
d=parseFloat(0);// Initial value for the second background (bk 1)
var scrollTop = $(window).scrollTop();
var scroll_actually= new Array();// Identifies the X and Y values for the background

$(window).scroll(function(){//This is not the cleanest way to do this, I’m just keeping it short.
if(scrollTop>$(this).scrollTop()) // Scroll up
{
if (getScrollTop()<=1600 && getScrollTop()>=0)// Identifies the position for the first background when a scroll event occurs
{
a=a+35;// Position for the first background, it decreases in 35 pixels
b=b+10;// Position for the first background, it decreases in 10 pixels
$(‘.img_1′).css(‘backgroundPosition’, ‘50% ‘+a+’px’);
$(‘.bk_0′).css(‘backgroundPosition’, ‘0 ‘+b+’px’);
}
if (getScrollTop()>=2050 && getScrollTop()<=3650)
{
c=c+35;// Position for the second background, it decreases in 35 pixels
d=d+10;// Position for the second background, it decreases in 10 pixels
$(‘.img_2′).css(‘backgroundPosition’, ‘50% ‘+c+’px’);
$(‘.bk_1′).css(‘backgroundPosition’, ‘0 ‘+d+’px’);
}
}
else
{// Scroll down
if (getScrollTop()>=0 && getScrollTop()<=1600)
{
a=a-35;// Position for the first background, it decreases in 35 pixels
b=b-10;// Position for the first background, it decreases in 10 pixels
$(‘.img_1′).css(‘backgroundPosition’, ‘50% ‘+a+’px’);
$(‘.bk_0′).css(‘backgroundPosition’, ‘0 ‘+b+’px’);
}
if (getScrollTop()>=2050 && getScrollTop()<=3650)
{
c=c-35;// Position for the second background, it decreases in 35 pixels
d=d-10;// Position for the second background, it decreases in 10 pixels
$(‘.img_2′).css(‘backgroundPosition’, ‘50% ‘+c+’px’);
$(‘.bk_1′).css(‘backgroundPosition’, ‘0 ‘+d+’px’);
}
}
if (getScrollTop()==0)// Adjusts the positions values and resets them to zero during a scroll up event
{
a=parseFloat(400);
b=parseFloat(0);
c=parseFloat(400);
d=parseFloat(0);
$(‘.bk_0′).css(‘backgroundPosition’, ‘0 0′);
$(‘.bk_1′).css(‘backgroundPosition’, ‘0 0′);
$(‘.img_2′).css(‘backgroundPosition’, ‘50% ‘+400+’px’);
$(‘.img_1′).css(‘backgroundPosition’, ‘50% ‘+400+’px’);
}
scrollTop = $(this).scrollTop();
});
});
function getScrollTop(){ // Verifies the total sum in pixels of the whole page

if(typeof pageYOffset!= ‘undefined’){
// Most browsers
return pageYOffset;
}
else{
var B= document.body; //IE ‘quirks’
var D= document.documentElement; //IE with doctype
D= (D.clientHeight)? D: B;
return D.scrollTop;
}
}

[/javascript]

Now everything is set and our “Nike” effect has been completed, you can take a look to the working demo right now, it has been tested in all the major browsers (works with IE8+), guarantying that you can utilize it in any project with the certainty that is going to be properly seen by everybody. Thanks for visiting our tutorials,  don’t forget to check our Facebook and Twitter updates so you can be informed of all the latest news from the community. If you liked this tutorial please share us some love by leaving us a comment, see you in our next post ;).


View Demo

This a test message in global notification
Your download will start shortly.
bypeople

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator

bypeople