parallax sample

by rough cheap

HTML

<div id="status">
</div>
<div class="box">
  <div id="box1" class="item jparallax">
  </div>
</div>

CSS

.box {
  width: 300px;
  height: 300px;
  border: 1px solid grey;
  margin: 800px 0;
  overflow: hidden;
}

.item {
  height: 100%;
  background-image: url('https://wpdotorg.files.wordpress.com/2008/11/boat.jpg');
  background-size: cover;
  background-position: 50% 50%;
}

#status {
  position: fixed;
  top: 0;
  right: 0;
}

JavaScript

(function() {
	let scale = 0.4;
  let transScale = 1 + scale;
  let requestAnimationFrame =
    window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  let state = document.querySelector('#status');
  let target = document.getElementById('box1')
  let viewHeight = document.documentElement.clientHeight;
  let vOffset = target.clientHeight * 0.5;
  let imageOffset = target.clientHeight * scale;
  let offsetPosition = target.offsetTop + vOffset;
  let offsetHeight = viewHeight + target.clientHeight;
  state.innerHTML = `box height: ${target.clientHeight}`;
  target.style.transform = `scale(${transScale})`;
  window.addEventListener('scroll', (e) => {
    scrollFunc();
  });

  var showState = (arg) => {
    let ary = [];
    ary.push('viewHeight: ' + viewHeight);
    ary.push('vOffset: ' + vOffset);
    ary.push('offsetPosition: ' + offsetPosition);l
    ary.push('imageHeight: ' + target.clientHeight);
    ary.push('imageOffset: ' + imageOffset);
    if (arg) ary.push(arg);
    state.innerHTML = ary.join('<br>');
  };

  function scrollFunc() {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    let scrollBottom = scrollTop + viewHeight;
    let offsetTop = scrollTop - vOffset;
    let offsetBottom = scrollBottom + vOffset;
    let ary = [];
    ary.push('scrollTop: ' + scrollTop);
    ary.push('scrollBottom: ' + scrollBottom);
    ary.push('offsetHeight: ' + offsetHeight);
    requestAnimationFrame((timestamp) => {
      if ((offsetBottom  > offsetPosition) && (offsetPosition  > offsetTop)) {
      	ary.push(`viewRatio: ${offsetPosition - offsetTop}`);
      	ary.push(`viewRatio: ${offsetHeight - (offsetPosition - offsetTop)}`);
      	ary.push(`viewRatio: ${(offsetHeight - (offsetPosition - offsetTop)) / offsetHeight}`);
      	ary.push(`move: ${imageOffset * (offsetHeight - (offsetPosition - offsetTop)) / offsetHeight}px`);
        let moval =...