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?
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);
}
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
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
I have an angular material based uiI am using @material/flex-layout and material cards, so I have a component layout like:
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