Hello all.

 

Can anyone point me in the right direction with a tutorial on how to create the effect seen here.

 

I've tried a few tutorials, but none have the parallax effect like this one.

 

Any help would be grateful.

 

Thanks

There are a number of ways do create a parallax, the easiest is using jQuery to grab the the amount you have scrolled every time the scroll event occurs, you can then manipulate this number by a coefficient and take the resulting number to change the position of a background image. Different coefficients on multiple background images result in a nice parallax effect.

Something similar to this:

            $(window).on('scroll', function() {
                window.requestAnimationFrame(function() {
                    (function parallaxEffect() {
                        var scrollTop = $(window).scrollTop(),
                            coefficient = 0.3,
                            scrollAmount = scrollTop * coefficient;
                        $('.element').css({
                            'background-position' : '0px ' + scrollAmount + 'px'
                        });
                    }());
                });
            });

There *could well be a syntax error there as I haven't tested that as I'm away from machine right now, but that is a very basic way of creating a parallax effect.

Better than this is to use 3d transforms which you can do using jQuerys .css() method, this forces hardware acceleration and sub-pixel rendering resulting in a smoother transition. You should also research the requestAnimationFrame() function which in short only executes when the browser allows giving yet a smoother transition.

I've also ensured that the function will only run on elements once they are inside of the viewport, which does make a difference on a tall page with lots of animated elements.

 

Besides Parallax you can animate all kinds of css properties relative to the scroll position.

By the way that website looks great however when I try out the parallax in safari and IE it is very jumpy so something isn't quite right there.

I just thought I would add as a 'heads up' that you should be aware that parallax does not work on mobile devices, not sure about windows but certainly not on Apple.

I just thought I would add as a 'heads up' that you should be aware that parallax does not work on mobile devices, not sure about windows but certainly not on Apple.

 

The parallax I put up wouldn't work on apple because it (and many other touch devices) only execute JavaScript events after the page scroll event has elapsed, compare this with a desktop machine and the event will fire tens if not hundreds of times during a single scroll.

However it is possible to get around this by putting the webpage in a wrapper and translating that on the touchMove event rather than scrolling the page thus the page appears to scroll and on this event trigger the parallax function to get some nice parallax effects on mobile.

 

Whether or not this is a good idea is up for debate as the whole reason Apple and some others made this behavior was to preserve battery life as executing a function repeatedly many times a second uses up resources and could be seen as a waste, battery life probably is more important than a parallax effect.

Edited October 12, 201411 yr by rbrtsmith

Thanks for your replies.

 

I not tried this tutorial, but is supposed to work on mobiles. I will have to see if it is ok.