JavaScript

Parallax Implementation with simpleParallax.js! A Step-by-Step Guide for Beginners

 

Parallax refers to the effect where the background and foreground scroll at different speeds, creating a sense of depth and dimensional movement. It is especially popular in web design, as the motion attracts visitors’ attention.

simpleParallax.js is a JavaScript library that makes it easy to implement this parallax effect. In this article, we’ll go step-by-step through how to implement and display a simple parallax using simpleParallax.js.

Contents
  1. Preparing the CSS
  2. Preparing the HTML
  3. Writing JavaScript with simpleParallax.js
  4. Demo Page: Implementing Simple Parallax with simpleParallax.js
  5. Source: simplePARALLAX.js
  6. Conclusion

Preparing the CSS

First, set the height of the body tag to make the page scrollable. In this example, we set height: 1500px, but feel free to adjust it based on your content.

<style>
body {
  padding: 0;
  height: 1500px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.8em;
  padding: 15px 0 50px 0;
}
</style>

Preparing the HTML

Next, prepare the images for the parallax effect. In this example, we use three images: “1.jpg”, “2.jpg”, and “3.jpg”.

<h1>Displaying a simple parallax using simpleParallax.js.<br>Try scrolling down.</h1>

<img class="thumbnail1" src="1.jpg" alt="" width="40%">
<br>
<br>
<br>
<br>
<br>
<img class="thumbnail2" src="2.jpg" alt="" width="40%">
<br>
<br>
<br>
<br>
<br>
<img class="thumbnail3" src="3.jpg" alt="" width="40%">

Writing JavaScript with simpleParallax.js

Load the simpleParallax.js file. After loading, apply the parallax effect to each image. You can specify options such as orientation, scale, delay, and transition.

<script src="simpleParallax.js"></script>

<script>
var image1 = document.getElementsByClassName('thumbnail1');
new simpleParallax(image1, {
  orientation: 'right'
});

var image2 = document.getElementsByClassName('thumbnail2');
new simpleParallax(image2, {
  scale: 1.8
});

var image3 = document.getElementsByClassName('thumbnail3');
new simpleParallax(image3, {
  delay: .6,
  transition: 'cubic-bezier(0,0,0,1)'
});
</script>

Demo Page: Implementing Simple Parallax with simpleParallax.js

You can view the demo page below to see the actual effect in action.

Demo Page: Implementing Simple Parallax with simpleParallax.js

Source: simplePARALLAX.js

For detailed documentation and a full list of available options, please refer to the official site below.

simplePARALLAX.js

Conclusion

Adding motion to your website can greatly enhance user engagement. With simpleParallax.js, you can easily implement the parallax effect — give it a try!

*If you reuse this code, please do so at your own risk.
Do not copy the Google Analytics tag from the demo page’s head section.

simpleParallax.js
RELATED POST