Keep posted
Advertising
This month’s Collaborators
Friends
One page website, vertical parallax
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.
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.
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.
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:
<!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>
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.
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;
}
}
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 ;).
March 1st
Great!!! It’s a new and different style for me. I am going to experiment it.
March 1st
Sure Madhavan, let us know how it went ;)…
March 1st
Im waiting for this tutorial since i saw the NikeBetterWorld Website the first time! This is so awesome!
Thanks a lot for showing me how to achieve this parallax effect! :-)
March 1st
Hi Phil, we were stunned after watching Nike Better World and that’s when we decided that we had to figure out an effective way of recreate it, so I guess our team did a pretty neat job :)…
March 1st
awesome stuff, thanks for sharing this, cheers.
March 1st
Really cool I need to try this.
March 1st
Sure Julio, let us know if you have any doubts…
March 2nd
Wow! The Demo looks awesome!
Crazy!
March 2nd
Wow! this is just awesome! I can see endless possibilities for this. However, like all things nice and new.. this might as well become a cliched design trend for designer portfolios.
Great Job!
March 2nd
Yes Roshan, every new invention is great until everyone starts copying it, so let’s take advantage of this while that moment arrives…
March 2nd
The demo looks great. I did notice that scrolling up the page is not as pleasant as scrolling down (in FF). There is some strange snapping and some of the divs don’t appear until you are halfway through them.
Pretty awesome though.
March 2nd
Thanks for your comment Dave, unfortunately the current version of Firefox doesn’t display the demo with the quality that Safari and Chrome actually do, so hopefully the 4 version will be able to do it…
March 2nd
The demo is actually very nice but don’t know how I would use this yet. Very well done!
March 2nd
Well there are many different ways of taking advantage of this tutorial, maybe you will came up with something we haven’t thought about…
March 8th
thanks for the tutorial and the demo! will try it sometime :)
March 23rd
this tutorial is just what i needed .. been working allot on finding some desent horizontal parallax effect tutorials and then when i searched for vertical allot of the finds i checked was bollox exept this one … great work and thanks for the tutorial
i was just wondering if this type of page display is possible to incorporate with joomla… : ) just been thinking about it ever since i started learning about prallax effect
March 23rd
Hi Kristian, we’re so happy to know that our tutorials are serving people like you. Regarding your query, you can implement this experiment in Joomla but you’ll have to make the integration process which we consider is very simple.
April 6th
I am thinking of using this, however, I agree with the someone else’s comment about scrolling upward. I have checked on several major browsers and when you start to scroll slowly upward, you can see the other layers cross over one another, hiding what was once visible coming down. Any idea why?
I tried the same on Nike’s site, but theirs works seamlessly. Then again, Nike works young children to the bone so they have money to blow on whatever :)
April 6th
Hi Johnny, thanks for your message. This exercise was developed as an experiment with the purpose of understanding Nike’s Better World (sure that they have the money to do this hahaha). We tested it with mouse scrolling and it looked pretty neat, but when you use normal scrolling it tends to look a little bit messy, anyway, if you find a solution on how to make a better implementation of this, it will be a great contribution to the experiment :D.
P.S: Due the major reception that this exercise have had, we’ll be probably releasing this exercise as a jQuery plugin, so stick with us…
April 7th
Thank u for sharing.
April 27th
Very nice. Thanks.
A question though: The nike-site succeeds in doing this with real text. I don’t think that is possible the way you are doing it right? You can only move the background(image). Is there no way to move the entire div, so you can place almost anything in there?
Thanks
April 28th
Hi Michael, thanks for your comment. Indeed Nike has achieved the result you’re talking about in a dandy way. We did not conceived this tutorial to do that, but we know it’s possible, so maybe we will update it in the future. In the meantime, if you find out an effective way of doing this, we will really appreciate it if you show us how, so we can improve the tutorial :)…
May 9th
Great tutorial, thank you very much. A shame we English monoglots must translate comments in functions.js into English.
Baxter, you know I don’t speak spanish!
May 9th
Fortunately, I see Spanish is only used in the download file. :D
May 9th
Hahaha darn, we apologize for that impasse Brent, our programmer forgot to check that, we’re gonna fix this asap!, thanks for the advice…
December 7th
I’ve since wrapped up my parallax script into a WordPress theme to help non-developers create a similarly beautiful site. You can grab it from http://five3.me
December 7th
Brent, it looks very promising, pls send me an email to jp at webdesignshock once u released it. :)
May 9th
Awsm
May 9th
Thanks Ajas!
June 16th
Hey guys, awesome tutorial, I was wondering if anyone is trying to get png’s to move horizontally rather than vertically when the page is scrolled.
I’ve got a 3000px wide png that I want to move left to right when the user scrolls down the page, any help?
June 16th
Hey that’s a pretty neat idea Jeff, the functionality should be practically the same, you just need to adjust the coordinates…
June 24th
Great work!
I’m going to be “pitching” this soon. I’ve been doing this with flash and it just doesn’t hit the larger market due to the limitations of flash.
Thx
June 28th
Thanks Scott. Flash is really awesome for doing many things but on this case, jQuery offers a much better solution.
July 6th
thank you
July 7th
Hi, Good tutorial. I have added a couple more sections for a total of 4 backgrounds and 4 titles. It works fine on the first past, but after going up and down a few times things get lost and lose their position. Can you provide a solution to add more sections? Great work! THanks!
July 7th
Hi Dutch, thanks for your comment. What you can do to fix this problem is copy the 2nd section (where the container is located) and calculate the amount of pixels where the next section should appear.
July 8th
I did that by by the following you pattern. A 1600px section with a 450px gap in between. Same result – works that fist few passes but after a while the foreground images start to get lost under the title divs. Try it for yourself. I would like to know what I am doing wrong. Thanks.
July 11th
Hey that’s great, we’re glad that you find some usage to our tutorials :)…
July 28th
Grat tutorial,
but it’s also possible to use it on the content in a dif or only for the backgrounds?
July 30th
Wow, excellent!! Here is my first portfolio website…check it out http://www.jddesigner.ie It is still in development.
August 1st
So far is looking great Joe, please let us know as soon as you have it ready!!!.
August 20th
If anyone could post a link to a tutorial creating the pixel scroll count feature at the bottom of the nikebetterworld site that would be BRILLIANT!!! I have been searching ALL day
thanks
August 23rd
Thanks for this, I’m slowly getting my head around it. The script seems to struggle to accurately read the distance of scroll. If you spend some time scrolling up and down at different speeds it quickly gets everything out of position. Which is probably why you put the reset in towards the end when the user gets back to the top. Any pointers on how to improve this? Its kind of a deal breaker. Again thanks for this, its the best laid out script I’ve seen all day for this trick. :)
August 24th
Thanks for your comment Chris, we’re still working on a better approach for this parallax system, please let us know if you find out a better solution…
August 26th
Is it possible to apply the principle to a horizontal layout?
August 26th
Yes you can Hon, you just have to switch the X and Y values according to the background’s position and you’re done…
January 20th
In which file do I need to change the x and y coordinates? I’m quite a newbe but do like this tutorial. thanks
September 27th
Thank you very much for sharing this tutorial, I use a lot of support for projects I’m doing.
September 27th
You’re welcome Xavi!
September 27th
you’re welcome Xavi, glad you find them useful :)
October 15th
But if want to keep x-postion of background constant and change the y-postion of background , how to do that.
thnx for great tutorial
October 19th
This is amazing, just can’t wait for an excuse to use it on my next project! :) thanks
October 21st
Great Daniel! Feel free to share it with us!
November 21st
Thanks!
November 30th
Im sure Nike wasnt the first to make this kindda layout. Do we know who was the first to make this so called vertical parallax?
December 5th
kasper, yes, nike better world, the first I remember ;)
December 5th
Thank you have done great job.
December 5th
LFT, thanks, hope this job can be useful for your next projects.
December 5th
hey man
I don’t really understand this line…
if(scrollTop>$(this).scrollTop()) // Scroll up
why does this represent scroll up ?
isn’t scrollTop always = 0 , and
(this).scrollTop() which is $(window).scrollTop
will always be greater than 0 ?
December 5th
Ray, let me ask a engineer here.
December 7th
Thx a lot for this article, it is very useful !
December 12th
You’re welcome. Be on the lookout for our upcoming posts. Best regards!
January 18th
Excellent! Really enjoyed these!
January 24th
Be on the lookout for upcoming posts on the matter. Best regards
February 17th
Nice article – if anyone is interested have a look too at this new template – Slidexy – we’ve put together: http://www.tallhat.com/templates/slidexy/ – it uses jQuery scrolling and is ‘responsive’ as it also presents the same content well on iPhone and iPad. It ‘spreads’ the content for 2D scrolling using JS, then on iPhone it presents the same content in a much simpler vertical column format.
September 13th
This could not possibly have been more hlepful!
September 13th
I feel saifstied after reading that one.
[...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]
[...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]
[...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]
[...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]
[...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]
[...] Source Link: http://www.tutorialshock.com/tutorials/single-page-portfolio-vertical-parallax-jquery-css/ [...]
[...] post: jQuery and CSS single page portfolio, a vertical parallax … Share and [...]
[...] See more here: jQuery and CSS single page portfolio, a vertical parallax … [...]
[...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]
[...] how your organisation is portrayed in the public arena. Related BlogsjQuery and CSS single page portfolio, a vertical parallax navigation experiment « Design and D…Here are few related [...]
[...] jQuery and CSS single page portfolio, a vertical parallax … [...]
[...] jQuery and CSS single page portfolio, a vertical parallax … [...]
[...] jQuery and CSS single page portfolio, a vertical parallax … [...]
[...] jQuery and CSS single page portfolio, a vertical parallax … [...]
[...] jQuery and CSS single page portfolio, a vertical parallax … [...]
[...] jQuery and CSS single page portfolio, a vertical parallax … [...]
[...] jQuery and CSS single page portfolio, a vertical parallax … [...]
[...] jQuery and CSS single page portfolio, a vertical parallax … [...]
jQuery and CSS single page portfolio, a vertical parallax navigation experiment – Trackback from DailyKix.com…
jQuery and CSS single page portfolio, a vertical parallax navigation experiment…
[...] you how to emulate the "Nike Better World" website using the great jQuery framework and CSS.Source:http://www.tutorialshock.com/tutorials/single-page-portfolio-vertical-parallax-jquery-css/ Publicado por Aaron en [...]
[...] you how to emulate the "Nike Better World" website using the great jQuery framework and CSS.Source:http://www.tutorialshock.com/tutorials/single-page-portfolio-vertical-parallax-jquery-css/ var stLink = jQuery('a:last')[0]; stLink.href = 'javascript:void(0)'; SHARETHIS_post = [...]
[...] you how to emulate the "Nike Better World" website using the great jQuery framework and CSS.Source:http://www.tutorialshock.com/tutorials/single-page-portfolio-vertical-parallax-jquery-css/ var stLink = jQuery('a:last')[0]; stLink.href = 'javascript:void(0)'; SHARETHIS_post = [...]
[...] jQuery and CSS single page portfolio, a vertical parallax … [...]
[...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]
[...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]
[...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]
[...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]
[...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]
[...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]
[...] Tutorial Demo [...]
[...] la plantilla en Fireworks y, en el segundo, como codificarlo en HTML, CSS y jQuery.TutorialDemoExperimento en jQuery y CSS sobre la creación de un porfolio web en una página con navegación ver…Tutorial de Tutorial Shock donde se desarrolla una sitio web en jQuery y CSSbasado en la página web [...]
[...] Create a Funky Parallax Effect using jQuery – jQuery and CSS single page portfolio, a vertical parallax navigation experiment – Scrolling Parallax: A jQuery [...]
[...] 19. jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]
[...] jQuery and CSS Single Page Portfolio Vertical Parallax Experiment [...]
[...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]
[...] jQuery and CSS Single Page Portfolio Vertical Parallax Experiment [...]
[...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]
[...] Esperimento di Una Navigazione Verticale con Effetto Parallasse [...]
[...] Parallax Scrolling BackgroundsParallax Effect using jQueryNikebetterworld Parallax Effect DemojQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation ExperimentFree Action Script: Endless Parallax ScrollingScrolling Parallax: A jQuery PluginjParallax [...]
[...] http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax http://www.tutorialshock.com/tutorials/single-page-portfolio-vertical-parallax-jquery-css [...]
[...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]
[...] http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax http://www.tutorialshock.com/tutorials/single-page-portfolio-vertical-parallax-jquery-css [...]
[...] jQuery & CSS single page portfolio [...]
[...] Using JQueryImage Wall with jQueryPhotobooth with PHP, jQuery and CSS3HTML5 Grayscale Image HoverjQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation ExperimentHow To Create a Cool Animated Menu with jQueryShuffle Between Images Using jQueryRotating Image [...]
[...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]
[...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]
[...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]
[...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]
[...] jQuery and CSS single page portfolio, a vertical parallax divを重ねて、ナイキのサイトのような効果を実現しています。 [...]
[...] Although the jQuery and CSS jargon is above my head to make parallax effects happen, it is important for designers to understand sprites and other components needed for developers to “make it go”. A great website detailing what is needed to recreate this effect is Tutorial Shock. [...]
[...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment, un tuto très complet avec page de démo et sources à télécharger [...]
[...] 視差(英: parallax)エフェクトを利用したシングルページの作り方 [...]
jQuery and CSS single page portfolio, a vertical parallax navigation experiment – DesignShock http://bit.ly/qPh1KX
@totep_v Vertical Parallax http://t.co/5EmjO8G
One page website, vertical parallax http://t.co/LWPyTuwj via @webdesignshock
One page Website with Vertical Parallax – http://t.co/0kSWNIRi #WebDesign
@AxVence おおお！ありがとう！ 昨日、見つけたんだけどこれも同じ？ http://t.co/YOGPHJaG
One page website, vertical parallax http://t.co/HHTwn91p via @webdesignshock
Nike Better World lagi http://t.co/9DPvT2WW vertical parallax ⇢ @adisetiawan
#Design #Parallax #Web One page website, vertical parallax http://t.co/1ilzuDK3 via @webdesignshock