parallax sample 2

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%;
  width: 100%;
  background-image: url('https://wpdotorg.files.wordpress.com/2008/11/boat.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

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

JavaScript

(function() {
	let scale = 0.4;
  let seed = scale * 100;
  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}`;
  
  window.addEventListener('scroll', (e) => {
    scrollFunc();
  });

  var showState = (arg) => {
    let ary = [];
    ary.push('viewHeight: ' + viewHeight);
    ary.push('vOffset: ' + vOffset);
    ary.push('offsetPosition: ' + offsetPosition);
    ary.push('imageHeight: ' + target.clientHeight);
    ary.push('imageOffset: ' + imageOffset);
    ary.push('seed: ' + seed);
    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)) {
      	let ratio = 100 - (((offsetHeight - (offsetPosition - offsetTop)) / offsetHeight) * 100);
        let moval = (50 - ratio) * (seed / 50);
        let parallax = (target.clientHeight * (moval / 100));
      	ary.push(`viewRatio: ${ratio}`);
      	ary.push(`move: ${moval}px`);
      	ary.push(`parallax: ${parallax}px`);
       ...