Build a parallax scrolling website interface with jQuery and CSS
Parallax scrolling website interfaces have been popping up all over the place recently. I didn’t want to miss out on the fun, so I have put together a parallax scrolling demo built using jQuery and CSS.
Parallax what?
Even if you’re not familiar with the term “parallax scrolling” you will certainly be familiar with the technique. Parallax scrolling is a 2d animation process that creates an illusion of depth by animating foreground layers faster than background layers. When you observe the landscape from a moving car, objects closer to the car appear to pass you faster than scenery further away. Parallax scrolling uses the same principle to trick the viewer into thinking they are observing a 3d scene.
Demo and Download
My demo web page shows one approach to building a vertical parallax scrolling interface:
You can scroll in the usual fashion, use the navigation menu at the right-hand side of the page, or the next/prev buttons that appear underneath each article. As you scroll, the page’s four content layers are animated independently of one another to create an illusion of depth.
The scrolling looks smoothest in Safari (at least that’s the case on my PC), but my demo should work in any modern browser.
Disclaimer 1: Because this is just an experiment I’ve not spent any time optimising the demo to work on mobile devices. I wanted to keep the demo lean ‘n’ mean, and not clutter it by sniffing mobile browsers and forking my code. On a production site you’d want to ensure that the site degrades gracefully on mobile devices, where scroll events and fixed positioning might work in unexpected ways.
Disclaimer 2: The navigation menu in my demo is inspired by the menu on the Nike Better World website. If you plan on implementing a similar menu on a production site, please be aware of its origin.
How it works
The articles and background layers are given a fixed positioned with CSS, and assigned a z-index so that the foreground layers appear above the background layers. The four layers are: small clouds, large clouds, balloon/landscape images, articles.
/* foreground (ballons/landscape) */
#parallax-bg3 {
z-index: 3;
position: fixed;
left: 50%; /* align left edge with center of viewport */
top: 0;
width: 940px;
margin-left: -470px; /* move left by half element's width */
}Within each layer individual content elements are absolutely positioned. This was the most fiddly part of the process, since the elements need to positioned in such a way that they align in a pleasing manner when the user scrolls to any of the four articles. In this case it was really just a process of trial and error.
#bg3-1 {
position: absolute;
top: -111px;
left: 355px;
}
#bg3-2 {
position: absolute;
top: 812px;
left: 321px;
}
/* etc... */A few lines of jQuery control the parallax effect, triggered by a scroll event. I was surprised how easy this was to achieve, it is literally just a handful of lines of code.
$(window).bind('scroll',function(e){
parallaxScroll();
});
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('#parallax-bg1').css('top',(0-(scrolled*.25))+'px');
$('#parallax-bg2').css('top',(0-(scrolled*.5))+'px');
$('#parallax-bg3').css('top',(0-(scrolled*.75))+'px');
}As you can see the CSS top property is used to move each layer as the user scrolls. The foreground layer is always aligned to the top of the document, while the movement of other layers is adjusted according to their depth. The lower a layer sits in the stack, the less distance it is moved.
The rest of the jQuery is concerned with controlling the navigation menus. When the user clicks a navigation button the page scrolls to the top of the associated article. In the event that the user has JavaScript disabled, regular HTML anchor links still allow the page to be navigated, but without any fancy pants animations.
Next steps
I’m sure there are plenty of other approaches to parallax scrolling, and hopefully my experiment provides a starting point for your own explorations of the technique.
Update
I have updated the demo so that each parallax layer is given a fixed, rather than absolute, position. This approach gives a smoother scrolling effect.
158 thoughts on “Build a parallax scrolling website interface with jQuery and CSS”
Comments are closed.
I’ve been a good time enjoying this experiment, thank you very much.
How can i add one more button with its own content and animation?
@Kiltro You would do that by adding another <article> to the #content div, giving it a unique id (e.g. id=”new-article”), and styling it according to your requirements with CSS.
Then add another navigation button to the #primary menu, with its href pointing at your article (e.g. href=”#new-article”).
And finally, add a jQuery click handler for the new nav button. It should be fairly clear from looking at parallax.js how to do that.
Yes, I did that … I had some problems at the beginning and use a single very high background image.. and buttons do not work properly, reducing the size of the background picture, the problem disappeared.
Hey – Great plug-in. How does this hold up in IE?
Any suggestions on repositioning the ‘right-fixed nav’ to be positioned fixed at the top?
cheers.
@101ers My demo works in IE7+. Maybe IE6 too, but I’ve not checked. To make the nav fixed to the top of the viewport, just change its CSS top and right properties, e.g. top: 0; right: 50%
Awesome man.
It’s working great – weird thing though, after I customized the menu; the ‘smooth animated scroll’ became somewhat shaky/laggy.
P.S. I know you said you hadn’t optimized for any mobile devices, but did see you were using some HTML5 in the markup, do you know if it has any functionality on mobile? I was thinking about trying to optimize it, or at worst degrade similar to as you were talking about in the tut.
Thanks dude
@101ers My demo actually works fairly acceptably on iOS devices. Scrolling between sections works, but the position of background layers is only updated after the scroll has finished. So you don’t get a parallax effect, but the page isn’t broken.
Awesome – any suggestions on the easiest way to add additional scroll points that animate the same as the first four?
@101ers Sorry, you’re on your own there! But the steps involved are:
– Add another article to the HTML markup and style it.
– Add any additional background images to the #parallax-bg3, #parallax-bg2 and #parallax-bg1, and position them with CSS.
– Add an additional button to the navigation menu.
– Add a click handler for your new button to parallax.js.
– Modify the logic of the redrawDotNav function in parallax.js to include your new article.
There may be something I have overlooked, but that’s the gist of it.
I noticed that on your demo (and my working file) that on firefox if you scroll by dragging the scroll tab, the window shudders. Only on Firefox.
@Marcus – I think that may just be the nature of Firefox. I’ve noticed the same thing on other parallax scrolling sites, e.g. http://www.manufacturedessai.it/it/ I assume there is a small delay before a JS scroll event is triggered.
Hi,
I want to use the above parallax, but in horizontal manner. User can use keyboard arrows, mouse wheel to navigate to next slide, also corresponding navigation dots must be selected.
I have seen many examples no one did horizontal scroll with navi dots.
what changes should I make in your example to make it horizontal
Thanks,
Nik
I tried the demo on chrome, and I found that when I scroll with the mouse wheel, it slightly jumps. That is because the frame is rendered in it’s new position before the scroll event is triggered.
I was thinking that a possible solution might be to use fixed position instead of absolute (and fixing all the math accordingly), this would keep the layers in place until the event is called. This though would break the demo entirely on browsers that don’t support fixed positioning, including iOS safari prior to version 5.
But still, great post, it’s nice to see someone putting up a tutorial on this recently popular technique.
Testing it in Chrome and experience is jaggy, I think it happens for elements that are meant to scroll slower then the page. When I was working on similar project and used http://www.nikebetterworld.com/ as a source and inspiration, I’ve stumbled upon the same problem. Nike website surprisingly doesn’t have such problem. One thing that they do differently, as far as I investigated, they do not move separate elements, but backgrounds. I’m planning to address this in my next parallax project.
Wow,
great inspiration.
Check this dynamic 3D cloudy sky parallax webpage: http://bit.ly/vWDYlK
Has anybody had success in the meantime fixing the graphic glitches in other browser than Safari? I tried everything and it always does that.
Great job..dude
keep it up.
Just an update on the flickering issue some of you have mentioned. I have been able to fix this by changing the positioning of #parallax-bg1, #parallax-bg2 and #parallax-bg3 from relative to fixed, then changing the parallaxScroll JS function to:
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$(‘#parallax-bg1’).css(‘top’,(0-(scrolled*.25))+’px’);
$(‘#parallax-bg2’).css(‘top’,(0-(scrolled*.5))+’px’);
$(‘#parallax-bg3’).css(‘top’,(0-(scrolled*.75))+’px’);
}
Need to test this a bit more, but assuming I don’t notice any issues I’ll update the demo with these code revisions.
In the meantime, you can download my revised source files here: f6design.com/projects/parallax-scrolling/parallax-scrolling-demo-fixed-pos.zip
Thanks for fix! Safari was always smooth but this has fixed the jitter on Chrome.
In case you want to use the background-positioning method instead of positioning the elements themselves, there’s a similar fix for that as well. Just change the css of the elements affected to have a background-attachment: fixed. tested it out in Firefox and Chrome, with no more glitching as well (cause it also happened as in the elements positioning way)
Thanks a million. Great, super straighforward overview. I’m SOOO not a programer but was able to get this customized and working. Learned a lot.
Thanks man!
Thanks a lot, great article!!
Is it possible to use the keys down & up to scroll a section to another?
Still thanks
Thank..
So great.
I’ve been having trouble with holding the navigation button when it’s on its page.
And just found this awesome demo and source.
If I am right, the last section of “parallax.js” is about it.. isn’t it?
Thank you.. this is so helpful!!
peace!
@Kevin That’s right, the function redrawDotNav is bound to the window scroll event, measures how far the page has scrolled, and styles the nav button for the current ‘page’ accordingly.
Just an update regarding the flickering issue. I have updated the demo, download zip, and source code examples on this page with the fixed version.
Hi Jonathan…
I was wondering if you could please help me integrate keyboard navigation for this script. My goal is to configure the up/down arrows to navigate between each section or circle. Any help is much appreciated.
Thank You and happy 2012.
What exactly we could/should do to optimize this simple code for mobile devices? I’m interested in iOS devices, so it is a Mobile Safari in mind…
As someone already mentioned – on iPad I can see only “jump” of clouds after scroll finishes, so was wondering is there anything to do to make this finger-real-time more friendly?
Thanx
Hi did anyone figure out how to integrate keyboard navigation?? Would be awesome.
Awesome advice on how to use jQuery and CSS to design parallax scrolling features. B Culture Media wrote about the visual enhancement parallax scrolling gives a website here at http://bculture.tumblr.com/post/16986692131/parallax-scrolling
Hi!
Is there any way to replace the buttons with normal text buttons, so you dont have to rollover to see the text.
Thanks,
and very nice work!!
Regards,
Justin
Built a parallax-scrolling microsite based on your demo. It’s working pretty well – I just wanted to say thanks!
Out of all the parallax tutorials out there, I found your markup and logically-constructed CSS, HTML and JS to be the simplest and most elegant. Very nice. I even tweaked the JS to move elements in other directions, yielding some neat effects.
I’ll share this tutorial, and thanks again!
@Allan Your feedback is much appreciated. I’m pleased you found my demo useful!
Hi,
I want to use this parallax, butin horizontal. I tried it at horizontal but it didn’t work. What changes should I make in your example to make it horizontal.
Thanks.
You should change every instance of ScrollTop to ScrollLeft, y values per x values and make sure you can get all elements in an horizontal scroll across the page. Usually through floating them all until the last of them, after which you insert a span or div with the style of clear:both, to make the browser calculate the full width of all of the window.
I didn’t do it trough this plugin, but rather hard coded most of the code and based off some of it elsewhere, but I got an working page here (that has not my copyright though, I advert you, but the studio where I made it has it, so it is not open source, but as with everything web, you are free to see its entrails and understand its workarounds.
Here it is — http://sayheyny.com/wordpress Please pay attention, cause this is a commercial website, with some awareness already on the web. Again, beware when copying code, cause I cannot be responsible for it. Cheers!
Brilliantly clear article. Also the replies to the comments have been really helpful. I’ve been reading a few articles on parallax scrolling recently and this has helped pull it all together. Thanks.
Hi Jonathan,
Just want to say thanks for providing this. I just launched http://pixel-fable.com based on the code you provided.
For those who are interested, I made some modifications to the CSS and HTML that allows this to work responsively. Basically, I moved all the images to background images and set breakpoints with media queries, so I could serve smaller images and realign the divs for smaller screens. It’s not perfect, but that is the beauty of design, I guess!
Cheers!
Senongo
Hi Jonathan,
Thanks for great piece of code. I think it works great when scrolling with buttons, but i think that there isn’t that sense of parallax when scrolling with the mouse.
This is only complaint i can find, everything else is top notch.Also i would like to ask what is the licence with these ballon images, i find them quite nice:)
Great example of parallax scrolling and thanks for posting the source!
Hi, how i can positioned a fixed background image?
Absolutely awesome and easily understandable. Thanks a bunch!
Hello!)
Your solution is only applicable to sites with a fixed height. But if content on the page will be changed dynamically? For example, in cases with CMS.
Thank you!
@Antonio. That’s right, my solution is intended for a specific use-case, in which the designer/developer has control over the amount of content that is to be displayed, and therefore is able to construct a highly customised scrolling experience.
@Jonathan. how i can positioned a fixed background image? Thanks so much!
@Manuel I’m not really sure how to answer that except to say “look at my HTML and CSS”. My demo uses a mix of fixed positioning for each of the three background layers (bg clouds, midground clouds, balloons), and absolute positioning for individual elements (e.g. an individual cloud or balloon). If you have a good grasp of CSS it ought to be simple enough to follow.
@Jonathan. Yeah i saw. But i can’t put a fixed (do no scroll) background image instead a gray color. do u undesrtand? sorru for my english
@Manuel
body {
background: #000 url(your_image.png) top center fixed no-repeat;
}
@Jonathan. Yes, i tryed this. if you testing dont work.
@Manuel I did test, and it worked for me in Chrome.
@Jonathan. Ok. maybe i have an another problem. i will check. Thanks for your time
I really like this example as a starting point, thank you.
Working with it further I found a more convenient solution for redrawDotNav() func. You could easily implement Bootstrap’s scrollSpy plugin, so you don’t need to hardcode section elements
Cheers!
This really is a fantastic article, and a pretty strong demo—came in handy when trying to explain to clients! Thanks for this.
Awesome and smooth Parallax!
Do you have any plans to make this work horizontally? Would be great.
@Nader I hadn’t considered it, but perhaps I shall…
Hi!
Just for fun version without jQuery – http://h123.ru/ES5-DOM-SHIM/parallax-scrolling-demo/ using just DOM4 API and ES6.
IE7+ and other good browsers.
Really great demo. I’m relatively new to web design and I’m playing with it now. Do you happen to know how to make an object stop and stand still at certain points…and then carry on scrolling again at other points?
@termi – nice!
Just for fun… horizontally. It could be better. I know… I hardcoded some numbers over there… :P
http://prottotipo.com/app/parallax-scrolling/
@Sebastian You da man!
Thanks! Great Demo, but there seems to be something broken with refreshing the Page in Firefox (mine is 11.0). Images Disappear at certain Point and come back when i start to scroll. Also sometimes at refresh it moves to the beginning, and then -refreshing again- it moves back to the point it came from.
I’m no pro, so i couldn’t figure out why. Do you?
Thx anyway
@Christopher I can’t reproduce the bug you describe (FF 11 Mac). When I refresh the page it displays exactly as it was prior to the refresh, and I haven’t noticed any images disappearing. Will test on a PC later.
That’s so awesome article.
Very very nice !!
Cool guide and demo, will try to work it out, thanks a lot!
Brilliant!
Thanks a lot!
Wow! Nice tut…Cheers!
How do I add additional items to the page and Nav?
Hey Jonathan, great plugin I really appreciate you sharing this. There is one problem I’m facing though; the first ‘redrawDotNav();’ in the parallax.js keeps returning an error and stops all scripts working.
I’ve recently updated my jquery to version 1.7.3 to make use of some other scripts but this single operation seems to fail where the others work fine. I get the parallax effect and the menu scroll works, I just can’t get the menu class to change to ‘active’ because of this.
Any ideas? Thanks.
@Prizme I tested with the latest version of jQuery (1.7.2) and my demo work fine – no console errors or anything, so I’m afraid I can’t suggest why you might be getting errors.
Hi. This tutorial is great. I love it. I’ve gone through this tutorial and understand everything bar one part.
I’ve been able to add an extra 3 sections so there are now 7 sections, each with content. I’ve managed to add the extra dots for the navigation and I can get each section to scroll smoothly. The part I am struggling with is getting the side dot navigation to be set to an active state on the new sections ive created.I get to section 4 and after that the links work and the scrolling effect works but the little dot isn’t set as active. What do I need to change to make this work?
I think its this section but I cant get it to work. Any help would be greatly appreciated:
/* Set navigation dots to an active state as the user scrolls */function redrawDotNav(){
var section1Top = 0;
// The top of each section is offset by half the distance to the previous section.
var section2Top = $('#frameless-parachute').offset().top - (($('#english-channel').offset().top - $('#frameless-parachute').offset().top) / 2);
var section3Top = $('#english-channel').offset().top - (($('#about').offset().top - $('#english-channel').offset().top) / 2);
var section4Top = $('#about').offset().top - (($(document).height() - $('#about').offset().top) / 2);
$('nav#primary a').removeClass('active');
if($(document).scrollTop() >= section1Top && $(document).scrollTop() = section2Top && $(document).scrollTop() = section3Top && $(document).scrollTop() = section4Top){
$('nav#primary a.about').addClass('active');
Thanks,
Richard
@Richard You’re looking at the right portion of code, but the edit you’ve made to it doesn’t make much sense :)
There are two steps to achieve what you want:
1. Add new variables representing the top offset of sections 5 through 7. For example:
var section5Top = $('#your-section-id').offset().top - (($(document).height() - $('#your-section-id').offset().top) / 2);2. Edit the series of if/else statements that follow your new variable declarations to detect when the user has scrolled to one of the new sections. For example, the following conditional logic detects when the user is viewing section 4:
} else if ($(document).scrollTop() >= section4Top && $(document).scrollTop() < section5Top){ $('nav#primary a.my-new-class').addClass('active');All you're doing here is checking against the top offset values you detected in step 1. Note that the snippet above is just one portion of the required code. Check against the source code of my demo and it should be fairly clear that there is a separate if/else for each of the four sections of the interface - you'll need to add three more.
How do we set the frameless-parachute, manned-flight text etc.. not to move? does anyone know?
This tutorial is amazing… thanks
One question however. I can’t seem to get the navigation a.active to work.
I’m using a sprite for the hover, active link state,which works on both the iPad and iPhone but for some reason it is not working on either Safari, Firefox or Google Chrome. Here is a link to the site http://www.john-beadle.com/
Any help with this would be greatly appreciated.
Thanks,
JB
You sir, are a genius.
Thanks for sharing your marvelous demo and explanation. This type of selflessness epitomises the World Wide Web at its best.
Keep up the good work!
@Jonathan, Your tool is really impressive. There are a couple of additions / variations you may need to consider to make it even greater.
In the next version include these elements:
1. vertical (current) and horizontal (suggested by Sebastian here) ;
2. Make it possible for the background images to resize and scale
dynamically as the user resizes the window. A Jquery called Redux
already does that and is at http://bit.ly/KCwckL ;
3. Timing of the sliding background
I hope to hear about this new version you soon.
AJ
@AJ Thanks for the suggestions. I don’t have any plans to revisit my parallax scrolling experiment, but feel free to tinker and implement the changes you’d like to see. If you want to see a responsive implementation of my technique check out http://pixel-fable.com/, it’s very cool.
thank you for sharing your experiment with us! it’s an absolutely perfect tutorial.
thank you thank you thank you!!!
frau keller
ps: your next version should wash my dishes and clean my bathroom the next time i drop by.
Hi all,
I’m not a programmer but trying to learn how to make a web/iOS app.
I know that Baker/Laker is based on HTML5.
Can I implement this parallax scrolling in iPhone or iPad?
Please advise. Many thanks.
Same for me. Would love to implement this for HTML/iPad, but noticing that it doesn’t work for iPad. Thoughts?
Hi,
Great tutorial!
I added a fifth section but I get a second scroll bar and I’m not sure why.
This is the link:
http://www.stri.si.edu/kalko-memorial/index2.html
It’s not yet finished but I can’t figure out how to get rid of the other scrollbar. It moves the content in one of the layers….
Why am I getting 2 scrollbars?
Thanks in advance!
-Marisol
I think I found it… I think the second scrollbar is created by this:
html {
overflow-y: scroll; /*always force a scrollbar in non-IE */
}
Hi,
I added a fifth section but it doesn’t scroll to it, it stops at a certain point and I can’t continue scrolling. Also the active state of the 5th section button on the primary nav bar (the one with the circles) isn’t activated.
The Fifth section is #remembering and I added this to the javascript:
/* Set navigation dots to an active state as the user scrolls */
function redrawDotNav(){
var section1Top = 0;
// The top of each section is offset by half the distance to the previous section.
var section2Top = $(‘#frameless-parachute’).offset().top – (($(‘#english-channel’).offset().top – $(‘#frameless-parachute’).offset().top) / 2);
var section3Top = $(‘#english-channel’).offset().top – (($(‘#about’).offset().top – $(‘#english-channel’).offset().top) / 2);
var section4Top = $(‘#about’).offset().top – (($(‘#remembering’).offset().top – $(‘#about’).offset().top) / 2);
var section5Top = $(‘#remembering’).offset().top – (($(document).height() – $(‘#remembering’).offset().top) / 2);;
$(‘nav#primary a’).removeClass(‘active’);
if($(document).scrollTop() >= section1Top && $(document).scrollTop() = section2Top && $(document).scrollTop() = section3Top && $(document).scrollTop() = section4Top && $(document).scrollTop() = section5Top){
$(‘nav#primary a.remembering’).addClass(‘active’);
}
}
I can’t seem to figure out why it’s not working on the last section.
Thanks in advance!
@Marisol – I can’t provide help debugging your customised code, but you may find my advise in an earlier comment helpful.
Well done, very nice.
even tried out parallax too, have a look at: http://about.geogeek.ch/persistencia.php
@Marisol
“I added a fifth section but I get a second scroll bar and I’m not sure why.”
you need to adjust the height of the document with the new section
line 62 in main.css .. in the body.
cheers!
Love it but,
How can i make one new article?
Also when i type more text then there is it becomes ugly how can i do that?
and last wehen i add one new article i hope that the baloon space from one to the other get bigger is that so?. What i want is a long website and kind of lots of text. Can i add one galerie? Sorry for my bad english. and thank you. ohhhhh wait. Is it posible to make the text 2 coloms?
Is it possible for the parallax to not affect all other (unseen) articles until you reach said article? For instance, if I’m on article1 and am scrolling, I do not want elements on article2 to be scrolling UNTIL I reach article2.
Thanks
Hi,
I added more sections, but the scroll doesn’t work.
As I’m trying to debug it, the code doesn’t even work on the scroll event handler in parallax.js line 5.
Anybody can help me with this?
Thanks :-)
I think I’ve already got the problem.
Anyway, thanks for the tutorial. It’s clearly explained and easy to understand ;-)
Hey crazy questions:
1 crazy question) what is the ‘cloud-sm1.png’ for?
2 crazy dumb question) I want to try this but with a bit of a busy background I want the about etc text blocks to have a transparent white b/g do I put that here:
#manned-flight ,
#frameless-parachute,
#english-channel,
#about {
padding-top: 105px; <—— background etc…
@democrazy:
1) I don’t think it’s used at all. Must be a leftover!
2) Yep, that sounds right.
fastest reply ever…
thanks for that… I will concoct some more terrible questions to test your patience… give me a moment… gnnnn
thanks! i made this site with your example!
http://www.calzadogolty.com/
Hello Janothan!!!! I am from Chile, VERY NICE WORK!!!! What is the license of parallax.js ? MIT? something like this??? please let me know!
thanks you!
Source code is a bit complex, but thanks to your explanation its crystal clear ;)
Thanks a lot, cheers from France
To add another level(s) of parallax scrolling would it be just a simple:
$(‘#parallax-bg3’).css(‘top’,(0-(scrolled*.75))+’px’); <adding another one of these with edited scroll amount)
and then the html etc?
Fun part will be seeing how this works in iOS…
We were experiencing the same problem @Christopher described and managed to “fix” it by adding
parallaxScroll();
right after
$(document).ready(function() { -line
first: hanks for the great tutorial; i’ve been trying to reverse the direction of scrolling of the text sections (to make it go backwards) can you give me a hint how to do this? I’ve tried a couple of things but it broke the smooth flow and didn’t work.
Thank you!
Very nice example. Thanks.
Nice work bro!
I have some problem.
Anchor link can’t work when I call it from other page.
for Example, I used Frameless-parachute on other page.
But it can’t go directly Frameless-parachute content.It goes to Manned Flight.
How to solve this ?
Pls help me asap.
Thanks a lot
@Moon You’d have to implement some sort of JavaScript hashbang deeplinking. Asual have a jQuery plugin that might be useful http://www.asual.com/jquery/address/
[…] Download (ZIP—700k) This Parallax effect was initially developed by Jonathan Nicol over at Pixel Acres/F6 Design. I couldn’t have put this together without his work and want to make sure to acknowledge his […]
I wonder if there is not that same file to download, I had such a section I got it vertically and could navigate this section HORIZONTALLY.
Sample:
Section portfolio, I get it vertically and within that section I sail HORIZONTALLY.
I appreciate the guidance.
Nice clean tutorial. Thanks for keeping it simple and explaining it well!
great example, thanks!
so clean and simple…
can you help me out on something please?
what should I do if I need a certain object to stop at, say, “top:0”?
thank you!
Hi Jonathan,
Thanks for this great tutorial.
Used it to do a little parallax demo
http://youssef.groupewib.com/BM/BK/
Keep up the good work !
Nice!!! This is exactly what I was looking for, clear, simply and efficiently, thank you so much!
Hi Jonathan,
Thanks for putting together such a simple, easy to understand tutorial. I used your method for my portfolio at http://www.oregamimedia.com and included a link back to this tutorial.
Would love your feedback. Thanks!
Hello,
Your script and example are great!! Used it to build out a portfolio site. But there seems to be an issue with MSIE — are you aware of a compatibility issue? It seems that the top layer (#parallax-fore) is not being drawn.. does this have something to do with the z-index setting? Are there other constraints with MSIE? The site works well in other browsers.. Would appreciate your input:
http://www.cloudsao.com/parallax/proj_004_forest-mind/index_fm.html
Thanks in advance!
@clouds – Worked for me in IE9 and IE8 under Win7. I didn’t test IE7. I noticed it took a few seconds for some graphics to load, so it’s possible IE is waiting for another asset (JS or something) to load before it finishes loading the images. Or it may have just been network congestion. Looks good, BTW! Nice to see a sideways scrolling implementation.
I worked to implement a little of your parallax in a WordPress site.
Unfortunately it doesn’t seem to get the code:
$(window).bind(‘scroll’,function(e){
parallaxScroll();
});
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$(‘#parallax-bg1’).css(‘top’,(0-(scrolled*.80))+’px’);
$(‘#parallax-bg2’).css(‘top’,(0-(scrolled*.90))+’px’);
$(‘#parallax-bg3’).css(‘top’,(0-(scrolled*.50))+’px’);
$(‘#parallax-bg4’).css(‘top’,(0-(scrolled*.20))+’px’);
}
Is it possible that i need to change the “.css” in this script to link to the right css?
Could you help me with this one.
Great tutorial. Love the clouds, where did you find them?
Thanks,
James
Have it online but not working.
Anyone suggestions..
@Mark If you look at your javascript console you’ll see the error “Property ‘$’ of object [object Window] is not a function” in line 4 of your parallax.js. This means you’re trying to reference jQuery’s $ method before jQuery has been loaded.
This is happening because you’re executing parallax.js as soon as it is loaded, rather than waiting until the DOM has loaded.
Instead, you should wrap the contents of parallax.js in a jQuery (document).ready() handler. For a WordPress site, this can be done like so:
jQuery(document).ready(function($) {
// your code goes here…
});
You can read more about using jQuery’s $ shortcut in WordPress in the WP codex.
@James The clouds are a stock vector element. I can’t remember where I purchased them: possibly 123RF or ShutterStock.
Cool tutorial!
thanks for al the support.
have it working now on http://www.woodcut.nl
Hi Jonathan…. HUGE PROPS!
After hacking around for hours yesterday with different examples of parallax, I was delighted to find your clean, clear, and nice-to-work-with example. Alot of developers are achieving this with dynamically moving image backgrounds… but moving the ‘s themselves is much more flexible.
Thanks!
Regards.
S.
hey thanx 4 d gr8 tutorial jonathan…
and @youssef ur bubble kingdom was amazing,
could u pls explain it in details as to how you did it as i’m new to this jquery and css world.
i would especially want 2 know more on how ur able 2 expand the bubbles when d cursor hovers over it and how everytime you refresh it comes up with a new layout.
would b grateful 4 ur rply.
Hello,
how to adapt this to the mobile?
Thanks.
Hello Jonathan, congratulations for the hard work and dedication.
The sample “demo” that you released, you can download and use it in personal projects, such as portfolio?
Great Tutorial, really awesome! It works fine and isn’t to difficult to understand it!
Jonathan,
I love the visual style you’ve chosen to represent this.
A question(s). So the content is in articles and placed into position while each DIV has a clouds as images in it which is offset to give the effect. Now because each image is a background to a SPAN what problem would you possibly foresee in each SPAN have content in it? ie: each cloud could be a quote or small article.
@Mr. John – Sure, use it as you please. If you trawl back through the comments you’ll see that quite a few people have used my demo as a starting point for creating their portfolio sites and personal projects.
Bear in mind that if you want to use any of the images from my demo, you’ll need to ensure you own the proper licenses (I bought a license for the cloud image, and the others I believe are in the public domain.) I assume you plan to use unique imagery, however.
@MIchael Yes, you could replace the cloud imgs with spans, or divs or whatever.
This is not awesome, This is awesomest…! I LIKE IT VERY MUCH.
Thank you for the great detailed tutorial and demo. I will be using this for a special April 1st site that is launching soon.
Cheers!
Many thanks Jonathan.
Again, congratulations for the work and the Initiative is of our making available excellent demo.
hugs
Any way to get this working on iOS? Bypassing the regular iOS refresh limitations so the background keeps scrolling while one swipes?
Wow this is a neat tutorial!!
Someone knows how to adapt this to a wordpress theme???
@Mark, you said you did…could you share please???
Well, This is really awesome plugin. Thanks for sharing such a great plugin.
Hi,
Excellent work. One question though,
How to I put a relative footer at the bottom of the example?
Cheers!
Sebastian
Thank you very much. Your demo is so clean and elegant, it is simple to follow.
nice and simple work. but is there a way to stopp some divs at a certain position?
regards
pascal
Hi,
Nice work. Clean codes and helpful comments inside the code.
How can I make every article to be like 1 slide which has a wide fixed background so that the effect is like on this link http://www.ok-studios.de/home/ or http://www.sullivannyc.com/
Thanks in advance.
Whiz
hi,
i wanna know is it possible to do a tutorial on horizontal parallax scrolling website??
i’m a noob and i couldn’t find any good tutorials on it
Nice tutorial. Simplified the concept. Thanks for the demo and code also, it really helped. Working on implementing this on my website.
Keep writing!
I tried to add more article’s and the scrolling just quit. i think i may have messed it up in the parallax.js. what is the trick to adding more content?
Perfect tutorial, thank you very much!
(I realize it’s an old article, but I’m a sucker for adding things for future reference.)
@Jonathan the author,
I’ve only briefly checked the demo and the code, but you seem like the classy kind of developer. You know, the type any startup would hire (or contract) while yelling either “bingo”or “score”—trust me: we’ve been looking, I’ve interviewed; and I’ve been emailed odd things titled “resumé.”
This is great stuff, and I love the blog.
So no offense now, when I mention another JS tool—a crazy jQuery library of heavy caliber when it comes to animation tied to scrolling (e.g. parallax). It acts as the glue between TweenMax and jQuery.
If parallax is all you need, then the script on demo here does a real fine job. However, should you find more complexity suitable, then check out Superscrollorama (yeah, that’s the name):
http://johnpolacek.github.io/superscrollorama/
Again, no offense, I’m not affiliated with the person who wrote it. I’ve just used it a couple of times with great results (http://ideakites.com was a nice fit for it), so thought I’d share it.
Thanks for the article, keep it up! :)
— D.
I’m trying to make it responsive. I just have one question, how would I go about getting the right side with the pictures to break apart from the paragraph side and go below it, so it all fits in smaller screen. I’ve tried everything and I can’t get it to work.
Any help would be appreciated.
Thank you for this easy to follow tutorial, I used this technique in an info graphic on the History of Cloud Computing http://blog.eclipse.net.uk/cloudtimeline
@Jacob I like it. Good job!
Hi, I have question. How I can do it to start scrolling effect when section/article is on hover and stop it after e.g. 100px of site scrolling?
Nice tuto!
I d’like to know if the picture were made with a brush (photoshop) or did you draw them
Thks!
@Guinslym They’re old etchings and engravings. I bought a license for the cloud image, and the others I believe are in the public domain.
first of Thanks this is a great help!
trying to make sense of it (use to program C# / javascript in Unity game engine)
I can’t figure out what the “modernizr.custom.37797.js” is suppose to do…
also I moved al the articles to the middle for my page and now any linking doesn’t work anymore.
thx
@rottjung Modernizr is used for its HTML5 shiv, which enables old versions of IE to recognize HTML elements e.g. header, nav, article and footer.
Hi Jonathan,
Wonderful work Jonathan, but i have a question, how if i want to add another 2 frames to scroll, is it possible to work if I copy the codes and change the IDs?
I tried but fail :), But if you could help it will be appreciated. Thanks man!
Hello jonathan, Nice work!
I actually modified elements of your scrolling experiment and used for a site, http://www.generalflavours.com/beta
Keep up the good work!
hi Jonathon,
thanks for a great tutorial. I’m surprised to see you still answering comments too! what a nice guy!
any advice for adding a ‘bounce’ effect for when clicking on the prev next links?
I’ve tried adding jqueryUI’ easing option “easeOutBounce” but i’m struggling to know where it to best place it.
anyways if you have a quick answer, and the time, I’d appreciate your thoughts.
thanks again.
great tutorial parallax scrolling thanks a lot for sharing..
This is a great tutorial of parallax scrolling. Thanks a lot for sharing, Jonathan. Allow me add a comment here, could you please share a responsive version? I’m sure a lot of people look around with the responsive parallax scrolling effect for their website. It’s would be awesome…
Hi Jonathan,
Thanks for this wonderful tutorial!
There’s one part that I’m a little confused about…I can’t seem to get my dot navigation to set as an active state after adding two new sections. I was wondering if you can take a look at my coding and see what I’m doing wrong here?
function redrawDotNav(){
var section1Top = 0;
// The top of each section is offset by half the distance to the previous section.
var section2Top = $(‘#introduction’).offset().top – (($(‘#featuredwork’).offset().top – $(‘#introduction’).offset().top) / 2);
var section3Top = $(‘#featuredwork’).offset().top – (($(‘#featuredproducts’).offset().top – $(‘#featuredwork’).offset().top) / 2);
var section4Top = $(‘#featuredproducts’).offset().top – (($(‘#recententries’).offset().top – $(‘#featuredproducts’).offset().top) / 2);
var section5Top = $(‘#recententries’).offset().top – (($(‘#contactinfo’).offset().top – $(‘#recententries’).offset().top) / 2);
var section6Top = $(‘#contactinfo’).offset().top – (($(document).height() – $(‘#contactinfo’).offset().top) / 2);;
$(‘nav#bullets a’).removeClass(‘active’);
if($(document).scrollTop() >= section1Top && $(document).scrollTop() = section2Top && $(document).scrollTop() = section3Top && $(document).scrollTop() = section4Top && $(document).scrollTop() = section5Top && $(document).scrollTop() = section6Top){
$(‘nav#bullets a.contactinfo’).addClass(‘active’);
}
}
Any help is appreciated! Thanks!
awesome
This a very useful tutorial, thanks a lot for posting it. Unfortunately it does not work on iphones and ipads thou
Hey this is really clean awesome piece. Thanks alot
Hey man, thanks!
Finally one tutorial easy to understand about parallax scrolling effect.
One question:
How you can disable the mouse scroll action, so that navigation is done only with the buttons?
This is neat!
Great tutorial! Would be great to see this in touch swipe event horizontally.
why is swapping images for new different ones complicated?