Fade in fade out images with scroll then scroll page content

Question

When my page loads there is an image that will appear. What I want to do is on scroll, fade out that image and fade in another image. While this animation is happening, I don't want the images to be scrolled up. It's only when the second image has faded in completely that I want to be able to scroll to the content that follows on the page.

I used this answer to come up with part of a solution.

html

js

let locked         = false,
    mainImage      = document.getElementById('mainImg'),
    brandStatement = document.getElementById('brandStatement');

window.addEventListener('scroll', function() {
    if (!locked) {
        window.requestAnimationFrame(function() {

            brandStatement.style.opacity = Math.min(window.scrollY / window.innerHeight, 1);
            
            if (brandStatement.style.opacity === '1') {
                    // scroll to next content
            }

            locked = false;
        });
    }
    locked = true;
});

css

#container {
    height: 200vh;
    width: 100%;
}

#mainImg {
    text-align: center;
    width: 100%;
    height: 100%;
    position: fixed;
}

#brandStatement {
    text-align: center;
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: 0;
}

user_14895985 · Answer

I didn't see a possible solution to the problem by improving your code. This is a personal approach.

What I'm doing here, is changing the opacity of the element one inside the cover container as the user scrolls down the page, revealing the image below. After the opacity changes have been done, the script will change the filling container display style property from none to block. This element is just meant to fill the upper side of the cover container to prevent it from moving up when the position style property is changed from fixed to null.

And the reversed logic applies when scrolling back up.

const one = document.getElementById('one')
const cover = document.getElementById('cover')
const filling = document.getElementById('filling')

window.addEventListener('scroll', () => {
  let scrollY = window.scrollY
  let bottomHeight = window.innerHeight
  
  if(scrollY / bottomHeight <= 1){
    one.style.opacity = 1 - ( scrollY / bottomHeight )
    cover.style.position = 'fixed'
    filling.style.display = 'none'
  }
  else{
    cover.style.position = null
    filling.style.display = 'block'
  }
})

*{padding:0;margin:0;border-size: border-box}

body{
  height: 3500px;
}
img {
  width: 100%;
  height: 100vh;
}
#filling{
  height:100vh;
  width:100%
}
#cover{
  height:100vh;
  width:100%;
}
#cover > div{
  height:100vh;
  width:100%;
  position:absolute;
}
#one{
  z-index:2;
}
#two{
  z-index:1;
}

Fade in fade out images with scroll then scroll page content

1 Answers