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

zhte4eai 于 2023-04-01 发布在其他

关注(0)|答案(3)|浏览(99)

大家好
是否有一个框架或其他东西，使它很容易移动文本（向左或向右）当用户滚动（例如在页脚附近）？所以一个纯粹的滚动动画。
感谢您的评分
我试过Scrollmagic，但我不能处理它。：/

css

来源：https://stackoverflow.com/questions/71636441/move-text-only-when-scrolling-framework

3条答案

按热度按时间

cvxl0en21#

你可以尝试使用gsap，但是如果你想在没有框架的情况下使用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>

赞(0）回复(0）举报 2023-04-01

oxf4rvwz2#

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

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>

赞(0）回复(0）举报 2023-04-01

ulmd4ohb3#

我非常推荐名为Gsap绿色Sock（https://greensock.com/）的库，其中包含名为ScrollTrigger（https://greensock.com/scrolltrigger/）的Gsap插件。Gsap使用JavaScript和ScrollTrigger插件创建动画，您可以在youtube上搜索此插件的展示。我不记得VDO链接。
为什么要使用Gsap和ScrollTrigger
1.太容易安装使用只需2行的html

<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>

1.比JQuuery和纯javascript更快更容易。
1.有很多可以优化的选项
1.社区支持每一个问题。

赞(0）回复(0）举报 2023-04-01

我来回答

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

3条答案

相关问题

热门标签

最新问答