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

Building a custom chromecast web app

html - javascript


Chromecasts make streaming your favourite songs, games and movies easy. But if you're like me, you might be wondering what's going on behind the scenes when you cast an app, and how you can build your own.

CSS Material design toggle switch

html - css - javascript


Because sometimes all you want is just a good looking switch without importing an entire library to do it.

Five practical .htaccess tricks

apache - php


Apache's '.htaccess' has some very powerful tools that you can use with minimal effort to enhance the user experience and even performance, of your website.

karnamalone@gmail.com