How to create a parallax on pure Javascript
Tags: html, javascript, css, codepen
Published: 2021-12-07 10:58:24

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-<number> — 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

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. Then` bindMovementsToElement()` 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:
{% codepen https://codepen.io/AntM/pen/YRMoLo %}

**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.