basicScroll 介绍
basicScroll 可以根据 css 变量来改变滚动位置。你可以在 css 中使用变量来制作想要的动画效果。basicScroll 运行非常流畅，在桌面和移动设备上运行出色，并且支持触摸。
basicScroll 独立于框架，支持 Commonjs 和 AMD ，拥有简单的 js API 。
安装
建议使用 Bower 或 npm 安装 basicScroll
bower install basicScroll
npm install basicscroll
将 js 文件包含在<body>标记的末尾
<script src="dist/basicScroll.min.js"></script>
或将 basicScroll 作为模块使用
const basicScroll = require('basicScroll')
用法
下面的示例所演示的是如何在用户滚动时更改元素的不透明度。只要元素的顶部到达视口的底部，元素就开始淡化。当元素的中间部分位于视口中间时，达到.99的不透明度。
提示：从.01到.99的动画避免了元素从完全透明变为半透明，并从半透明变为完全可见时触发的重绘。
const instance = basicScroll.create({
elem: document.querySelector('.element'),
from: 'top-bottom',
to: 'middle-middle',
props: {
'--opacity': {
from: .01,
to: .99
}
}
})
instance.start()
.element {
/*
* 使用与上面实例中指定的相同的css变量。
*/
opacity: var(--opacity);
/*
* css 属性 will-change 为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变
* 化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。
*/
will-change: opacity;
}
网站地址:https://basicscroll.electerious.com
GitHub:https://github.com/electerious/basicScroll
网站描述:移动端和桌面端的独立视差滚动
basicScroll
官方网站：https://basicscroll.electerious.com
小编说
以上是编程之家为你收集整理的basicScroll全部内容。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。