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

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.

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.

Detecting system dark mode in CSS

css


The "dark mode" feature has been spreading to apps and websites far and wide recently. It brings a new and discrete look to your applications as well as offering some extra control to the user...