In web design, the parallax effect is a highly effective technique for adding visual appeal. However, it’s also possible to achieve this effect using a lightweight JavaScript library without relying on large ones like jQuery.
In this article, we’ll show you how to create a simple and effective parallax effect using Rellax.js.
What is Rellax.js?
Rellax.js is a lightweight JavaScript library that makes it easy to implement a parallax effect.
The parallax effect refers to a visual technique where backgrounds and elements move at different speeds during scrolling to create a sense of depth.
With Rellax.js, you can implement this effect with simple configuration.
Required CSS
To style the parallax area (.container, .block, .rellax), you’ll need the following CSS.
This example provides basic demo styles, but feel free to customize them as needed.
<style>
body {
font-weight: bold;
font-size: 20px;
text-align: center;
}
h1{
text-align: center;
font-size: 20px;
padding: 20px 0 0 0;
line-height: 1.8em;
}
section{
padding-bottom: 100px;
overflow: hidden;
}
.col {
text-align: left;
width: 50%;
float: left;
box-sizing: border-box;
}
h4{
text-align: center;
margin: 50px 0 30px 0;
}
.container {
outline: 1px solid #eed;
font-size: 20pt;
padding: 37.5vh 12.5vw;
}
.block {
line-height: 2.0em;
text-align: right;
padding: 0 42pt;
position: relative;
}
.block .rellax img{
width: 90%;
}
.rellax {
display: block;
width: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
}
</style>
HTML Structure
Below is the HTML needed to implement the parallax effect using Rellax.js.
Inside the parallax display area (class=”rellax”), we’ve included images (1.jpg, 2.jpg, 3.jpg).
Replace the image paths with your own as needed.
Rellax.js applies the effect by adding the “rellax” class and appropriate data attributes to elements.
You can set options for the parallax display area (class=”rellax”), such as
“Vertical scroll with X-axis movement: data-rellax-vertical-scroll-axis=’x’” or
“Vertical scroll with XY-axis movement: data-rellax-vertical-scroll-axis=’xy’”.
Refer to Vanilla Javascript Parallax Library — Rellax for more details.
<h1>Implementing a simple parallax effect using Rellax.js without jQuery.<br>Scroll down to see it in action.</h1>
<section>
<div class="col">
<h4>Vertical scroll with X-axis movement</h4>
<div class="container">
<div class="block"><div class="rellax" data-rellax-vertical-scroll-axis="x"><img src="1.jpg" alt=""></div></div>
</div>
</div>
<div class="col">
<h4>Vertical scroll with XY-axis movement</h4>
<div class="container">
<div class="block"><div class="rellax" data-rellax-vertical-scroll-axis="xy"><img src="1.jpg" alt=""></div></div>
</div>
</div>
</section>
<section>
<div class="col">
<h4>Vertical scroll with X-axis movement (Option: speedX = 3)</h4>
<div class="container">
<div class="block"><div class="rellax" data-rellax-horizontal-speed="3" data-rellax-vertical-scroll-axis="x"><img src="2.jpg" alt=""></div></div>
</div>
</div>
<div class="col">
<h4>Vertical scroll with XY-axis movement (Option: speedX = 1, speedY = 2)</h4>
<div class="container">
<div class="block"><div class="rellax" data-rellax-horizontal-speed="1" data-rellax-vertical-speed="2" data-rellax-vertical-scroll-axis="xy"><img src="2.jpg" alt=""></div></div>
</div>
</div>
</section>
<section>
<div class="col">
<h4>Vertical scroll with X-axis movement (Option: MaxX 200)</h4>
<div class="container">
<div class="block"><div class="rellax" data-rellax-vertical-scroll-axis="x" data-rellax-max-x="200"><img src="3.jpg" alt=""></div></div>
</div>
</div>
<div class="col">
<h4>Vertical scroll with XY-axis movement (Option: MinX -215 MinY -300)</h4>
<div class="container">
<div class="block"><div class="rellax" data-rellax-speed="2" data-rellax-vertical-scroll-axis="xy" data-rellax-min-x="-215" data-rellax-min-y="-300"><img src="3.jpg" alt=""></div></div>
</div>
</div>
</section>
JavaScript Setup
Finally, load the rellax.js script and initialize the parallax effect with JavaScript using
new Rellax(‘parallax display area’, {options}).
<script src="rellax.js"></script>
<script>
var rellax = new Rellax('.rellax', {
horizontal: true,
});
</script>
Demo Page: Implementing Parallax Easily with Rellax.js (No jQuery)
You can view a demo page using Rellax.js below.
Demo page using Rellax.js without jQuery
Source: Vanilla Javascript Parallax Library — Rellax
Vanilla Javascript Parallax Library — Rellax
Conclusion
Rellax.js is an excellent library for easily implementing lightweight parallax effects.
Using the examples introduced in this article, try incorporating it into your own website.
*Please use it at your own risk.
Do not reuse the Google Analytics tag in the head section of the demo page.
