Skip to content

Instantly share code, notes, and snippets.

/index.html

Created July 25, 2017 03:43
Show Gist options
  • Save anonymous/8f22a7a1729965937917e77be5f8e0d8 to your computer and use it in GitHub Desktop.
Save anonymous/8f22a7a1729965937917e77be5f8e0d8 to your computer and use it in GitHub Desktop.
Download ZIP
ZJEgNg
Raw
index.html
<html>
<body>
<div class="parallax-outer">
<div class="parallax">
<div class="parallax-inner">
<img src="http://via.placeholder.com/350x150/ff0" alt="">
<img src="http://via.placeholder.com/350x20/fff" alt="">
</div>
<div class="parallax-inner">
<img src="http://via.placeholder.com/350x150/ff0" alt="">
<img src="http://via.placeholder.com/350x20/fff" alt="">
</div>
<div class="parallax-inner">
<img src="http://via.placeholder.com/350x150/ff0" alt="">
<img src="http://via.placeholder.com/350x20/fff" alt="">
</div>
</div>
</div>
</body>
</html>
Raw
style.css
body{
background: #ccc;
overflow: hidden;
}
.parallax-outer{
perspective: 100px;
height: 100vh;
width: 100vw;
background-color: rgba(255,0,255,.2);
overflow: scroll;
scroll-behavior: smooth;
}
.parallax{
perspective: 100px;
height: 100vh;
width: 150vw;
padding: 20em;
transform-style: preserve-3d;
position: realtive;
}
img{
transform: translateZ(10px)
}
img:nth-child(2){
transform: translateZ(-2px)
}
img:nth-child(3){
transform: translateZ(5px)
}
.parallax-inner{
position: absolute;
width: 350px;
}
.parallax-inner:nth-child(2){
top: 350px;
left: 700px;
}
.parallax-inner img{
transform: scale(.9) translateZ(-10px);
}
.parallax-inner img:nth-child(2){
transform: scale(.9) translateZ(8px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment