Immersive Parallax scrolling effect
04 Dec, 2018
You might have noticed while moving along in a car or train, how far away objects seem to move across your vision slower than those closer to your eyes. This effect is known as parallax and its a fundamental aspect of vision which can often go unnoticed. Parallax adds depth to what would otherwise be simply a motionless plain.
Most websites are just motionless plains filled with information and no depth to draw the user in. But we can utilise our knowledge of how parallax behaves in real life to emulate a similar effect in web design.
Using the .scroll() event handler built into jQuery, we can run code whenever the user scrolls on the page. Then, using the .scrollTop() function we can get the distance from the top of the page to the current scroll position. For now, we can just print the scroll position in the console.
$(window).scroll(function (event) {
var scrollPosition = $(window).scrollTop();
console.log(scrollPosition);
});
With this scroll data, we can simply multiply the scroll position by the speed desired for the parallax element, eg: 0.7 = 70% scroll speed. Then use the .css() jQuery function to translate the position of any element you want.
$(window).scroll(function (event) {
var scrollPosition = $(window).scrollTop();
var paralaxMovement = scrollPosition*0.7;
// Update element position
$("#image").css('transform','translateY('+paralaxMovement+'px)');
});
This is an example of how this method of parallax could be used to create a parallax intro banner. You can check the HTML and CSS by opening the tabs in the codepen.
Unfortunately, at this time, the way that mobile browsers display the parallax effect is a little janky feeling so you might want to add a CSS media query that forces the element to behave normally when on these devices.
@media (min-width:600px) {
#image{
transform:translateY(0px) !important;
}
}
If your interested in seeing this effect in action, I used practically the same technique while developing yazacafe.co.nz. So head over there and check it out for yourself.
