basicScroll

开源项目精选: 网页滚动特效库basicScroll

介绍

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

优势

  1. basicScroll具有灵活的动画效果,开发者可以直接在CSS中使用变量来得到想要的动画效果,也可以使用JS来更好的控制动画.
  2. basicScroll是一个的轻量小型独立的现代化框架。basicScroll高度优化,开发者可以使用它创造出优雅平滑的动画。
  3. basicScroll的响应式做的也非常好,它可以在不改变代码行的情况下从小屏幕到大屏幕切换。

安装

可以通过Bower或者npm安装basicscroll

安装完成后,在HTML文件中引用(根据文件的位置自行调整)

实现一个简单的特效

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

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

设置image类的css属性:

在JavaScript代码中:

效果演示

开源项目精选: 网页滚动特效库basicScroll

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