Parallax

window.onscroll = () => {

  let wScroll = window.scrollY;

  // Movement Parallax
  document.querySelector('.logo').style.cssText = `transform: translate(0px, ${wScroll/2}%)`;
  document.querySelector('.back-bird').style.cssText = `transform: translate(0px, ${wScroll/4}%)`;
  document.querySelector('.fore-bird').style.cssText = `transform: translate(0px, -${wScroll/40}%)`;
  
  // Playing with opacity
  // basically:
  //  - we have wScroll
  //  - devide it to the height of parallaxed area
  //  - it will give you a negative float number of percentage of parallaxed area coresponded to the scroll num
  //  - then get its absolute value => it will gives you the opacity fade out 
  document.querySelector('.logo').style.opacity = Math.abs((wScroll / 600) - 1);


  // Bg Parallax
  document.querySelector('.bird-box').style.cssText = `background-position: center -${wScroll * 0.5}px`;


  // Text Box Parallaxing
  // - that 100 is the initial padding that is setted in css
  // - b/c this function is setted to run on scrollin
  // - it means even first scrolling
  // - and as we set the padding of text-box on scroll
  // - if the that 100 wouldnt been there , it will jump to top
  // document.querySelector('.text-box').style.cssText = `padding: ${100+(wScroll / 2)}px 0 100px 0`;



  // Grid Landing Element
  // - getting the offset top of target element
  // - then this part => gridOffsetTop - window.innerHeight / 2
  // - just convert it to simple gridOffsetTop to see what it means...
  let gridOffsetTop = document.querySelector('.grid').offsetTop;
  if(wScroll > gridOffsetTop - window.innerHeight / 2) {
    
    document.querySelectorAll('.img').forEach( (item , i) => {
      
      // All at once
      // item.classList.add('active');

      // One by one
      setTimeout(() => {
        item.classList.add('active')
      }, 300 * (i+1));
    })
  }
}

this is for creating simple cool parallax effect with pure js