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/

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180315G1AAGS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券