加入官方微信群

使用微信扫描二维码
或搜索 weweloo 添加微信好友

返回
MooKwai块交互滚动捕捉

滚动捕捉

滚动捕捉可根据页面滚动条的位置控制动画的播放与回放,增强页面滚动的交互性,常用于视差滚动效果。 配置选项 起始点 String | Function 设置容器进入视图的点位。 结束点 String | Function 设置容器离开视图的点位。 平滑 Number 设置动画的平滑参数,单位为s,表示动画在滚动停止后持续多长时间完成动画。 启用标记 Boolean 开发模式下可启用标记查看滚动的起始…

文章目录

滚动捕捉可根据页面滚动条的位置控制动画的播放与回放,增强页面滚动的交互性,常用于视差滚动效果。

配置选项

起始点

String | Function 设置容器进入视图的点位。

结束点

String | Function 设置容器离开视图的点位。

// 字符串形式
"top center"
"bottom 80%"
"top bottom-=100px"

// 函数
// 使用 '()' 或 'function' 开头的内容将自动识别为函数内容。如果需要使用当前选择器,使用 '::selector' 代替。
() => '+=' + ::selector.offsetWidth
function() {
  return '+=' + document.querySelector('.box').offsetWidth
}

平滑

Number 设置动画的平滑参数,单位为s,表示动画在滚动停止后持续多长时间完成动画。

启用标记

Boolean 开发模式下可启用标记查看滚动的起始点与结束点等。

参考链接:ScrollTrigger

使用微信扫描二维码
或搜索 weweloo 添加微信好友

加微信
进群聊聊(๑•̀ㅂ•́) ✧