Parallax Effect in CSS: An Outstanding Design Element

The parallax scrolling effect in CSS is a prominent design trend that has been around for some years. It is a technique where the background image moves slower than the foreground elements when a user scrolls the page. This creates a 3D illusion of depth, making the website look more immersive and visually appealing.

The parallax effect can be achieved using CSS, which makes it easy to implement on any website. So now, we will be exploring how to create a simple parallax effect using CSS and HTML.

Setting up a simple HTML markup

For this effect, we will need at least two layers. In this case, we're looking at two groups, one with a base-layer and a mid-layer and one with a mid-layer and a top-layer. These levels are named according to how far away they are from the viewer, with the top layer being the closest and the base layer being the furthest.

For the arrangement described above, the HTML markup is as follows:

<div class="parallax_wrapper">
        <div class="parallax_group" id="group1">
            <div class="parallax_layer base_layer">
                <h1>Base Layer</h1>
            </div>
            <div class="parallax_layer mid_layer">
                <h1>Mid Layer</h1>
            </div>
        </div>
        <div class="parallax_group" id="group2">
            <div class="parallax_layer mid_layer">
                <h1>Mid Layer</h1>
            </div>
            <div class="parallax_layer top_layer">
                <h1>Top Layer</h1>
            </div>
        </div>
    </div>

Now comes the most crucial aspect, CSS. I've broken down the CSS into sections to make it easier to grasp where each component has a distinct purpose.

Adding CSS to get the desired effect

As previously said, I've divided this into four sections. The first one emphasises adding style universally, meaning that these characteristics apply to everything.

CSS for the entire division (or) <div>

*{
  margin: 0;
  padding: 0;
}

.parallax_wrapper{
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
}

Here, we have set the x-axis overflow to hidden to avoid having the widths of the layers alter when we try to place them at different levels along the z-axis.

The perspective attribute is what we should pay the most attention to in this case. The perspective property is used to give a 3D-positioned element some perspective. It defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.

CSS for the Parallax group

.parallax_group{
  position: relative;
  height: 100vh;
  transform-style: preserve-3d;
}

The position property specifies the type of positioning method used for an element. An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

The transform-style property specifies how nested elements are rendered in 3D space. The preserve-3d specifies that child elements will preserve their 3D position.

Note: This property must be used together with the transform property.

CSS for Parallax layer

.parallax_layer{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

The inset property sets the distance between an element and the parent element.

Note: For this property to take effect it has to have the position property specified.

Just centering the text is what the final three attributes do.

Layer specific CSS

#group1 > .base_layer{
  background-color: antiquewhite;
}

#group2 > .mid_layer{
  background-color: aquamarine;
}

.base_layer{
  /*      Scale Calculation: 1+(Z transform value * -1)      */
  transform: translateZ(-10px)scale(2);
}

.top_layer{
  /*      Scale Calculation: 1+(Z transform value * -1)      */
  transform: translateZ(7px)scale(0.3);
}

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

'translateZ' defines a 3D translation, using only the value for the Z-axis. 'scale' defines a 2D scale transformation.

The formula for calculating the scale is:

$$Scale Calculation: 1+(Ztransform value * -1)$$

Conclusion

And with that, we've successfully produced the parallax effect using basic HTML and CSS. The number of groups, levels, and perspectives may now be altered to suit your needs.

---

Code

<div class="parallax_wrapper">
        <div class="parallax_group" id="group1">
            <div class="parallax_layer base_layer">
                <h1>Base Layer</h1>
            </div>
            <div class="parallax_layer mid_layer">
                <h1>Mid Layer</h1>
            </div>
        </div>
        <div class="parallax_group" id="group2">
            <div class="parallax_layer mid_layer">
                <h1>Mid Layer</h1>
            </div>
            <div class="parallax_layer top_layer">
                <h1>Top Layer</h1>
            </div>
        </div>
    </div>

*{
  margin: 0;
  padding: 0;
}

.parallax_wrapper{
  height: 100vh;
  /* overflow-y: auto; */
  overflow-x: hidden;
  perspective: 10px;
}

.parallax_group{
  position: relative;
  height: 100vh;
  transform-style: preserve-3d;
}

.parallax_layer{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#group1 > .base_layer{
  background-color: antiquewhite;
}

#group2 > .mid_layer{
  background-color: aquamarine;
}

.base_layer{
  /*      Scale Calculation: 1+(Z transform value * -1)      */
  transform: translateZ(-10px)scale(2);
}

.top_layer{
  /*      Scale Calculation: 1+(Z transform value * -1)      */
  transform: translateZ(7px)scale(0.3);
}