2018年3月15日：开源日报第7期

每天推荐一个 GitHub 优质开源项目和一篇精选英文科技或编程文章原文，欢迎关注开源日报。交流QQ群：202790710；电报群：

https://t.me/OpeningSourceOrg

今日推荐

今日推荐开源项目：《网页滚动特效库basicScroll》

推荐理由：basicScroll是用来实现页面滚动时特效的JavaScript库，当页面中元素相对于屏幕发生改变时，basicScroll通过改变元素css属性值而实现特效。

优势

1.basicScroll具有灵活的动画效果，开发者可以直接在CSS中使用变量来得到想要的动画效果，也可以使用JS来更好的控制动画.

2.basicScroll是一个的轻量小型独立的现代化框架。basicScroll高度优化，开发者可以使用它创造出优雅平滑的动画。

3.basicScroll的响应式做的也非常好，它可以在不改变代码行的情况下从小屏幕到大屏幕切换。

安装

可以通过Bower或者npm安装basicscroll

安装完成后，在HTML文件中引用（根据文件的位置自行调整）

实现一个简单的特效

以图片随页面下拉逐渐淡化为例

首先在HTML中加载一张图片，假设将图片的类设置为image

设置image类的css属性：

在JavaScript代码中：

演示效果

实例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/