animate.css+wow.js页面滚动即时显示动画

时间:2022-09-09 07:54:18

1、地址引入

<link href="css/animate.min.css" rel="stylesheet" type="text/css">
<script src="js/wow.min.js" type="text/javascript"></script>

2、HTML部分

 <div class="animated bounceInRight wow" data-wow-delay="0.4s" style="visibility: visible;animation-delay: 0.4s"></div>

注:bounceInRight为animate.css中的动画方式,具体可见官方API给出的示例:https://daneden.github.io/animate.css

3、wow.js初始化代码

<script type="text/javascript">
new WOW().init();
</script>

注:以下是一些自定义配置:

var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();

  

animate.css+wow.js页面滚动即时显示动画的更多相关文章

  1. WOW&period;js和animate&period;css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

  2. wow&period;js&plus;animate&period;css——有趣的页面滚动动画

    今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...

  3. 原生Js页面滚动延迟加载图片

    原理和过程1.页面滚动加载事件2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxr ...

  4. WOW&period;js轻松为网页添加动画切入效果

    由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点  Y(^o^)Y~ . 今天就和大家 ...

  5. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  6. 基于jQ&plus;CSS3页面滚动内容元素动画特效

    今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...

  7. scrollReveal&period;js – 页面滚动显示动画JS

    简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的  JavaScript ,能让页面更加有趣,更吸引用户眼球.不同的是  WOW.js  的动画只播放一次,而 ...

  8. scrollReveal&period;js页面滚动动态效果

    scrollReveal.jshttp://www.dowebok.com/134.html简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScrip ...

  9. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

随机推荐

  1. 使用Apache Ambari管理Hadoop

    随着Hadoop越来越普及,对合适的管理平台的需求成为当前亟待解决的问题.已经有几个商业性的Hadoop管理平台,如Cloudera Enterprise Manager,但Apache Ambari ...

  2. Centos系统下Lamp环境的快速搭建

    首先为了搭建一个稳定的lamp的练习环境,确保你的虚拟机可以连网,这里我们使用的yum安装,它可以帮助我们解决软件自己的依赖关系.我还在后面加了postgresql数据库如果不需要的话可以去掉和pos ...

  3. asp&period;net简单小爬虫

    所谓爬虫简单点说,就是把别人网站上的东西爬下来,至于爬做什么用就看你自己了,比如:把别人网站上的东西爬下来放在自己网站中(感觉有点像小偷^v^). 这里随便写了一个爬虫代码(可以自己再去进行完善): ...

  4. MS WORD 表格自己主动调整列宽,自己主动变美丽,依据内容自己主动调整

    在MS WORD中,当有大量的表格出现时,调整每一个表格的的高和宽和大小将是一件很累的事情,拖来拖去,很耗时间,并且当WORD文档达到300页以上时,调整反应很的慢,每次拖拉线后,须要等待一段时间其才 ...

  5. SSM三大框架整合详细教程

    使用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地方.之前没有记录SSM整合 ...

  6. C&plus;&plus;关键字&lpar;1&rpar;——const

    1. const修饰普通变量和指针 const修饰变量,一般有两种写法: const TYPE value; TYPE const value; 这两种写法在本质上是一样的.它的含义是:const修饰 ...

  7. Java在Debug的时候,有些变量能无限展开(循环了)?

    抛异常的时候,Java Debug 时,有些变量能无限展开,怎么做到的? 先来一个报错的例子: Exception in thread "main" java.lang.Stack ...

  8. python多线程采集

    import requests import json import threading Default_Header = { #具体请求头自己去弄 } _session=requests.sessi ...

  9. mysql字段默认值不生效的问题解决(上)

    在项目中使用mybatis做为持久层框架,mysql数据库.项目上线前,DBA要求我们将每张数据库表中的字段都设置默认值和not null.之前项目中有一些insert语句是将表中所有字段都列出来,然 ...

  10. Epson 微型打印机打印 LOGO C&num;

    由于项目需要使用EPSON微型打印机打印LOGO,在网上查看了很多都是安装驱动然后设置打印机图片. 项目需要使用Bytes发送流,最后在网上找到了一些资料,记录下来方便自己和其他人使用. public ...