waypoint+animate元素滚动监听触发插件实现页面动画效果
最近在做一个官网类型滚动加载动画，使用到waypoint监听事件插件和animate动画样式，两者结合完美实现向下滚动加载动画，但是没有做向上滚动撤消动画，留待以后有空研究
首先来介绍下jquery.waypoint.js工具，这是一个实时监听页面滚动事件，它依赖于jquery，通过jquery添加animate的动画样式来实现动画效果
注意：animate动画是通过css3来现实，低版本的浏览器就emmm....
来个简单的粟子
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="frame/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div class="container" style="padding-top: 1200px;padding-bottom: 300px">
<h1 class="animate-box text-center">Title</h1>
</div>
</body>
<script type="text/javascript" src="frame/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="frame/jquery.waypoints.min.js"></script>
<script>
$('.animate-box').waypoint( function( direction ) {
$(this.element).addClass("wobble animated")
} , { offset: '85%' } );
</script>
</html>
waypoint方法是监听该元素的事件，offset参数是该元素在页面可视范围内的位置，wobble 是动画的实现方法，animated是动画的执行方法，二者缺一不可
来张简单的说明图
来个更复杂点的粟子
<style>
.animate-box {
opacity: 0;
}
</style> <div class="row aboutus-list">
<div class="col-lg-4 col-xs-4 fadeInUp-tip animate-box itme-adimate" data-animate-effect="fadeInUp">
<span class="aboutus-service sp-img"></span>
<h3>信息化xx</h3>
<div class="fade-text">
信息化实现对xxx流程
化管理
</div>
</div>
<div class="col-lg-4 col-xs-4 fadeInUp-tip animate-box itme-adimate" data-animate-effect="fadeInUp">
<span class="aboutus-resources sp-img"></span>
<h3>智能化xx</h3>
<div class="fade-text">
实现对xx工作量化及监督
</div>
</div>
<div class="col-lg-4 col-xs-4 fadeInUp-tip animate-box itme-adimate"data-animate-effect="fadeInUp" >
<span class="aboutus-technology sp-img"></span>
<h3>智慧化xxx</h3>
<div class="fade-text">
结合信息化运营和智能化监管，实现对机
构统一实现
</div>
</div>
</div> <div class="row aboutus-list aboutus-list-3">
<div class="col-lg-3 col-xs-3 col-funds animate-box itme-adimate" data-animate-effect="fadeInUp">
<span class="aboutus-service sp-img"></span>
<p>智能xx</p>
<div class="text-p">信息化实现对xxx中多个环节运营流程
化管理</div>
</div>
<div class="col-lg-3 col-xs-3 col-funds animate-box itme-adimate" data-animate-effect="fadeInUp">
<span class="aboutus-resources sp-img"></span>
<p>智能xxx</p>
<div class="text-p">信息化实现对机构内部人、事、物的管理
及xxx过程中多个环节运营流程
化管理</div>
</div>
<div class="col-lg-3 col-xs-3 col-funds animate-box itme-adimate" data-animate-effect="fadeInUp">
<span class="aboutus-technology sp-img"></span>
<p>健康xxx</p>
<div class="text-p">信息化实现对机构内部人、事、物的管理
及xxx过程中多个环节运营流程
化管理</div>
</div>
<div class="col-lg-3 col-xs-3 col-funds animate-box itme-adimate" data-animate-effect="fadeInUp">
<span class="aboutus-cloudbeacon sp-img"></span>
<p>xxxx</p>
<div class="text-p">信息化实现对机构内部人、事、物的管理
及xxx过程中多个环节运营流程
化管理</div>
</div>
</div>
var i = 0;
$('.animate-box').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated-fast') ) {
i++;
$(this.element).addClass('item-animate');
setTimeout(function(){
$('body .animate-box.item-animate').each(function(k){
var el = $(this);
setTimeout( function () {
var effect = el.data('animate-effect');
el.addClass(effect + ' animated');//读取自定义属性值中设定的动画名称添加到元素类中 el.removeClass('item-animate');
}, k * 200, 'easeInOutExpo' );//根据顺序分别为每个元素添加过渡动画时间
});
}, 100);
}
} , { offset: '85%' } );
这个粟子可以监听7个盒子元素，通过jquery读取自定义属性data-animate-effect的值来添加不同的动画，但是因为动画位置不同，
会根据direction内部参数和animated-fast类来决定当前滚动方向是否正确和是否重复执行
，同时在定时器的工作下根据元素顺序添加累加执行时间来实现逐步过渡效果
特别注意：因在fadeInUp动画中是由透明度0过渡到1，所以初始时元素的透明度必须设置成0，否则没有效果
上一下过渡动画效果
waypoint+animate元素滚动监听触发插件实现页面动画效果的更多相关文章
- Bootstrap滚动监听(Scrollspy)插件
Bootstrap滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标
- Bootstrap 下拉菜单和滚动监听插件
一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
- Bootstrap学习js插件篇之滚动监听
1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...
- Bootstrap-Plugin：滚动监听（Scrollspy）插件
ylbtech-Bootstrap-Plugin:滚动监听(Scrollspy)插件 1.返回顶部 1. Bootstrap 滚动监听(Scrollspy)插件 滚动监听(Scrollspy)插件,即 ...
- 第二百四十四节，Bootstrap下拉菜单和滚动监听插件
Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
- vue插件——滚动监听 vue-scrollwatch
造轮子的目的: 做项目的时候需要一个滚动监听的功能,html结构已经都写好了,不想使用vue组件的方式来写,因为不想改造html结构,于是花了几个小时做了一个简单的,使用vue指令方式来做的,项目上够 ...
- uniapp滚动监听元素
鸽了这么久,一晃2个月过去了.自考+上班没时间记录. 前不久看到移动官网上的时间轴效果,看起来不错,我也来试着做一下. 需要元素滚动到视野内加载动画. 插件地址 https://ext.dcloud. ...
- Bootstrap入门（二十六）JS插件3：滚动监听
很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...
随机推荐
- Windows10 关闭自动更新
win+R调出运行窗口: 输入services.msc,查找 跳出服务窗口,点击windows update设置禁用即可 Windows Update Medic Service没办法禁用,需要采用其 ...
- Voyager的Roles和Pemissions
以Page为例讲解: 取消admin的roles下Pages的Browse Pages权限: 打开web.php文件,添加: Route::get('pages', function(){ retur ...
- ubuntu18.04+win10解决时钟不同步办法
安装ntpdate: 执行命令: sudo apt-get install ntpdate 设置校正服务器: sudo ntpdate time.windows.com 设置硬件时间为本地时间: 执行 ...
- 2018 Multi-University Training Contest 1 Distinct Values（set）
题意: t组数据,每组数据给定n,m, 表示有m个约束,每个约束包含 x,y ,代表区间 [x, y] 里的数字不能相同. 让你用所有的正整数构成一个长度为 n 的区间,使得这个区间元素顺序的字典序最 ...
- luogu1441 砝码称重
搜索+背包就是了 #include <iostream> #include <cstring> #include <cstdio> using namespace ...
- bat 文件读取乱码问题
使用 for 循环 type file1.txt > file2.txt 文件读取后可能会出现乱码,需要在 bat 文件中设置 chcp 表示将批处理设置为 utf-8 编码,这样在生成文件和读 ...
- gdb调试手册 一 gdb概述
一 gdb概述 gdb调试器的目的是让你了解其他的程序在执行的时候发生了什么或者其他程序崩溃时正在做什么 gdb主要能够在运行中做四类事情(包括这些事情中的一些附加的事情)来帮助你获取bugs a 运 ...
- hdu1595 最短路问题（dijkstra&&spfa）
find the longest of the shortest Time Limit: 1000/5000 MS (Java/Others) Memory Limit: 32768/32768 ...
- JSP内置对象的cookie和session实现简单登录界面
创建一个index.jsp页面 <%@ page language="java" contentType="text/html; charset=utf-8&quo ...
- iOS学习笔记39-ReactiveCocoa入门
FRP,全称为Functional Reactive Programming,是一种响应变化的编程范式,最近几年比较火,大概的理解就像这样: 当a的值或者b的值发生变化时,c的值会自动响应a的值或b的 ...