文件名称:scrollxp:Alpine.js风格的库,用于在网站上滚动动画
文件大小:258KB
文件格式:ZIP
更新时间:2024-06-03 11:02:55
parallax animation gsap scene animations
滚动XP ScrollXP是一个库,可轻松使用HTML数据属性将与滚动相关的动画拖放到您的网站中。 有点像Alpine.js或Tailwind.css ...,但是是动画。 概述 创建动画可能很乏味。 始终不清楚代码应该去哪里,并且可能会一遍又一遍地写一些常见的动画。 如果您不小心,JavaScript文件可能会变得一团糟。 ScrollXP通过公开一组可以直接放入HTML中的数据属性来帮助您避免这种情况,从而使常见的动画更加快捷,容易。 演示版 查看一些简单的示例: 安装 通过NPM : $ npm install gsap scrollxp --save 注意:您需要使用GSAP 3或更高版本。 将其包括在脚本中: import ScrollXP from "scrollxp" 或通过CDN : < script src =" https://unpkg.com/gsap/
【文件预览】:
scrollxp-master
----__demo__()
--------assets()
--------index.html(12KB)
--------src()
--------stagger.html(2KB)
--------scripts()
----tsconfig.testing.json(88B)
----docs()
--------animation()
--------development.md(863B)
--------scene()
--------configuration.md(5KB)
--------examples()
--------parallax()
----package.json(3KB)
----tests()
--------animation.parser.spec.ts(1KB)
--------scene.builder.spec.ts(11KB)
--------scene.parser.spec.ts(828B)
--------animation.builder.spec.ts(25KB)
--------parallax.builder.spec.ts(13KB)
--------animation.creator.spec.ts(2KB)
--------index.spec.ts(843B)
----LICENSE(1KB)
----package-lock.json(415KB)
----dist()
--------scrollxp.min.js.LICENSE.txt(808B)
--------scrollxp.min.js(128KB)
----src()
--------scroll-controller.ts(6KB)
--------utils.ts(3KB)
--------scrollmagic()
--------parser.ts(490B)
--------interfaces()
--------scroll-scene.ts(6KB)
--------parsers()
--------creator()
--------builders()
--------index.ts(15KB)
--------helpers()
----.eslintrc.js(819B)
----tsconfig.json(629B)
----.gitignore(495B)
----.prettierrc.js(117B)
----README.md(4KB)
----.stylelintrc(517B)
----.eslintignore(8B)
----scripts()
--------serve.js(563B)
--------webpack.prod.js(625B)
--------webpack.dev.js(760B)
--------deploy.sh(2KB)
--------webpack.base.js(797B)
--------webpack.ghpages.js(684B)
--------release.js(4KB)
----.vscode()
--------launch.json(444B)
--------settings.json(320B)