滚动控制的文本动画

Scroll-controlled text animation

本文关键字：动画 文本 控制 滚动      更新时间：2023-09-26

如何通过滚动触发和控制文本动画？

<p class="class">TEXT</p>

transform:translateX(-500px);opacity:0;
transform:translateX(0px);opacity:1;

您可以使用Skrollr。

导入库，然后类似

<p class="class" data-X_start=" transform:translateX(-500px);opacity:0;" data-X_end=" transform:translateX(0px);opacity:1;">
            TEXT</p>

将在滚动条处于X_start时开始动画，并在到达X_end时完成动画。

  1. 必须设置初始样式值
  2. 通过以下方式修改样式值：
    a.添加类
    b.添加内联样式属性
    c.使用css3动画样式属性

或

  1. 使用外部js库

不要忘记使用前缀进行跨浏览器压缩。

示例（使用jQuery）：

//css
.class {
    -moz-transform: translateX(-500px);
    -ms-transform: translateX(-500px);
    -o-transform: translateX(-500px);
    -webkit-transform: translateX(-500px);
    transform:translateX(-500px);
    opacity:0;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.class.animated {
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
}
//html
<p class="class">TEXT</p>
//js - animate on scrol event
$( "#target" ).scroll(function() {
    $(".class").toggleClass("animate");
});
相关文章：