仅在滚动时移动文本 - 框架？

Question

大家好！

是否有框架或其他可以轻松移动文本（向左或向右）的东西何时用户滚动（例如靠近页脚）？所以纯滚动动画。

提前致谢！

我试过 Scrollmagic，但我无法处理它。 :/

Answer 1

你可以试试gsap , however if you want to make it without a framework using scroll event你可以试试:

const first = document.getElementById("first")
const second = document.getElementById("second")
const third = document.getElementById("third")
const container = document.getElementById("container")
const rect = container.getBoundingClientRect()

const animate = (element,position) => {
     element.style.transform = `translateX(${position}px)`
} 

       

document.addEventListener('scroll', function(e) {
  lastKnownScrollPosition = window.scrollY;
    
   window.requestAnimationFrame(function() {
     
      animate(first,lastKnownScrollPosition*.2)
      animate(second,lastKnownScrollPosition*-.2)
      animate(third,lastKnownScrollPosition*.2)
      
    });
});

body{
  height: 200vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#container{
  max-width: 100vw;
  overflow: hidden;
}

h1{
  transition: transform 0.2s linear;
}

<body>
<div id="container">
  <h1 id="first">
   this is a text this is a text this is a text
  </h1>
  <h1 id="second">
    this is a text this is a text this is a text
  </h1>
  <h1 id="third">
    this is a text this is a text this is a text
  </h1>
</div>
</body>

Answer 2

这是一个使用 jquery 演示想法的简单示例。像@Chakib 之前说的gasp 是一个很好的解决方案。

function isVisible(el, plus, wrapper = window ){
  var winFromTop = jQuery(wrapper).scrollTop();
  var currentPosition = winFromTop + jQuery(wrapper).height();
  
  var el = jQuery(`${el}`);
  var elFromTop = el.length ? jQuery(el[0]).offset().top :       jQuery(el).offset().top;
  
  return (currentPosition + plus) > elFromTop
}

jQuery(window).scroll(function(e) {
  var idElement = '.anime';
  const visible = isVisible(idElement, -20)
  if(visible){
    console.log('=> ', idElement)
    jQuery(idElement).addClass('resetX')
  }
  else {
    jQuery(idElement).removeClass('resetX')
  }
});

body{
  overflow-x: hidden
}

.container{
  border: solid 1px red;
  max-width: 800px;
  margin: auto auto;
  padding: 5px;
}

.above-the-fold{
  background:  linear-gradient(180deg, rgba(163,196,243,1) 27%, rgba(142,236,245,1) 100%);
  height: calc(100vh + 300px);
  margin-bottom: 30px;
}

.boxes{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box{
  margin: 10px;
  height: 200px;
  flex: 0 0 calc(50% - 30px);
  background-color: #98f5e1;
}

.text{
  font-size: 18px;
  margin: 10px;
}

.anime{
  transition: all .7s ease-in-out;
}

.left{
  transform: translateX(220px);
}

.right{
  transform: translateX(-220px);
}

.resetX{
  transform: translateX(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="above-the-fold"></div>
  <div class="boxes">
    <div class="box anime right"></div>
    <div class="box anime left"></div>
    <div class="text anime right">Loren Ipsum</div>
    <div class="text anime left">Loren Ipsum</div>
  </div>
</div>

仅在滚动时移动文本 - 框架？

Move text only when scrolling - Framework?

javascript

css

animation

scroll

css-animations