有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。

WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。

html中使用方法:

<div class="row wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">

js中使用方法:

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
$(function(){
new WOW().init();
})
</script>

animate.css配合wow.min.js实现各种页面滚动效果的更多相关文章

  1. 麦子学院bootstrap实战项目官网,后台,jquery.singlePageNav.min.js ,wow.min.js,animate.css使用

    1.源码笔记 我的源码+笔记(很重要):链接: https://pan.baidu.com/s/1eSxgLV0 密码: 2pi2 感谢麦子学院项目相关视频:链接: https://pan.baidu ...

  2. wow.js wow.min.js animate.css animate.min.css

    奉献给下载不到源码的小伙伴,下载到的请忽视 wow.js (function() { var MutationObserver, Util, WeakMap, getComputedStyle, ge ...

  3. pageresponse.min.js自动缩放页面改写

    /* * 名称 :移动端响应式框架 * 作者 :白树 http://peunzhang.cnblogs.com * 版本 :v2.1 * 日期 :2015.10.13 * 兼容 :ios 5+.and ...

  4. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  5. js文字展示各种滚动效果

    js文字展示各种滚动效果:http://www.dowebok.com/demo/188/

  6. animate.css与wow.js制作网站动效

    animate.css 官网:https://daneden.github.io/animate.css/ 包括:attention seekers:关注者 bouncing entrances:跳跃 ...

  7. vue项目中引入animate.css和wow.js

    本文转自:https://blog.csdn.net/liyunkun888/article/details/85003152 https://www.zhuimengzhu.com/content/ ...

  8. jquery.imgpreload.min.js插件实现页面图片预加载

    页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...

  9. HTML+CSS页面滚动效果处理

    HTML+CSS代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. Javascript DOM基础(一)概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  2. Socket编程基础——无连接UDP

    与面向连接的网络连接相比,无连接的网络通信不需要在服务器与客户端之间建立连接.面向非连接的Socket通信是基于UDP的,服务器端不需要调用listen()和accept()函数来等待客户端的连接:客 ...

  3. [读书笔记]OSGI-灵活的类加载器架构

    以下内容来自周志明的<深入理解Java虚拟机>. 学习JEE规范,去看JBoss源码:学习类加载器,就去看OSGI源码. OSGI,即Open Service Gateway Initia ...

  4. selinium的ruby版在windows8下安装

    1.安装ruby,当然windows下是最简单的装一个rubyinstaller,官网有.一步到位 2.因为selinium官网被墙,所以改成淘宝的一个资源库 gem sources --remove ...

  5. linux php redis扩展的安装和redis服务的安装

    一.php redis扩展的安装 wget http://pecl.php.net/get/redis-2.2.7.tgztar zvxf redis-2.2.7.tgzcd redis-2.2.7/ ...

  6. 2016.1.4~2016.1.7真题回顾!-- HTML5学堂

    2016.1.4~2016.1.7真题回顾!-- HTML5学堂 2015悄然而逝,崭新的2016随即而行!生活需要新鲜感,学习JavaScript的过程需要有成就感!成就感又是来自于每一天的不断练习 ...

  7. 颤抖吧,骚年们,2016年末最牛逼的sql语句

    select channel_name,from_unixtime(createTime,'%Y-%m-%d') as tdate,count(deviceid) '安装量',count(case w ...

  8. QTreeWidget创建

    QTreeWidget.顾名思义,这个类用来展示树型结构.同前面说的QListWidget类似,这个类需要同另外一个辅助类QTreeWidgetItem一同使用.不过,既然是提供方面的封装类,即便是看 ...

  9. PhpStorm (强大的PHP开发环境)2016.2.1 附注册方法

    最新版PhpStorm 2016正式版改进了PHP 7支持,改进代码完成功能. PhpStorm 是最好的PHP开发工具,使用它进行PHP开发将会让你感觉到编程的乐趣. 快乐无极终于从oschina看 ...

  10. 怎么 才能显示Eclipse中Console的全部内容

    可以如下设置 preference->run/debug->console 设置limit console output 为false,方便调试时,查看全部console. 这个真是太有用 ...