Javascript Parallax Details Cross Browser and Optimizations

[@bhaskaranb4629]

With my limited knowledge I would have never done this so soon without your help...thank you so much for the excellent video. God Bless!

[@lbcorney1167]

Excellent videos (2). Well done. And thanks for leaving in the errors and error corrections. That really helps.. I don't think I'm the only person who makes mistakes. I've learned a lot about JS animation that I didn't understand before. I also learned about that JSPERF tool to compare different routines. Many thanks for sharing!

[@Tony-ps4ec]

Thank you, I have searching tutorial like this with offsets and parallax, thank you for explaining your code, for me it was very useful )

[@ChrisLentz]

Great tutorial! I would love for you to post a part 3 that would explore making this mobile/touch friendly.

[@je3f0o74]

I really liked this tutorial, thanks. I was already sub-ed your channel, but I don't remember why and when? But I really liked this tutorial, because you are really know javascript :P

[@optikalefx]

Thanks! My pleasure.

[@liveskymw1030]

Great Video Man, I wanted to know how to make the divs of different heights but still keeping the parallax effect. As well as making the whole thing responsive. [The first div always covering the screen, on all devices.] Thanks a million

[@TheShagans]

Awesome, thanks for the researching this a bit.

[@optikalefx]

well those are just the style properties you can check out on w3schools. If you want to just use jquery use $(div).css("transform",transform string); and jquery will take care of it

[@76ers]

16:15 - There's a typo on line 111 It should be "offset()" instead of "offest()". This is for people who are copying the JS.

[@optikalefx]

You could use webGL, though the idea is that your panes would be functional HTML and JS. If you use webGL you'd have to a lot of sync work to overlay HTML on top of those scrolling sections Canvas would be too slow to be full screen I don't usually give links to tutorials. I wasn't making a library I was showing you one way to do it. You'll learn it more if you write it yourself.

[@hammerkkk]

awesome tutorial, just one question, how would you apply this to a container div within the body tags?

[@hoodwatcher8496]

Great video and very good explained! But isn't it better to call "render" only at a "onScroll" event? So it gets triggered very often without scrolling (or not)? Thanks. :)

[@rokijs123]

awesome

[@ransombot]

What about using canvas or WebGL? I notice on flickr when you use a scroll wheel on a netbook the page jump that happens with scroll wheels causes a lot of lag. Wouldn't canvas/WebGL that's more geared for these particular animation problems speed things up per frame as much or more than some of the optimization of javascript? Also the browser check for what is to be applied should be outside of the render loop IE moz webkit etc... Why still no link for source? Your site is up now... right?

[@optikalefx]

Is that FF win or mac? Also - how does Flickr's respond?

[@SharmaYelverton]

Great tutorial. I'm a bit out of my depth with anything javascript/jquery but I managed to implement this after watching both videos and spending a fair amount of time. I increased the li height to get a more noticeable effect as I was having trouble seeing it. Unfortunately it's still not working in firefox (mac). I've included the polly fill from Paul Irish but the console in firefox is returning: "ReferenceError: requestAnimationFrame is not defined". Any advice? Anyway, thanks again!

[@optikalefx]

make sure your definition of that function is BEFORE your other code.

[@christophersims2318]

can you provide some documentation on the cross browser coding you used? I.E. div.style.webkitTransform = transform; div.style.MozTransform = transform; div.style.msTransform = transform; div.style.0Transform = transform; div.style.transform = transform; I'm having issues with the page working on different browsers. Firefox 21.0 has no animation IE 10.0.9* only loads two and a half of the div images However this tutorial works perfect on Chrome 27.0.1 Thank you and Great tutorial!!!

[@Mr_BetaMax]

Awesome vid man! I do have one question though. When I use a mouse with a physical scroller, i.e. not a scroll pad or touch mouse, the page is very jumpy. Is there any way to work around that?

[@optikalefx]

***** Dewald Els Try changing the "thing being scrolled" to window.scrollY

[@Mr_BetaMax]

optikalefx Thanks for the feedback, but the parallax stops working if I use : var thingBeingScrolled = window.scrollY;

[@optikalefx]

Dewald Els Got a page online I can gander at? Or send me a zip of all your files.

[@Mr_BetaMax]

optikalefx hmm I can zip it :) will do that tomorrow (it's 6pm here in SA, have the files on my work PC)

[@Mr_BetaMax]

optikalefx You're awesome for making all the effort man! Thanks a lot

[@optikalefx]

browser version and OS?

[@pshermantech]

Why did you put ".top" at the end of the offsets array on line 124? Isn't it already stored as a number value?

[@featured14]

Great explanation about performance issues, however, recreating your work I made some changes. The reason is Mozilla did not register the scroll and second, the images were offset bottom and the body background was visible. var thingBeingScrolled = $(window); // instead of document.body this did not register on mozilla scroll var diffHeight = ( $divs.eq(0).height() - paHeight ) / 2 ; and in the loop (for loop) scroll = ~~( offset / liHeight * diffHeight ); // so the image is somehow centered and the effect is smooth.

[@jdub7616]

This was a great tutorial. It's working perfect for me in Firefox and Chrome but doesn't work in Safari. Any reason why it wouldn't work there?

[@Zacki06]

Hey there, how do I have to modify the js script if I want to have boxes with content (like text) between each of the picture but the text should of course not be parallaxing. And if possible, an answer without jQuery would be nice :) Thanks for the Tut!

[@JimmyS2]

i tested it on chrome , safari and opera 15 it works great , yet still i'm having trouble implementing in firefox , it doesn't respond to page scrolling , and the 3rd and forth image got somewhat misaligned vertically , although console.log(scroll) produces the same values as in chrome , any ideas

[@gilbertfrausto]

So i wanted to ask you about this error " Uncaught TypeError: Cannot read property 'scrollTop' of null". I did both tutorial videos and i keep getting the same error.

[@optikalefx]

Sounds like whatever doing scrollTop on something.scrollTop. Is not real. Or mistyped, or something else. But there is a problem with whatever you are calling scrollTop on

[@scooterbelasco]

Any way to add a fixed menu? My menu won't show up over the parallax

[@hellofriend2012]

I had the same problem. I have used z-index property. position:fixed; z-index:99;

[@scooterbelasco]

hellofriend2012 Yea after I posted that I tried it, worked like a charm!

[@PeterSaverman]

Great videos! I've got some problem with the cross browser compatibility. I paste just the way you do but it still won't work in FF and IE. Any idea why? Here's my code. (function ($) { var $container = $(".parallax"); var $divs = $container.find("div.parallax-background"); var thingBeingScroll = document.body; var liHeight = $divs.eq(0).closest("li").height(); var diffHeight = $divs.eq(0).height() - liHeight; var len = $divs.length; var i, div, li, offset, scroll, top, transform; var offsets = $divs.get().map(function (div, d) { return $(div).offset(); }); var render = function () { top = thingBeingScroll.scrollTop; for (i = 0; i < len; i++) { div = $divs[i]; offset = top - offsets[i].top; scroll = ~~((offset / liHeight * diffHeight) * 3); transform = 'translate3d(0px,' + scroll + 'px,0px)'; div.style.webkitTransform = transform; div.style.MozTransform = transform; div.style.msTransform = transform; div.style.OTransform = transform; div.style.transform = transform; } }; (function loop() { requestAnimationFrame(loop); render(); })(); (function () { var lastTime = 0; var vendors = ['webkit', 'moz']; for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) { clearTimeout(id); }; }()); })(jQuery);

[@optikalefx]

Ill have to check FF, but I don't care to support IE. I'd be open to testing IE11

[@PeterSaverman]

optikalefx By using var $thingBeingScroll = $(window); and top = $thingBeingScroll.scrollTop(); it adds support for both FF and IE. The jumpy scrolling is solved by something like this. bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax/

[@detroitluv82]

for what ever reason I can only get it to work with google chrome.

[@javierbaldrich]

i have the same issue :/

[@aleksejspridannikovs8722]

0 effect in bouth videos...:( pfff... thats demotivating

[@javierbaldrich]

Windows, v 16.0.2 :(