.hero
  picture.hero-item.parallax
    source(srcset='https://res.cloudinary.com/dshzwn3ee/image/upload/w_1500/v1550325903/compress-2.webp' media='(max-width: 420px)' type='image/webp')
    source(srcset='https://res.cloudinary.com/dshzwn3ee/image/upload/v1550325903/compress-2.webp' type='image/webp')
    img(src='https://i.ibb.co/VvfFv2T/compress-2.png' alt='')
    
  .hero-item.parallax.title Freedom.
  
  picture.hero-item.parallax
    source(srcset='https://res.cloudinary.com/dshzwn3ee/image/upload/w_1500/v1550325902/compress-2-21.webp' media='(max-width: 420px)' type='image/webp')
    source(srcset='https://res.cloudinary.com/dshzwn3ee/image/upload/v1550325902/compress-2-21.webp' type='image/webp')
    img(src='https://i.ibb.co/g4tr14L/compress-2-21.png' alt='')
  
  picture.hero-item
    source(srcset='https://res.cloudinary.com/dshzwn3ee/image/upload/w_1500/v1550325903/compress-2-2.webp' media='(max-width: 420px)' type='image/webp')
    source(srcset='https://res.cloudinary.com/dshzwn3ee/image/upload/v1550325903/compress-2-2.webp' type='image/webp')
    img(src='https://i.ibb.co/vxP9dYN/compress-2-2.png' alt='')


.blog-text
  span Some text here
  span Some text here
  span Some text here
  span Some text here
  span Some text here

$height = 900px

*
  box-sizing: border-box
  
body
  width: 100vw
  height: 150vh
  font-family: 'Montserrat', sans-serif
  font-size: 14px
  background-color: black
  overscroll-behavior-y: none
  
.hero
  width: 100vw
  height: $height
  --y: 0px
    
  @media (min-width: 1500px)
    height: 50vw
  
  img
    width: 100%
    height: $height
    object-fit: cover
    object-position: top
    
    @media (min-width: 1500px)
      height: 50vw

  .title
    left: 50%
    transform: translate(-50%, 220px)
    font-size: calc(35px + 5vw)
    font-weight: bold
    letter-spacing: 5px
    color: white
    text-shadow: 0px 0px 10px black
  
  .hero-item
    position: absolute
    
    &:nth-child(1)
      will-change: transform
      transform: translateY(calc(var(--y) * -0.3))
      z-index: 1
    &:nth-child(2)
      z-index: 2
    &:nth-child(3)
      will-change: transform
      transform: translateY(calc(var(--y) * -0.6))
      z-index: 3
    &:nth-child(4)
      z-index: 4  
  
  .parallax
    position: fixed
      
    
// -----------------------------------


.blog-text
  position: relative
  display: flex
  flex-direction: column
  justify-content: space-between
  align-items: center
  width: 100%
  height: 200vh
  padding: 50px
  font-size: 50px
  color: white
  background-color: black
  box-shadow: 0px -30px 170px 80px black
  z-index: 4

const scrollOptions = { capture: false, passive: true }

function onScroll(event) {
  document.querySelector('.hero').style.setProperty('--y', `${window.scrollY}px`)
}

if ('IntersectionObserver' in window) {
    
  const referenceImage = document.querySelector('.hero-item:last-child')

  const observer = new IntersectionObserver(entries => {
    let [{ isIntersecting }] = entries

    if (isIntersecting) {
      window.addEventListener('scroll', onScroll, scrollOptions)
    } else {
      window.removeEventListener('scroll', onScroll, scrollOptions)    
    }
  })

  observer.observe(referenceImage)

} else {
  window.addEventListener('scroll', onScroll, scrollOptions)
}