serialeffect是一个高性能的文本动画jQuery插件，它允许您在滚动文本块时为文本块中的字符设置动画。

该插件使用各种CSS3技术（CSS3转换和转换）来构建这种效果。不仅是文本，该插件还允许您将微妙的滚动动画应用于任何块元素，如图像。

如何使用它:

1.在页面上包含jQuery库和serialeffect插件的文件。

<link rel="stylesheet" href="dist/jquery.serialeffect.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="dist/jquery.serialeffect.min.js"></script>

2.在文档就绪时初始化插件。

$(document).ready(function(){
  $.serialeffect();
});

3.默认情况下，此插件会将滚动触发的动画应用于节容器中包含的所有指定元素。您可以覆盖默认的包装器和元素选择器，如下所示：

$.serialeffect({
  sectionsSelector: 'section',
  elementsSelector: 'div, p, li, h1, img, span, a, g',
});

4.您也可以使用js serialeffect忽略class.

<section>
  <p>Text To Animation</p>
  <img src="image-to-ignore.jpg" class="js-serialeffect-ignore" />
</section>

$.serialeffect({
  ignoreClass: 'js-serialeffect-ignore',
});

5.在设置动画时更改应用于目标元素的默认CSS类。

$.serialeffect({
  elementsClass: 'js-serialeffect',
});

6.以像素为单位设置最大间隙。默认值：200。

$.serialeffect({
  maxGap: 500,
});

7.可以随意覆盖和修改默认的CSS来创建自己的动画。

.js-serialeffect {
  display: inline-block;
  transition: transform 300ms;
  transition-timing-function: cubic-bezier(0, 0.6, 0.6, 1);
  will-change: transform;
}

更新日志：

2022-04-06

• 添加咏叹调标签标签

预览截图

滚动时为文本块中 字符制作动画 连载效果