parallax origin

by rough cheap

HTML

<div class="state">Status</div>
<div class="box" data-parallax-id="1" data-parallax-name="shiro">
  <div class="item">
    Box1
  </div>
</div>

<div class="box" data-parallax-id="2" data-parallax-name="nakahori">
  <div class="item">
    Box1
  </div>
</div>

CSS

.box {
  margin: 800px 0;
  width: 300px;
  height: 300px;
  background-color: cyan;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item {
  font-size: 1.8rem;
  font-weight: bold;
}

.state {
  position: fixed;
  top: 0;
  right: 0;
}

JavaScript

(function() {
  var requestAnimationFrame =
    window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  var state = document.querySelector('.state');
  var boxes = document.getElementsByClassName('box');
  let clientHeight = document.documentElement.clientHeight;
  let ticking = false;

  if (boxes) {
    window.addEventListener('scroll', function(e) {
      Array.from(boxes).forEach((target) => {
        if (!ticking) {
          let attr = {
            id: target.getAttribute('data-parallax-id'),
            name: target.getAttribute('data-parallax-name')
          };
          requestAnimationFrame(function() {
            console.log(attr.id);
            console.log(attr.name);
            ticking = false;
          });
        }
        ticking = true;

      });
    });
  }
})();