Parallax effect - force text block to behave like background-attachment: fixed

Question

I\'m attempting to create a simple parallax effect where each 100vh section scrolls up to reveal the next section (new background color, background image, and t

Answer 1

I have put up a little snippet, that works. But you need to figure out the exact math behind positioning yourself. And of course take care of the details

$( document ).ready(function() {
    $(document).scroll(function() {
      // get the position of my first slide, so I know where did I move
      var rect = $(".first")[0].getBoundingClientRect();
      
      // get height of viewport
      var screenHeight = $( window ).height();
      
      // setting offset for every .copy element on page, so they share
      // the same offset from top (are on top of each other)
      // Now you just need to figure out exact math here
      $(".copy").offset({ top: screenHeight*1.5-rect.bottom});
    });
});

body {
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 48px;
}

p {
  font-size: 18px;
}

section {
  min-height: 100vh;
  width: 100%;
  text-align: center;
  position: relative;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  
  /* added overflow hidden, so that my boxes don't flow out of the slide */
  overflow: hidden;
}

section.first {
  background: url(https://picsum.photos/1920/500/?image=1057);
}

section.first .content {
  background-color: rgba(74, 180, 220, .85);
}

section.second {
  background: url(https://picsum.photos/1920/500/?image=1067);
}

section.second .content {
  background-color: rgba(103, 198, 180, .85)
}

section.third {
  background: url(https://picsum.photos/1920/500/?image=1033);
}

section.third .content {
  background-color: rgba(5, 123, 188, .85);
}

section.fourth {
  background: url(https://picsum.photos/1920/500?image=1063);
}

section.fourth .content {
  background-color: rgba(187, 216, 100, .85)
}

.content {
  position: relative;
  height: 100vh;
  width: 100%;
  padding: 50px 0;
}

.copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: 'Noto Serif', serif;
  font-weight: 300;
}

.button {
  border: 2px solid #fff;
  border-radius: 3px;
  padding: 15px 25px;
  display: inline-block;
  width: auto;
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: .2s ease all;
}

.button:hover {
  background: #fff;
  color: #333;
  cursor: pointer;
}

  

    

      

        
Header 1 
        
Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
      
    
  
  

    

      

        
Header 2
        
Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
      
    
  
  

    

      

        
Header 3
        
Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
      
    
  
  

    

      

        
Call to action
        Button