Minimal GUI Set: More Than 1000 Free Elements, Buttons, Patterns, Icons And Many More

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

One page website, vertical parallax

Comments and suggestions in here

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
Download Source

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:


<!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 ;).


View Demo
Download Source


189 Responses to “One page website, vertical parallax”

  1. Great!!! It’s a new and different style for me. I am going to experiment it.

    • TS Editorial
      March 1st

      Sure Madhavan, let us know how it went ;)…

  2. 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! :-)

    • TS Editorial
      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 :)…

  3. awesome stuff, thanks for sharing this, cheers.

  4. Really cool I need to try this.

    • TS Editorial
      March 1st

      Sure Julio, let us know if you have any doubts…

  5. Wow! The Demo looks awesome!

    Crazy!

  6. 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!

    • TS Editorial
      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…

  7. Dave
    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.

    • TS Editorial
      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…

  8. The demo is actually very nice but don’t know how I would use this yet. Very well done!

    • TS Editorial
      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…

  9. thanks for the tutorial and the demo! will try it sometime :)

  10. Kristian
    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

    • TS Editorial
      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.

  11. JohnnyDough
    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 :)

    • TS Editorial
      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…

  12. Thank u for sharing.

    • Michael
      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

    • TS Editorial
      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 :)…

  13. 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! 

    • Fortunately, I see Spanish is only used in the download file. :D

    • TS Editorial
      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…

    • 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

    • Brent, it looks very promising, pls send me an email to jp at webdesignshock once u released it. :)

  14. Awsm

    • TS Editorial
      May 9th

      Thanks Ajas!

  15. 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?

    • TS Editorial
      June 16th

      Hey that’s a pretty neat idea Jeff, the functionality should be practically the same, you just need to adjust the coordinates…

  16. 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

    • TS Editorial
      June 28th

      Thanks Scott. Flash is really awesome for doing many things but on this case, jQuery offers a much better solution.

  17. thank you

  18. dutch
    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!

    • TS Editorial
      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.

    • dutch
      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.

  19. TS Editorial
    July 11th

    Hey that’s great, we’re glad that you find some usage to our tutorials :)…

  20. Alex
    July 28th

    Grat tutorial,
    but it’s also possible to use it on the content in a dif or only for the backgrounds?

  21. Wow, excellent!! Here is my first portfolio website…check it out http://www.jddesigner.ie It is still in development.

  22. 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

  23. 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. :)

    • 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…

  24. Is it possible to apply the principle to a horizontal layout?

    • Yes you can Hon, you just have to switch the X and Y values according to the background’s position and you’re done…

    • Thomas
      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

  25. Thank you very much for sharing this tutorial, I use a lot of support for projects I’m doing.

  26. sameer
    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

  27. Daniel
    October 19th

    This is amazing, just can’t wait for an excuse to use it on my  next project! :) thanks

  28. Thanks!

  29. 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?

  30. Thank you have done great job.

  31. 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 ? 

  32. Mike@voyage pas cher
    December 7th

    Thx a lot for this article, it is very useful !

  33. Excellent! Really enjoyed these!

  34. 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.

  35. thx for this tuto ! I will try it for my new portfolio

  36. i’ve made some video tutorials explaining how to build parallax scrolling websites step by step using the opensource Jarallax library.

    these tutorials are published on youtube and can be found on http://jarallax.com

  37. cool. thank you for sharing :)

    • Once we found it, we couldn’t wait to share tit with you guys, our followers :) Be sure to follow us on twitter  and facebook to check out our latest updates…have a good one!

  38. Hello, thanks for this great tutorial. Just been thinking if it’s possible to make a horizontal scrolling variant also? I need exactly that for Joomla. Horizontal smooth scrolling of the articles. any ideas?

    thank you!

  39. Many free blogging sites enable you to add the required functions to your website very easily. This is a great a great chance for a person with no HTML understanding to create a professional site easily

  40. Your demo is not working 100%, if you scroll up/down a couple times it actually breaks your site.

  41. linel
    May 24th

    why i can’t download the source? T.T

  42. Oh nice. So that’s what they call it, vertical parallax. Thanks for this tutorial, now I can make one on my own! :)

    • Blog1
      June 14th

      We’re glad to hear that, this is a cool effect that is worth implement in our site. please be in the lookout for incoming posts on this subject. Best wishes!

  43. thanks great tut

  44. Thanks a lot for this lesson! I’m going to apply it to my project.

  45. The demo looks great. Will try to follow this. Thanks for the information

  46. Great!!!

  47. Nice post. this code will be helpful in my webpage.

    • Designer
      January 21st

      Hi Ravi, we’re happy this post is useful for you.

  48. thankyou!!!!♥

  49. Thanks!

  50. thanks

  51. thanks

  52. Thanks!!

  53. Great job!

  54. thx

  55. Lebara
    April 15th

    thanks!

  56. THanks…

  57. unable to download

  58. The sourcecode download isn’t working guys. :(

  59. Thank you.

  60. awsome Great tutorial, thank you very much. A shame we English monoglots must translate comments in functions.js into English.

    • Designer
      July 23rd

      Thanks for the input. We are glad you liked, we will heave the translations in mind next time as sometimes files may filter as they are.

  61. awesome list.
    very informative.
    I so like it, thanks for sharing.:)

    • Designer
      August 21st

      You are welcome, stay tuned for more awesome freebies

  62. Tonny Bur
    August 28th

    Already been mentioned, but this doesn’t work properly.

    • Designer
      November 15th

      It needs some additional code to look good on Chrome. It currently works in Mozilla.

  63. Great article. Thanks for sharing the information.

    • Designer
      October 1st

      You are welcome, thank you for taking the time to check it!

  64. thanks

  65. The download link isn’t working!

  66. Thanks a lot, can’t wait to try this out!

    • Designer
      February 27th

      You are welcome, thank you for taking the time to read

  67. This could not possibly have been more hlepful!

  68. I feel saifstied after reading that one.

  69. [...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]

  70. [...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]

  71. [...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]

  72. [...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]

  73. [...] See more here: jQuery and CSS single page portfolio, a vertical parallax … [...]

  74. [...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]

  75. [...] 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 [...]

  76. [...] jQuery and CSS single page portfolio, a vertical parallax … [...]

  77. [...] jQuery and CSS single page portfolio, a vertical parallax … [...]

  78. [...] jQuery and CSS single page portfolio, a vertical parallax … [...]

  79. [...] jQuery and CSS single page portfolio, a vertical parallax … [...]

  80. [...] jQuery and CSS single page portfolio, a vertical parallax … [...]

  81. [...] jQuery and CSS single page portfolio, a vertical parallax … [...]

  82. 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…

  83. [...] 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 = [...]

  84. [...] 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 = [...]

  85. [...] jQuery and CSS single page portfolio, a vertical parallax … [...]

  86. [...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]

  87. [...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]

  88. [...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]

  89. [...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]

  90. [...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]

  91. [...] 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 [...]

  92. [...] Create a Funky Parallax Effect using jQuery – jQuery and CSS single page portfolio, a vertical parallax navigation experiment – Scrolling Parallax: A jQuery [...]

  93. [...] 19. jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]

  94. [...] jQuery and CSS Single Page Portfolio Vertical Parallax Experiment [...]

  95. [...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]

  96. [...] jQuery and CSS Single Page Portfolio Vertical Parallax Experiment [...]

  97. [...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]

  98. [...] Esperimento di Una Navigazione Verticale con Effetto Parallasse [...]

  99. [...] 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 [...]

  100. [...] jQuery and CSS single page portfolio, a vertical parallax navigation experiment [...]

  101. [...] 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 [...]

  102. [...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]

  103. [...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]

  104. [...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]

  105. [...] jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment [...]

  106. [...] jQuery and CSS single page portfolio, a vertical parallax divを重ねて、ナイキのサイトのような効果を実現しています。 [...]

  107. Para-whaaa?! says:

    [...] 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. [...]

  108. [...] 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 [...]

  109. [...] 視差(英: parallax)エフェクトを利用したシングルページの作り方 [...]

  110. jQuery and CSS single page portfolio, a vertical parallax navigation experiment – DesignShock http://bit.ly/qPh1KX

  111. One page website, vertical parallax http://t.co/LWPyTuwj via @webdesignshock

  112. One page Website with Vertical Parallax – http://t.co/0kSWNIRi #WebDesign

  113. @AxVence おおお!ありがとう! 昨日、見つけたんだけどこれも同じ? http://t.co/YOGPHJaG

  114. One page website, vertical parallax http://t.co/HHTwn91p via @webdesignshock

  115. Nike Better World lagi http://t.co/9DPvT2WW vertical parallax ⇢ @adisetiawan

  116. #Design #Parallax #Web One page website, vertical parallax http://t.co/1ilzuDK3 via @webdesignshock

  117. RT @WebDesignShock: One page website, vertical parallax http://t.co/P22PuBSQ #design #useful

  118. Sabe aquela tonelada de sites com scroll vertical e paralaxe? Aprenda a fazer: http://t.co/SLNEevSA Aqui como funciona: http://t.co/9yr7u8Co

  119. One page website, vertical parallax http://t.co/SxHIZWcTD4 via @webdesignshock

Leave a Reply

Comments

*