Skip to content

Instantly share code, notes, and snippets.

@HarryAdney

HarryAdney/Parallax scrolling

Last active February 22, 2020 11:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save HarryAdney/4585a97164f8ac94687363c4780df484 to your computer and use it in GitHub Desktop.
Save HarryAdney/4585a97164f8ac94687363c4780df484 to your computer and use it in GitHub Desktop.
Download ZIP
Parallax scrolling
Raw
Parallax scrolling
***html***
<div class="wrapper">
<div class="box box-back">
<h3>SWEETIES</h3>
</div>
<div class="box box-front">
<img src="https://cdn.pixabay.com/photo/2017/03/30/15/47/churros-2188871_960_720.jpg" />
</div>
</div>
***css***
img {
width: 100%;
}
h3 {
font-size: 60px;
color: white;
}
.box.box-back {
transform: translateZ(0);
z-index: 99;
text-align: center;
}
.box.box-front {
width: 1500px;
transform: translateZ(-1px) scale(2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment