html页面css3滚动加载,页面滚动触发css3动画js插件

delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时，为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。

使用方法

在页面中引入_delighters.js.js文件。

HTML结构

在需要制作动画的元素上添加data-delighter属性。

class="foo" data-delighter

CSS样式

内置的.started和.ended类会自动为带data-delighter的元素(或它的子元素)添加样式。

当插件被加载之后，每一个data-delighter都会获得一个.delighter class类。

.foo.delighter {

transition: all .3s ease-out;

transform: translateX(-100%);

opacity: 0;

}

.startedclass类会在元素进入视口顶部0.75时添加到元素上。(最顶部为0，最底部为1)。

.foo.delighter.started {

transform: none;

opacity: 1;

}

.endedclass类会在元素进入底口顶部0.75时添加到元素上。(最顶部为0，最底部为1)。

.foo.delighter.started.ended {

border: solid red 10px;

}

自定义配置参数

通常情况下，插件会在DOM元素加载完毕之后自动加载。它的默认配置参数如下：

options = {

attribute: 'data-delighter',

classNames: ['delighter', 'started', 'ended'],

start: 0.75, // default start threshold

end: 0.75, // default end threshold

autoInit: true // initialize when DOMContentLoaded

}

你可以通过下面的方法来修改插件的默认配置参数：

Delighters.config({

// set the default start threshold at the bottom

start: 1,

// let's call Delighters.init() manually later

autoInit: false

// ... etc ...

})

delighters.js 页面滚动触发css3动画js插件的github地址为：https://github.com/Q42/delighters