2021-06-01
Parallax scroll images with pure CSS
It's not hard to create a parallax scroll image with CSS. Just add background-attachment: fixed;
to it.
Scroll down to see the effect.
HTML
<div class="wrap">
<div class="image"></div>
<p>
Pudding ice cream tart danish chocolate cake liquorice powder bonbon tiramisu. Bonbon dragée jujubes caramels dragée cake donut donut. Topping bonbon sweet tiramisu jelly-o brownie. Gummies topping tootsie roll sesame snaps dragée cupcake fruitcake dragée pastry.</p>
<div class="image"></div>
<p>
Dragée cake jelly beans cake pie tootsie roll cake oat cake candy canes. Gingerbread pastry apple pie cookie chocolate cake. Marzipan brownie ice cream topping.</p>
</div>
CSS
.image {
background-image: url("http://csspoo.com/images/v.jpg");
height: 100px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.wrap {
height: 200px;
width: 200px;
overflow-y: auto;
}
p {
margin: 1rem 0;
}
Comments