Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</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>
</body>
</html>
 
.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;
}
 
document.addEventListener('DOMContentLoaded', function() {
  overflow2.addEventListener('scroll', function() {
    document.getElementById('marker2').style.top = (this.offsetTop - this.scrollTop) + 'px';
  });
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
flackrpro
0viewers