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

Responsive web design guide

css - html


In 2017 it was recorded that around 63% of all U.S web traffic is made up of mobile devices. It is becoming increasingly vital that websites adopt a responsive design to accommodate this rapidly growing portion of the market.

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.

Triggering vibrations from your website

javascript


Most common mobile browsers (excluding safari) allow you to trigger the device's vibration motor from your web application using the Vibration API. The Vibration API is provided to you by the mobile browser itself.

karnamalone@gmail.com