ScrollTrigger是一款高性能页面滚动触发HTML元素动画JS插件。该插件根据页面滚动的位置来对页面中的元素执行动画,插件中使用requestAnimationFrame,对用户的滚动不会产生额外的影响。
使用方法
在页面中引入ScrollTrigger.min.js文件。
<script src="path/to/ScrollTrigger.min.js"></script>
初始化插件
在页面加载完毕之后,可以通过ScrollTrigger.init()
方法来初始化该插件。
<script> document.addEventListener('DOMContentLoaded', function(){ ScrollTrigger.init(); }); </script>
初始化方法调用2个参数:bindTo
和scrollIn
,它们都是可选参数。
bindTo
参数是动画HTML元素的容器,通常是document.body
。
scrollIn
参数是从中获取滚动位置的元素,通常是window
。
HTML结构
接下来你需要在HTML元素上添加data-scroll
属性。
<div data-scroll></div>
如果你想在元素进入视口时变为可见,离开视口时隐藏,可以在进入视口是为元素添加visible
class类,在离开视口时添加invisible
class类,然后在你的CSS文件中定义这两个class类的动画效果。
.invisible { transition: opacity 0.5s ease; opacity: 0.0; } .visible { transition: opacity 0.5s ease; opacity: 1.0; }
这样,一个简单的进入视口时元素淡入效果,离开视口时元素淡出效果的动画就完成了。
配置参数
data-scroll
属性可以设置以下以下配置参数。
参数 | 类型 | 描述 | 示例代码 |
toggle() | CSS Classes | 一对用于在滚动时切换的class类,例如visible 和invisible 。 |
data-scroll="toggle(.animateIn, .animateOut)" 也可以不带 . 号,data-scroll="toggle(animateIn, animateOut)"
|
offset() | Pixels | 添加到元素上的偏移值。接收X和Y两个数作为参数。 |
data-scroll="offset(0,50px)" 表示Y轴50像素的偏移。px 单位可以不写:data-scroll="offset(-50,0)"
|
addWidth | Boolean | 是否添加元素的偏移宽度,使元素完全可见时才添加相应的class类。 | data-scroll="addWidth" |
addHeight | Boolean | 是否添加元素的偏移高度,使元素完全可见时才添加相应的class类。 | data-scroll="addHeight" |
centerHorizontal | Boolean | 是否添加元素的一半偏移宽度,使元素在一半可见时就添加相应的class类。 | data-scroll="centerHorizontal" |
centerVertical | Boolean | 是否添加元素的一半偏移高度,使元素在一半可见时就添加相应的class类。 | data-scroll="centerVertical" |
once | Boolean | 是否让动画只执行一次。 | data-scroll="once" |
回调函数
你可以在元素显示或隐藏之后触发回调函数,通过data-scroll-showCallback
或data-scroll-hideCallback
属性来实现。例如:
<div data-scroll data-scroll-showCallback="alert('Visible')" data-scroll-hideCallback="alert('Invisible')"></div>
ScrollTrigger插件的github地址为:https://github.com/terwanerik/ScrollTrigger
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!