basicScroll
介绍
basicScroll是用来实现页面滚动时特效的JavaScript库，当页面中元素相对于屏幕发生改变时，basicScroll通过改变元素css属性值而实现特效。
优势
- basicScroll具有灵活的动画效果，开发者可以直接在CSS中使用变量来得到想要的动画效果，也可以使用JS来更好的控制动画.
- basicScroll是一个的轻量小型独立的现代化框架。basicScroll高度优化，开发者可以使用它创造出优雅平滑的动画。
- basicScroll的响应式做的也非常好，它可以在不改变代码行的情况下从小屏幕到大屏幕切换。
安装
可以通过Bower或者npm安装basicscroll
bower install basicScroll npm install basicscroll
安装完成后，在HTML文件中引用（根据文件的位置自行调整）
<script src="dist/basicScroll.min.js"></script>
实现一个简单的特效
以图片随页面下拉逐渐淡化为例
首先在HTML中加载一张图片，假设将图片的类设置为image
设置image类的css属性：
.image{
opacity: var(--opacity);
will-change: opacity;
}
在JavaScript代码中：
/*
*创建一个实例
*/
const instance = basicScroll.create({
/*
*取类为image的元素为目标
*/
elem: document.querySelector('.image'),
/*
*设置触发效果的位置
*/
from: 'top-bottom',
to: 'top-top',
/*
*设置效果
*/
props: {
'--opacity': {
from: .01,
to: .99
}
}
})
/*
*启用创建的实例
*/
instance.start()
效果演示
实例API
basicScroll还有许多实例API，比如：
开始
开始动画实例。basicScroll将跟踪滚动位置并相应地调整实例。仅当滚动位置改变时才会执行更新。
instance.start()
停止
停止动画实例。实例的所有效果将保持其最后的值。
instance.stop()
更新
触发实例的更新，即使实例当前已停止。
const props = instance.update()
……(更多API可以在GitHub文档中查阅)
CSS的力量
basicScroll中有很多用CSS变量控制的动画，作者认为CSS变量的力量是不应该被低估的。CSS自定义属性 - 如规范命名 - 可以比SASS变量做更多的事情。它们是属性，它们像普通属性一样级联。
使用CSS变量，可以消除多余的样式。开发者从编程语言的函数中了解得原理适用于CSS自定义属性，定义一次，可以重复使用，无需重复编写相同的代码。
（参考文章《CSS变量的力量》）
进入官网了解更多basicScroll：https://basicscroll.electerious.com/
