Skip to content

Instantly share code, notes, and snippets.

@robert-neacsu

robert-neacsu/index.html

Created December 5, 2018 13:33
Show Gist options
  • Save robert-neacsu/5b9821dae667938253edb7595e3a3cd8 to your computer and use it in GitHub Desktop.
Save robert-neacsu/5b9821dae667938253edb7595e3a3cd8 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/sexiwe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.overflow {
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid black;
width: 400px;
height: 400px;
}
.perspective {
perspective: 1px;
perspective-origin: top left;
}
.preserve {
transform-style: preserve-3d;
}
.parallax {
position: absolute;
top: 200px;
margin-left: 250px;
font-size: 24px;
}
.spacer {
height: 1000px;
}
.sticky {
position: sticky;
position: -webkit-sticky;
}
</style>
</head>
<body>
<p>This is parallax using perspective on the overflow element. The perspective origin is outside of the scroller so it stays in place while you scroll down and the parallax elements move up.</p>
<p>This means to make a parallax element not move it would have to be infinitely far away.</p>
<p>&#x25BC; perspective origin (the scroller element)</p>
<div class="perspective overflow">
<div class="preserve container">
<div class="parallax" style="transform: translateZ(-1.2px)">z = -1.2</div>
<div class="parallax" style="transform: translateZ(-1.0px)">z = -1.0</div>
<div class="parallax" style="transform: translateZ(-0.8px)">z = -0.8</div>
<div class="parallax" style="transform: translateZ(-0.6px)">z = -0.6</div>
<div class="parallax" style="transform: translateZ(-0.4px)">z = -0.4</div>
<div class="parallax" style="transform: translateZ(-0.2px)">z = -0.2</div>
<div class="parallax" style="transform: translateZ(0px)">z = 0</div>
<div class="spacer"></div>
</div>
</div>
<p>This is parallax using position sticky. The perspective origin is inside the scroller so it moves up as you scroll down but the sticky parallax elements are stuck so they try to stay in place.</p>
<p>To make a parallax element move 1:1 with the scrolling content it would have to be infinitely far away.</p>
<p id="marker2" style="position: absolute;">&#x25B2; sticky perspective origin (top of scrolling contents)</p>
<div class="overflow" id="overflow2" style="-webkit-overflow-scrolling: touch;">
<div class="perspective container">
<div class="sticky parallax" style="transform: translateZ(-1.2px)">z = -1.2</div>
<div class="sticky parallax" style="transform: translateZ(-1.0px)">z = -1.0</div>
<div class="sticky parallax" style="transform: translateZ(-0.8px)">z = -0.8</div>
<div class="sticky parallax" style="transform: translateZ(-0.6px)">z = -0.6</div>
<div class="sticky parallax" style="transform: translateZ(-0.4px)">z = -0.4</div>
<div class="sticky parallax" style="transform: translateZ(-0.2px)">z = -0.2</div>
<div class="sticky parallax" style="transform: translateZ(0px)">z = 0</div>
<div class="spacer"></div>
</div>
</div>
<script id="jsbin-javascript">
document.addEventListener('DOMContentLoaded', function() {
overflow2.addEventListener('scroll', function() {
document.getElementById('marker2').style.top = (this.offsetTop - this.scrollTop) + 'px';
});
});
</script>
<script id="jsbin-source-css" type="text/css">.overflow {
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid black;
width: 400px;
height: 400px;
}
.perspective {
perspective: 1px;
perspective-origin: top left;
}
.preserve {
transform-style: preserve-3d;
}
.parallax {
position: absolute;
top: 200px;
margin-left: 250px;
font-size: 24px;
}
.spacer {
height: 1000px;
}
.sticky {
position: sticky;
position: -webkit-sticky;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">document.addEventListener('DOMContentLoaded', function() {
overflow2.addEventListener('scroll', function() {
document.getElementById('marker2').style.top = (this.offsetTop - this.scrollTop) + 'px';
});
});</script></body>
</html>
Raw
jsbin.sexiwe.css
.overflow {
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid black;
width: 400px;
height: 400px;
}
.perspective {
perspective: 1px;
perspective-origin: top left;
}
.preserve {
transform-style: preserve-3d;
}
.parallax {
position: absolute;
top: 200px;
margin-left: 250px;
font-size: 24px;
}
.spacer {
height: 1000px;
}
.sticky {
position: sticky;
position: -webkit-sticky;
}
Raw
jsbin.sexiwe.js
document.addEventListener('DOMContentLoaded', function() {
overflow2.addEventListener('scroll', function() {
document.getElementById('marker2').style.top = (this.offsetTop - this.scrollTop) + 'px';
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment