parallax

index.js

const body = document.body;
const content = document.querySelector('.js-content');
const blocks = document.querySelectorAll('.block-scroll');

const updateOffset = () => {
    requestAnimationFrame(updateOffset);
    body.style.setProperty('--y', content.scrollTop);
    updateProps();
};

const updateProps = () => {
    let i = -1;
    for(let block of blocks) {
        i += 1;
        let top = blocks[i].getBoundingClientRect().top;
        if(top <= 0) {
            body.style.setProperty(`--yBlock-${i+1}`, top);
        } else {
            body.style.setProperty(`--yBlock-${i+1}`, 0);
        }
    }
};

updateProps();
updateOffset();

index.scss

.block-scroll-avatar {
  z-index: 100;
}

$boxes: 5;
:root {
  --step-1-x: -0.5px;
  --step-2-x: 0.5px;
  --step-3-x: -0.4px;
  --step-4-x: 0.75px;
  --step-5-x: -0.5px;
  --step-y: -0.8px;
}

@for $i from 1 through $boxes {
  .block-scroll-#{$i} .block-scroll-avatar {


    @media (min-width: $desktop-xs) {
      transform: translate(calc(var(--yBlock-#{$i}) * var(--step-#{$i}-x)), calc(var(--yBlock-#{$i}) * var(--step-y)));
      opacity: calc(1 - (var(--yBlock-#{$i}) * -0.0013));
    }
    @media (min-width: $desktop-m) {
      --step-1-x: -0.8px;
      --step-2-x: 0.8px;
      --step-3-x: -0.8px;
      --step-4-x: 0.8px;
      --step-5-x: -0.8px;
      transform: translate(calc(var(--yBlock-#{$i}) * var(--step-#{$i}-x)), calc(var(--yBlock-#{$i}) * var(--step-y)));
    }


  }
}