最近在做一个官网类型滚动加载动画，使用到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元素滚动监听触发插件实现页面动画效果的更多相关文章
	

    
								
  1. Bootstrap滚动监听(Scrollspy)插件
		
    Bootstrap滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标
    
		
    2. 
						
  2. Bootstrap 下拉菜单和滚动监听插件
		
    一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
    
		
    3. 
						
  3. Bootstrap学习js插件篇之滚动监听
		
    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...
    
		
    4. 
						
  4. Bootstrap-Plugin：滚动监听（Scrollspy）插件
		
    ylbtech-Bootstrap-Plugin:滚动监听(Scrollspy)插件 1.返回顶部 1. Bootstrap 滚动监听(Scrollspy)插件 滚动监听(Scrollspy)插件,即 ...
    
		
    5. 
						
  5. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件
		
    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...
    
		
    6. 
						
  6. jQuery页面滚动监听事件及高级效果插件
		
    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
    
		
    7. 
						
  7. vue插件——滚动监听 vue-scrollwatch
		
    造轮子的目的: 做项目的时候需要一个滚动监听的功能,html结构已经都写好了,不想使用vue组件的方式来写,因为不想改造html结构,于是花了几个小时做了一个简单的,使用vue指令方式来做的,项目上够 ...
    
		
    8. 
						
  8. uniapp滚动监听元素
		
    鸽了这么久,一晃2个月过去了.自考+上班没时间记录. 前不久看到移动官网上的时间轴效果,看起来不错,我也来试着做一下. 需要元素滚动到视野内加载动画. 插件地址 https://ext.dcloud. ...
    
		
    9. 
						
  9. Bootstrap入门（二十六）JS插件3：滚动监听
		
    很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. springBoot 集成swagger2.9.2
			
    加依赖 <!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger-ui --> <dependen ...
    
			
    2. 
						
  2. （转）.gitignore详解
			
    本文转自http://sentsin.com/web/666.html 今天讲讲Git中非常重要的一个文件——.gitignore. 首先要强调一点,这个文件的完整文件名就是“.gitignore”, ...
    
			
    3. 
						
  3. 天问之Linux内核中的不明白的地方
			
    1. Linux 0.11\linux\kernel\exit.c 文件中, 无论是send_sig()函数还是kill_session()函数中,凡是涉及到发送信号的地方,都是直接    (*p)- ...
    
			
    4. 
						
  4. HDU：2586-How far away
			
    How far away Time limit1000 ms Memory limit32768 kB Problem Description There are n houses in the vi ...
    
			
    5. 
						
  5. FFT、NTT学习笔记
			
    参考资料 picks miskcoo menci 胡小兔 unname 自为风月马前卒 上面是FFT的,学完了就来看NTT吧 原根 例题:luogu3803 fft优化后模板 #include < ...
    
			
    6. 
						
  6. CSS编码规范(转)
			
    1 前言 CSS作为网页样式的描述语言,在百度一直有着广泛的应用.本文档的目标是使CSS代码风格保持一致,容易被理解和被维护. 虽然本文档是针对CSS设计的,但是在使用各种CSS的预编译器(如less ...
    
			
    7. 
						
  7. HDU——1073Online Judge（string类以及其对应函数）
			
    Online Judge Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...
    
			
    8. 
						
  8. [luoguP2764] 最小路径覆盖问题（最大流 || 二分图最大匹配）
			
    传送门 可惜洛谷上没有special judge,不然用匈牙利也可以过的,因为匈牙利在增广上有一个顺序问题,所以没有special judge就过不了了. 好在这个题的测试数据比较特殊,如果是网络流的 ...
    
			
    9. 
						
  9. ECharts学习总结（二）-----图表组件漏斗图(funnel)
			
    今天在学习ECharts时,想要在ECharts图表的原生态Demo中抠出漏斗图,却不知如何下手,经过一番研究,特总结如下: 首先我们需要这样做 1.拷贝出两个js文件:esl.js 和echarts ...
    
			
    10. 
						
  10. [HDU4362] Palindrome subsequence (区间DP)
			
    题目链接 题目大意 给你几个字符串 (1<len(s)<1000) ,要你求每个字符串的回文序列个数.对于10008取模. Solution 区间DP. 比较典型的例题. 状态定义: 令  ...
    
			
    11.