当前位置：首页 > 网页特效 > 滚动

页面滚动触发css3动画js插件

分类：滚动日期：2024-05-14 点击(0) 评论(0)

页面滚动触发css3动画js插件

简介

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

```html
<script type="text/javascript" src="js/delighters.js.js"></script>
```
#####  HTML结构
在需要制作动画的元素上添加data-delighter属性。

```html
<div> class="foo" data-delighter </div>        
```    
#####  CSS样式
内置的.started和 .ended类会自动为带data-delighter的元素（或它的子元素）添加样式。

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

```html
.foo.delighter {
  transition: all .3s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
```
.startedclass类会在元素进入视口顶部0.75时添加到元素上。（最顶部为0，最底部为1）。

```html
.foo.delighter.started {
  transform: none;
  opacity: 1;
}
```
.endedclass类会在元素进入底口顶部0.75时添加到元素上。（最顶部为0，最底部为1）。

```html
.foo.delighter.started.ended {
  border: solid red 10px;
}
```
##### 自定义配置参数 
通常情况下，插件会在DOM元素加载完毕之后自动加载。它的默认配置参数如下：

```html
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
}
```
你可以通过下面的方法来修改插件的默认配置参数：

```html
Delighters.config({    
    // set the default start threshold at the bottom
    start: 1,
    // let's call Delighters.init() manually later
    autoInit: false 
    // ... etc ...
  })
```

web299.com

页面滚动触发css3动画js插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果