DEV Community

Cover image for How to create a parallax on pure Javascript
Anton
Anton

Posted on • Updated on • Originally published at Medium

How to create a parallax on pure Javascript

Everyone at least once has seen parallax effects on a website. They could’ve been simple. Such as a static background on a specific spot while scrolling. On the other hand, these effects can be extremely complex. However usually visually this effect looks impressive.

Parallax always amazed me. How it’s done in web development. It seemed to me so complex and unachievable. Then after a couple of years of contemplation of beautiful websites using this technique I decided to give it a try.

What is parallax?

The meaning of the word “parallax” refers to a specific technique used in computer graphics. Multiple layers move at different speeds, while the user scrolls a webpage. This number of movements creates an optical illusion. To be honest the technique is not new. It was used in the early 1980’s Super Mario Bros game to create the sensation of depth. Then this graphic trick got a second life in web design.

Tech stack

As already mentioned above here I used vanillaJS (pure JavaScript). Pug templating language was used to accelerate work with HTML. As well as SCSS instead of pure CSS.

What was created and how it works?

It started as an experiment. Though at the end turned into a small library. It requires a small HTML and a few Javascript functions. We have specific classes. Each .prlx-item-inner can have an animation. Also, each one can have multiple animations. So you can combine for instance zoom with spinning.

This code can be used on any HTML website. Javascript (function () {} ) wrapping will prevent conflicting with any other library.

Reusable classes list

  • Directional movements classes: let, right,top,bottom

  • speed- — Can have any number. Ex.: speed-3

  • spin — spinning object

  • zoom — zooms out

To structure

The basic elements needed for this are the container and the number of inside elements which gonna is moving on scroll.

Here is the HTML code:

#prlx-container
  .text-top
    p Scroll down to see the parallax effect
  .row
    .prlx-item
      .prlx-item-inner.left.speed-3
    .prlx-item
      .prlx-item-inner.top.speed-2.spin
    .prlx-item
      .prlx-item-inner.right
    .prlx-item
      .prlx-item-inner.left.speed-5
    .prlx-item
      .prlx-item-inner.zoom.speed-2
    .prlx-item
      .prlx-item-inner.right.speed-5
    .prlx-item
      .prlx-item-inner.left
    .prlx-item
      .prlx-item-inner.bottom
    .prlx-item
      .prlx-item-inner.right.spin
  .side-dots
Enter fullscreen mode Exit fullscreen mode

In this example I set .row element as position:fixed;. So it’s always will be visible.

.prlx-item-inner has to be position:absolute; this way we can control it with x,y (top, left) coordinates. It’s parent .prlx-item is position: relative;. That way it’s children will move relatively to the parent instead moving relatively the whole viewport.

Javascript

There are three functions responsible for movements. zoom(), spin(), move() respectively.

checkMovement() check which direction, speed and animation type is set to an element. ThenbindMovementsToElement() binds specific animations to an html element.

At the end of the file we have window.addEventListener(‘scroll’, ()=>{}) event which triggered each time scrolling happens and activates animations on html elements.

That’s it. Nothing more. The code is simple and quick.

Here is the code itself:

Conclusion

It started as an experiment. Though at the end turned into a small library. Maybe one day I will publish it on github. At the moment anyone can try it on codepen and use on his own website.

Discussion (11)

Collapse
lukeshiru profile image
LUKESHIRU

I'm pretty sure you can improve this by using CSS custom properties instead of setting the style properties directly. Generally for this kind of things is better to use JS to "augment" CSS, not to take full control of it. You could just have something like --scroll-position and then every element would just do some calc() with that value. I can try to create an example if you want :)

Collapse
antmik profile image
Anton Author

Why not. I will be glad to see an improved code.
You'll become the first official contributor to this small opensource

Collapse
lukeshiru profile image
LUKESHIRU

Here it is, moved all the calculations to CSS, where the browser can optimize them further, and the only thing JS does is set the --prlx-scroll value depending on the scroll, everything else is handled by CSS:

Cheers!

Thread Thread
antmik profile image
Anton Author

Looks awesome! Thank you.

I'm not a big fan of inline styles. Though in this case it seems the most optimal.

Thread Thread
lukeshiru profile image
LUKESHIRU • Edited on

I don't like inline styles either, and you could do something like having...

.prlx-speed-2 {
  --prlx-speed: 2;
}
.prlx-speed-5 {
  --prlx-speed: 5;
}
Enter fullscreen mode Exit fullscreen mode

... and so on. But when you have a value that you can "configure" for your css such as in this case "speed", is not bad to inline the value you want. If you take a look at my website I used tailwind, but for the initial rotation of every element I have an inline --tw-rotate value, that is used from CSS. That needs to be inline because similar to "speed" it can be any value (it changes depending on the amount of links I put around the avatar in the middle). I also used inline styles for the x and y position of the cursor, and the movement of the avatar in the middle that follows your cursor around is all made from CSS :D

Thread Thread
antmik profile image
Anton Author

Yes, right thing. In this inline styles do the job.

Checked your website from mobile. Looks minimalistic and nice.

Looked on your steam account. Rare collection of achievements :) Did you try gamify web apps interfaces?

Collapse
amircahyadi profile image
Amir-cahyadi

Cool 👍

Collapse
henrique_marques profile image
Henrique Marques

It’s amazing! Thanks a lot

Collapse
antmik profile image
Anton Author

Thank you for reading

Collapse
salehmubashar profile image
Saleh Mubashar

Amazing. Is it possible with plain HTML, CSS and JS or Jquery?

Collapse
antmik profile image
Anton Author

Thanks.
It's JS, HTML,CSS. No need it Jquery