When it comes to CSS, writing custom styles for an entire site can seem daunting. Early in my career, frameworks removed a lot of stress and pain, but the also added serious limitations at times. Learning CSS well has been a huge asset to me as a developer. Though I don’t always do a lot off css writing, being versed in it has been valuable. Things like parallax, grid, and flex-box escaped me for a long time. Those are the things I mainly used frameworks for. That is, until I decided to spend a few hours playing with each of these things. I have been in a position Many times where I had to create animations for my designers, and there weren’t always libraries to do what they want. This left me to create my own. Also, in production, performance has to be a consideration.

What’s the Problem with Libraries?

CSS libraries can add a lot of unnecessary bloat to a project. You may say, it’s just strings, not code that requires runtime. As a developer friend once told me, these aren’t necessarily just CSS libraries, but component libraries. Importing thousands and thousands of lines of strings, even if it’s minified, to each page should be carefully considered unless you really need it.

JS libraries can add even more bloat. On top of the cost of downloading the JS to the client. Often times this document must or should be required to finish loading the page. The experience of JS enabled parallax is often stuttering and jittery. They work by measuring the position of the scroll and various other animation positions, and changing other object’s positions accordingly to generate the desired effect. In order to not eat up your system’s entire pool of resources, the animations and measurements will usually be rate-limited these measurements. Just enough to be acceptable from a visual and performance perspective. The difference between the two will be immediately noticeable by the user. Since CSS only uses minimal resources, there are no complicated calculations to make. There are no distances to calculate. This means the CSS only solution will be much smoother.

What is Parallax

Parallax is the effect whereby the position or direction of an object appears to differ when viewed from different positions. So a change in perspective causes the objects position to appear different. Objects further away from us appear to change position more slowly than objects nearby. We can leverage this effect and recreate the effect to spice up static website pages. It can be subtle, or it can be dramatic. But it adds a little something to the page that the user may not even be able to put their finger on.

The CSS-Only Parallax Solution

With CSS based parallax, we use the z-axis to create perspective. This generates a true parallax experience. It also makes for smooth, and performant animations. There is no need for a heavy JS or heaps of CSS to make it work. Check out this simple example:

See the Pen Parallax CSS-Only by Jonathan Tiritilli (@jontiritilli) on CodePen.0

Explanation of CSS Parallax

Let’s walk through exactly what is going on, and explain how this works. It’s actually much simpler than it seems, but it requires quite a bit of tweaking to get the effect you want.

html,
body {
  margin:0;
  padding:0;
// The Base
  .parallax {
    height: 140vh;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 1px;
// The Backgrounds
    .object {
      display: flex;
      z-index: 1;
      position: relative;
      justify-content: center;
      align-items: center;
      height: 200vh;
      width: 100vw;
      color: white;
// The Magic Part
      .text {
        display: flex;
        z-index: -2;
        position: relative;
        justify-content: center;
        align-items: center;
        transform-style: preserve-3d;
        transform: translateZ(-1px) scale(2);
        font-size: 26px;
        font-family: 'ariel',sans-serif;
        font-weight: bold;
        border-radius: 4px;
      }
    }
// here we are alternating the color of the background
    .object:nth-child(odd) {
      background: black;
      z-index: 0;
    }
// here we are alternating the color of the text
    .object:nth-child(even) .text {
      color: black;
      z-index: 1;
    }
  }
}

The Base

The parallax container provides our base perspective. From this, we will determine everything else’s relative distance from us, and therefore, it’s speed (and size, which we will have to account for)

The Backgrounds

I chose to use something straightforward for the backgrounds. I think alternating black and white makes a nice high contrast theme.

The Magic

The element with a class of .text is where the magic is happening. We have set it to appear further away while scaling it to seem normally sized. This means the element will move more slowly than the elements That are closer to us.

Conclusion

There are some very complex examples of this effect on the internet. They really grab your attention too. Although, the basic concept stays the same.

If you have an awesome example of parallax you’ve created, I’d love to see it. Please share your code pens here.

Last modified: September 10, 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.