CODEWITHSUNDEEP
jquerycssanimationscrollposition
Malika Arora
Malika Arora

Reputation: 101

Start scroll only after animation

I am trying to make an animation where the text moves towards right on scroll but I want to keep the background static until the text moves from initial to final position.

jQuery(document).on('scroll', function(){
jQuery('h1').css("left", Math.max(100 - 0.2*window.scrollY, 1) + "vw");
})
.scrolling-text{
  margin: 0;
  padding: 0;
  height: 100vw;
  overflow-x: hidden;
}
h1{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 100px;
  left: 100vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrolling-text">
  <h1>Moving Text on Scroll</h1>
</div>

Here is the code I referred to but the background moves while the text is moving.

Upvotes: 2

Views: 74

Answers (1)

prettyInPink
prettyInPink

Reputation: 3439

You could try and combine it with position: sticky.

$(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-color: #4158D0;
}
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 class="wrap">
<div class="scrolling-text">
  <h1>Moving Text on Scroll</h1>
</div>
</div>
<div style="height:1000px"></div>

Upvotes: 1

Related Questions