How to develop simple parallax in your website

Parth Jasani
Feb 5 ยท 2 min read
parallax image

First question rise in our mind is what is parallax? ๐Ÿ˜

So Parallax scrolling is a technique in computer graphics where background images move past the camera more slowly than foreground images, creating an illusion of depth in a 2D scene and adding to the sense of immersion in the virtual experience. Or you can understand via just see the banner ๐Ÿ˜ƒ

Whats is the benefits to add parallax in website ๐Ÿ˜ˆ

  • Make your website interactive
  • Make your visitors curious
  • Let your visitors have some fun
  • Surprise your visitors
  • Make your website special
  • Make your background fun

So letโ€™s add PARALLAX on our website ๐Ÿ˜ฎ

This is my first post on medium so I apologize for my writing method ๐Ÿ™

What do we need to add for Parallax functionality? Simple we need a jQuery and banner image which should be greater than section height because when we add parallax image will move up and down

So first of all, we need to add a banner section with the background image (I use background image because we will move the image with background-position ๐Ÿ˜œ) and include jQuery.

  1. Import jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. Add a background image to the section

.parallax-box {
height: 100vh;
width: 100%;
background: url("./img/parallax-image.jpg");
background-position-x: center;
}

3. Add section to HTML

<section class="parallax-box"> </section>

4. Now add parallax functionality on scroll using jQuery.

$(window).scroll(function () { // PARALLAX will play on scroll
let scroll = $(this).scrollTop(); // get current scroll position
let position = scroll /3
$(".parallax-box").css({
'background-position-y': `${position}px`
})
});

Iโ€™ve created a CodePen you can play around with to see the concepts above in action:

Now you can see in jQuery code fist we add $(window).scroll(function(){}) because Parallax will play on window scroll ๐Ÿ˜ƒ.
And then we get scroll position using $(this).scrollTop() and divided by 3.

And then we got the final value after that we just aa that value on background-position-y using jQuery So Parallax will move vertically ๐Ÿ‘

And our PARALLAX is ready ๐Ÿ’ช Now you can play with the codepen and make different speed or direction Parallax.

Thanks for reading ๐Ÿ˜ƒ

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and weโ€™ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium โ€” and support writers while youโ€™re at it. Just $5/month. Upgrade