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.

See the Pen Immersive Parallax scrolling effect by Karna Malone (@kknmalone) on 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.


Other Tutorials

View All

Beginners guide to Regular Expressions

javascript - php - python


Regular Expressions (RegEx) are an extremely powerful tool that is common across most popular languages in use today. It can be used to find, replace and match text using a specialised instruction set.

Beme style progress bar

html - css - javascript


How to create a progress bar that wraps around the screen of any sized device similar to the Beme app.

How to use jQuery's ajax to load dynamic content

javascript - php


Providing dynamically loaded content instead of loading a whole new page can go a long way in terms of improving the experience your users have on your website.