ScrollTrigger:让您的页面对滚动更改做出React

时间:2024-02-23 22:12:52
【文件属性】:

文件名称:ScrollTrigger:让您的页面对滚动更改做出React

文件大小:117KB

文件格式:ZIP

更新时间:2024-02-23 22:12:52

javascript css animation html-element trigger

滚动触发 让您的页面对滚动更改做出React。 ScrollTrigger的最基本用法是根据当前滚动位置触发类。 例如,当元素进入视口时,将其淡入。您可以为每个元素添加自定义偏移量,或在视口上设置偏移量(例如,始终在元素达到视口的20%之后触发) 使用回调时,ScrollTrigger变得非常强大。 当元素进入/可见时,您可以运行自定义代码,如果回调失败,甚至可以返回Promises来停止触发器。 这使得延迟加载图像非常容易。 安装 npm install @terwanerik/scrolltrigger或仅将dist/ScrollTrigger.min.js文件添加到您的项目中并导入。 如何使用? 最简单的启动方法是创建一个新实例,并向其添加一些触发器以及所有默认值。 当元素进入视口时,这将切换“可见”类,当元素滚动出视口时,将切换“不可见”类。 // when using ES6 import / npm import ScrollTrigger from '@terwanerik/scrolltrigger' // Create a new ScrollTrigger


【文件预览】:
ScrollTrigger-master
----.babelrc(109B)
----package.json(2KB)
----.github()
--------workflows()
----LICENSE(1KB)
----package-lock.json(303KB)
----dist()
--------ScrollTrigger.js(34KB)
--------ScrollTrigger.min.js(12KB)
--------ScrollTrigger.min.js.map(40KB)
----src()
--------config()
--------extensions()
--------ScrollTrigger.js(6KB)
--------scripts()
----dev()
--------index.html(607B)
--------main.js(349B)
----.gitignore(39B)
----webpack.config.js(2KB)
----demo()
--------scene.js(2KB)
--------index.html(6KB)
--------canvas.js(816B)
--------main.js(8KB)
--------demo.css(3KB)
--------point.js(2KB)
----README.md(13KB)
----bower.json(639B)

网友评论