CODEWITHSUNDEEP
javascripthtmljquerycssscroll
Malika Arora
Malika Arora

Reputation: 101

Starting scroll animation which it reaches the section

In the below code, the animation of moving text gets over by the time you reach the "wrap" section. I wish to start the animation and calculate scrollY only when the wrap section starts. If the first div is removed, the animation works fine due to the above stated reason.

$(document).on('scroll', function(){
$('h1').css("left", Math.max(100 - 0.2*window.scrollY, 1) + "vw");
});
$('.wrap').css('height',$('h1').outerWidth()*2)
.scrolling-text{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: sticky;
  background: red;
  top: 50%;
  transform: translateY(-50%);
  height: 100vh;
  background: url(https://cdn.pixabay.com/photo/2020/07/06/01/33/sky-5375005_1280.jpg) center/cover;
}
h1{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 50px;
  left: 100vw;
  color: #fff;
}

.wrap {
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:1000px"></div>    
<div class="wrap">
<div class="scrolling-text">
  <h1>Moving Text on Scroll</h1>
</div>
</div>
<div style="height:1000px"></div>

Edit: Trying the given solution

 const sectionToAnimate= document.querySelector('.wrap');
 const observer = new IntersectionObserver(entry => {
        if (entry.intersectionRatio > 0) {
          console.log('in the view');
          $('h1').css("left", Math.max(100 - 0.2*window.scrollY, 1) + "vw");// your animation code
          observer.unobserve(entry.target); // to trigger animation only once
        } else {
          console.log('out of view');
        }
    });
    
    observer.observe(sectionToAnimate);
.scrolling-text{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: sticky;
  background: red;
  top: 50%;
  transform: translateY(-50%);
  height: 100vh;
  background: url(https://cdn.pixabay.com/photo/2020/07/06/01/33/sky-5375005_1280.jpg) center/cover;
}
h1{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 50px;
  left: 100vw;
  color: #fff;
}

.wrap {
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:1000px"></div>    
<div class="wrap">
<div class="scrolling-text">
  <h1>Moving Text on Scroll</h1>
</div>
</div>
<div style="height:1000px"></div>

Upvotes: 0

Views: 793

Answers (1)

Ali Klein
Ali Klein

Reputation: 1908

You could take into account the offset().top of .wrap and do something like:

$(document).on("scroll", function () {
  const topOffset = $(".wrap").offset().top;
  const scrollTop = window.scrollY;
  const rightValue = Math.max(100 - 0.2 * (topOffset - scrollTop), 1);

  if (rightValue < 100) {
    $("h1").css("right", rightValue + "vw");
  }
});
.scrolling-text {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: sticky;
  background: red;
  top: 50%;
  transform: translateY(-50%);
  height: 100vh;
  background: url(https://cdn.pixabay.com/photo/2020/07/06/01/33/sky-5375005_1280.jpg)
    center/cover;
}
h1 {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 50px;
  right: 0;
  color: #fff;
}

.wrap {
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:1000px"></div>
<div class="wrap">
  <div class="scrolling-text">
    <h1>Moving Text on Scroll</h1>
  </div>
</div>
<div style="height:1000px"></div>

Upvotes: 3

Related Questions