最近在做一个官网类型滚动加载动画，使用到waypoint监听事件插件和animate动画样式，两者结合完美实现向下滚动加载动画，但是没有做向上滚动撤消动画，留待以后有空研究

首先来介绍下jquery.waypoint.js工具，这是一个实时监听页面滚动事件，它依赖于jquery，通过jquery添加animate的动画样式来实现动画效果

注意：animate动画是通过css3来现实，低版本的浏览器就emmm....

来个简单的粟子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Title</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <link rel="stylesheet" href="frame/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  8.     <link rel="stylesheet" href="css/animate.css">
  9. </head>
  10. <body>
  11.     <div class="container" style="padding-top: 1200px;padding-bottom: 300px">
  12.         <h1 class="animate-box text-center">Title</h1>
  13.     </div>
  14. </body>
  15. <script type="text/javascript" src="frame/jQuery-2.1.4.min.js"></script>
  16. <script type="text/javascript" src="frame/jquery.waypoints.min.js"></script>
  17. <script>
  18.     $('.animate-box').waypoint( function( direction ) {
  19.         $(this.element).addClass("wobble animated")
  20.     } , { offset: '85%' } );
  21. </script>
  22. </html>
  1. waypoint方法是监听该元素的事件，offset参数是该元素在页面可视范围内的位置，wobble 是动画的实现方法，animated是动画的执行方法，二者缺一不可
    来张简单的说明图

  1. 来个更复杂点的粟子
  1. <style>
  2. .animate-box {
  3.     opacity: 0;
  4. }
  5. </style>
  6.  
  7. <div class="row aboutus-list">
  8.                 <div class="col-lg-4 col-xs-4  fadeInUp-tip animate-box  itme-adimate" data-animate-effect="fadeInUp">
  9.                     <span class="aboutus-service sp-img"></span>
  10.                     <h3>信息化xx</h3>
  11.                     <div class="fade-text">
  12.                         信息化实现对xxx流程
  13.                         化管理
  14.                     </div>
  15.                 </div>
  16.                 <div class="col-lg-4 col-xs-4  fadeInUp-tip animate-box  itme-adimate" data-animate-effect="fadeInUp">
  17.                     <span class="aboutus-resources sp-img"></span>
  18.                     <h3>智能化xx</h3>
  19.                     <div class="fade-text">
  20.                         实现对xx工作量化及监督
  21.                     </div>
  22.                 </div>
  23.                 <div class="col-lg-4 col-xs-4  fadeInUp-tip animate-box  itme-adimate"data-animate-effect="fadeInUp" >
  24.                     <span class="aboutus-technology sp-img"></span>
  25.                     <h3>智慧化xxx</h3>
  26.                     <div class="fade-text">
  27.                         结合信息化运营和智能化监管，实现对机
  28.                         构统一实现
  29.                     </div>
  30.                 </div>
  31.             </div>
  32.  
  33. <div class="row aboutus-list aboutus-list-3">
  34.                     <div class="col-lg-3 col-xs-3 col-funds animate-box  itme-adimate" data-animate-effect="fadeInUp">
  35.                         <span class="aboutus-service sp-img"></span>
  36.                         <p>智能xx</p>
  37.                         <div class="text-p">信息化实现对xxx中多个环节运营流程
  38.                             化管理</div>
  39.                     </div>
  40.                     <div class="col-lg-3 col-xs-3 col-funds animate-box  itme-adimate" data-animate-effect="fadeInUp">
  41.                         <span class="aboutus-resources sp-img"></span>
  42.                         <p>智能xxx</p>
  43.                         <div class="text-p">信息化实现对机构内部人、事、物的管理
  44.                             及xxx过程中多个环节运营流程
  45.                             化管理</div>
  46.                     </div>
  47.                     <div class="col-lg-3 col-xs-3 col-funds animate-box  itme-adimate" data-animate-effect="fadeInUp">
  48.                         <span class="aboutus-technology sp-img"></span>
  49.                         <p>健康xxx</p>
  50.                         <div class="text-p">信息化实现对机构内部人、事、物的管理
  51.                             及xxx过程中多个环节运营流程
  52.                             化管理</div>
  53.                     </div>
  54.                     <div class="col-lg-3 col-xs-3 col-funds animate-box  itme-adimate" data-animate-effect="fadeInUp">
  55.                         <span class="aboutus-cloudbeacon sp-img"></span>
  56.                         <p>xxxx</p>
  57.                         <div class="text-p">信息化实现对机构内部人、事、物的管理
  58.                             及xxx过程中多个环节运营流程
  59.                             化管理</div>
  60.                     </div>
  61.                 </div>
  1. var i = 0;
  2.     $('.animate-box').waypoint( function( direction ) {
  3.         if( direction === 'down' && !$(this.element).hasClass('animated-fast') ) {
  4.             i++;
  5.             $(this.element).addClass('item-animate');
  6.             setTimeout(function(){
  7.                 $('body .animate-box.item-animate').each(function(k){
  8.                     var el = $(this);
  9.                     setTimeout( function () {
  10.                         var effect = el.data('animate-effect');
  11.                         el.addClass(effect + ' animated');//读取自定义属性值中设定的动画名称添加到元素类中
  12.  
  13.                         el.removeClass('item-animate');
  14.                     },  k * 200, 'easeInOutExpo' );//根据顺序分别为每个元素添加过渡动画时间
  15.                 });
  16.             }, 100);
  17.         }
  18.     } , { offset: '85%' } );

这个粟子可以监听7个盒子元素，通过jquery读取自定义属性data-animate-effect的值来添加不同的动画，但是因为动画位置不同，

会根据direction内部参数和animated-fast类来决定当前滚动方向是否正确和是否重复执行

，同时在定时器的工作下根据元素顺序添加累加执行时间来实现逐步过渡效果

特别注意：因在fadeInUp动画中是由透明度0过渡到1，所以初始时元素的透明度必须设置成0，否则没有效果

  1.  

上一下过渡动画效果

waypoint+animate元素滚动监听触发插件实现页面动画效果的更多相关文章

  1. Bootstrap滚动监听(Scrollspy)插件

    Bootstrap滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标

  2. Bootstrap 下拉菜单和滚动监听插件

    一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

  3. Bootstrap学习js插件篇之滚动监听

    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...

  4. Bootstrap-Plugin：滚动监听（Scrollspy）插件

    ylbtech-Bootstrap-Plugin:滚动监听(Scrollspy)插件 1.返回顶部 1. Bootstrap 滚动监听(Scrollspy)插件 滚动监听(Scrollspy)插件,即 ...

  5. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

  6. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  7. vue插件——滚动监听 vue-scrollwatch

    造轮子的目的: 做项目的时候需要一个滚动监听的功能,html结构已经都写好了,不想使用vue组件的方式来写,因为不想改造html结构,于是花了几个小时做了一个简单的,使用vue指令方式来做的,项目上够 ...

  8. uniapp滚动监听元素

    鸽了这么久,一晃2个月过去了.自考+上班没时间记录. 前不久看到移动官网上的时间轴效果,看起来不错,我也来试着做一下. 需要元素滚动到视野内加载动画. 插件地址 https://ext.dcloud. ...

  9. Bootstrap入门（二十六）JS插件3：滚动监听

    很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...

随机推荐

  1. 【android】安卓平台版本和API版本的对应关系

    安卓平台版本和API版本对应关系

  2. CodeForces - 899E Segments Removal (优先队列 + 链表)

    给定一个序列,每次从序列中找一个长度最大的元素相同的片段,删除它. 如果长度相同,删除最靠左边的那个片段. 问,需要删几次. 用链表处理删除片段.对于删除之后两边又能连成一个片段的那种情况,用set记 ...

  3. 15年多校第一场七题hdu5294

    要做这题,先要明白图的割,说白了就是 为了让原点无法到汇点要删几条边(之所以叫割,就是在图面上切一刀,减掉最小的边是原点和汇点成为两个集合),想到了割先放着一会用. 题中说只有沿最短路走才有可能追上, ...

  4. 配置LAMP环境

    对我这种Linux小菜鸡来说,集成环境是最好的选择. 一,下载wget --no-check-certificate https://github.com/teddysun/lamp-yum/arch ...

  5. [POJ 1008] Maya Calendar C++解题

        Maya Calendar Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 62297   Accepted: 192 ...

  6. Selenium WebDriver-判断页面中某一元素是否已经显示，通常用于断言

    判断界面中某一元素是否已经呈现,多用于断言,代码如下: #encoding=utf-8 import unittest import time from selenium import webdriv ...

  7. Python socket粘包问题(初级解决办法)

    server端配置: import socket,subprocess,struct from socket import * server=socket(AF_INET,SOCK_STREAM) s ...

  8. Codeforces Round #410 (Div. 2) B. Mike and strings

    B. Mike and strings time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  9. Welcome-to-Swift-19类型嵌套(Nested Types)

    枚举类型常被用于实现特定类或结构体的功能.也能够在有多种变量类型的环境中,方便地定义通用类或结构体来使用,为了实现这种功能,Swift允许你定义类型嵌套,可以在枚举类型.类和结构体中定义支持嵌套的类型 ...

  10. 2016 年 ACM/ICPC 青岛区域赛 Problem C Pocky

    昨晚乱入学弟的训练赛,想了一下这个题.推导的过程中,加深了对公理化的概率论理解.$\newcommand{\d}{\mathop{}\!\mathrm{d}}$ 解法一 考虑 $ d < L$ ...