Background Parallax Implementation Guide on Scroll: How to Use jarallax.js｜DAD UNION

Parallax scrolling is a popular web design trend. In this article, we’ll show you how to easily implement a parallax effect on your page background using jarallax.js. We’ll also cover how to set a YouTube video as the background. A demo page is available, so be sure to check it out.

Contents

Prepare the CSS
Set Up the HTML Structure
Implement Parallax with JavaScript
Parallax Demo Page Using jarallax.js
Source: Jarallax – The parallax scrolling effect for JavaScript
Benefits of Using Jarallax.js

Prepare the CSS

First, style the area where the parallax effect will be applied. Below is the basic CSS for the area with the .jarallax class. You can customize this CSS to fit your design.

<style>
*,
:after,
:before {
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 20px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.8em;
  padding: 15px 0;
}
.section {
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jarallax {
  height: 80vh;
}
</style>
<link href="jarallax.css" rel="stylesheet" />

Set Up the HTML Structure

Next, set up the area where the parallax effect will be applied (class="jarallax") in your HTML. In this example, the parallax effect is applied to both an image and a YouTube video.

<div class="section"><h1>This is a parallax page using jarallax.js.<br>Scroll down to see the effect.</h1></div>

<div class="jarallax">
    <img class="jarallax-img" src="i1.jpg" alt="" />
</div>

<div class="jarallax" data-video-src="https://youtu.be/P7Od94ikeoI"></div>

<div class="section"></div>

Implement Parallax with JavaScript

Finally, use jarallax.js to dynamically apply the parallax effect. After loading the required script files, apply the parallax effect to the elements with the .jarallax class. Load jarallax.min.js and jarallax-video.min.js, then write jarallax(document.querySelectorAll("your parallax area")).

<script src="jarallax.min.js"></script>
<script src="jarallax-video.min.js"></script>

<script type="text/javascript">
    jarallax(document.querySelectorAll(".jarallax"));
</script>

Parallax Demo Page Using jarallax.js

Check out the page below to see what kind of effects you can achieve.

Parallax Demo Page Using jarallax.js

Source: Jarallax – The parallax scrolling effect for JavaScript

Jarallax – The parallax scrolling effect for JavaScript

Benefits of Using Jarallax.js

Easy Implementation:
Jarallax.js simplifies the JavaScript code needed to implement parallax effects. Even beginners can easily add parallax scrolling to their web pages.
High Compatibility:
Jarallax.js works across many browsers, ensuring a consistent parallax experience for a wide range of users.
YouTube Video Support:
This library allows you to easily set YouTube videos as background elements with a parallax effect, enabling visually engaging designs with motion backgrounds.
Customizability:
With a variety of options and settings, Jarallax.js can be customized to match your specific design and motion needs.
Lightweight:
The library is lightweight, allowing you to add parallax effects without significantly slowing down page loading times.
Active Community:
Jarallax.js is open source and used by many developers, so you can get community support if you encounter issues or want to suggest improvements.