Set of layered, transparent elements scrolling at different speeds possible in only CSS?

241
July 29, 2017, at 09:22 AM

I have a set of three elements set up roughly like this:

HTML

<div class="background">
  <div class="image">
    <img src="img.png"/>
    <div class="text">
      <span>Text</span>
    </div>
  </div>
</div>

Assume that I have simple CSS to layer them with the background being third, the image being second, and the text being first in terms of distance from viewer, and that they're all centered with respect to the topmost container. The background has a background-image, and all images and div elements are transparent.

What I'm trying to do is to have them scroll at slightly different speeds relative to the viewport. I'm not particularly familiar with CSS transform and perspective properties, but I was wondering whether this is possible in just CSS. Any help?

Answer 1

Sure is! You're describing parallax, done with pure CSS. Here's an example that might help. CSS-tricks also describes this in depth, here

The key is setting transform to reflect the distance from the user.

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px);
}
Rent Charter Buses Company
READ ALSO
Why does my div does not recognize the height of custom components inside itself?

Why does my div does not recognize the height of custom components inside itself?

I have a div that has a handful of custom components in it, and I'm trying to put a border around that container, but the container div's height is not affected by it's contents

210
Angular Cards to be the same height in a flex-layout row

Angular Cards to be the same height in a flex-layout row

I have an angular material based uiI am using @material/flex-layout and material cards, so I have a component layout like:

1052
d3js Opacity Transition Not Working as Expected

d3js Opacity Transition Not Working as Expected

I have a group I want to animate form 0 opacity to 1I've animated it from 1 to 0 fine, but going the other way is strange

324