手机版 | ------------全站资源有,统一解压码,解码平台,请点这里 ------------ 设首页 | 加收藏
当前位置: 网站首页 > jQuery库 > 文章 当前位置: jQ > 文章

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

时间:2020-07-01    点击: 次    来源:网络    作者:佚名 - 小 + 大

页面滚动触发css3动画js插件
简要教程

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

使用方法

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

<script type="text/javascript" src="js/delighters.js.js"></script>                
HTML结构

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

<div> class="foo" data-delighter </div>                            
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

 页面滚动触发css3动画js插件 本地下载

上一篇:强大的jquery下拉分页选择插件SelectPage

下一篇:jQuery表单浮动标签插件

推荐阅读
浙ICP备14024822号  |   QQ:79720816  |  地址:蚂蚁分享-一个只做有用的分享。  |  电话:13388629007  |  
Copyright © 2020 天人文章管理系统 版权所有,授权www.antqq.com使用 Powered by 55TR.COM