前端动画 wow.js 效果

让花里胡哨的特效变简单

wow.js动画class介绍

引入css样式以及js插件

<link rel="stylesheet" type="text/css" href="./css/animate.min.css">
<script src="./js/wow.min.js"></script>
<script>
new WOW().init();
</script>

wow rollIn从左到右、顺时针滚动、透明度从100%变化至设定值

 

wow fadeInDown

wow fadeInUp

wow fadeInLeft

wow fadeInRight

 

 从上往下、类似淡入淡出

从下往上、 类似淡入淡出

从左往右、类似淡入淡出

从右往左、类似淡入淡出

wow bounceIn从原位置出现,由小变大超出设定值,再变小小于设定值,再回归设定值、透明度从100%变化至设定值
wow bounceInUp从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
wow bounceInDown从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
wow bounceInLeft从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
wow bounceInRight从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
  
wow slideInUp
从下往上、上来后固定到设定位置、透明度为设定值不变(up是从下往上)(如果元素在最下面,会撑开盒子高度)


wow slideInDown从上往下、上来后固定到设定位置、透明度为设定值不变
wow slideInLeft从左往右、上来后固定到设定位置、透明度为设定值不变(left却是从左往右)
wow slideInRight从右往左、上来后固定到设定位置、透明度为设定值不变
  
wow lightSpeedIn从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度从100%变化至设定值
wow pulse原位置放大一点点在缩小至原本大小、透明度为设定值不变(配合动画执行次数属性效果更佳)
wow flipInX原位置后仰前栽、透明度从100%变化至设定值
wow flipInY原位置左右旋动、透明度从100%变化至设定值
wow bounce上下抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖)
wow shake左右抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖)
wow swing从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度为设定值不变
wow bounceInU原位置不变、直接从不显示到显示(无过过渡效果)
wow wobble原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变
  
  

例:

<li class="wow bounceInLeft"     data-wow-duration="1s"       data-wow-delay="1s"          data-wow-offset="70"      data-wow-iteration="1">

</li>

data-wow-duration(动画持续时间)、

data-wow-delay(动画延迟时间)、

data-wow-offset(元素的位置露出后距离底部多少像素执行)、

和data-wow-iteration(动画执行次数)

转载于:https://www.cnblogs.com/caopeng/p/11194827.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/569126.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Clob类型转换为String

SQL CLOB 是内置类型&#xff0c;它将字符大对象存储为数据库表某一行中的一个列值&#xff0c;使用CHAR来存储数据&#xff0c;如XML文档。 如下是一个Clob转换为String的静态方法&#xff0c;可将其放在自己常用的工具类中&#xff0c;想直接用的话&#xff0c;自己稍作修改即…

Java 将Word转为PDF、PNG、SVG、RTF、XPS、TXT、XML

同一文档在不同的编译或阅读环境中&#xff0c;需要使用特定的文档格式来打开&#xff0c;通常需要通过转换文档格式的方式来实现。下面将介绍在Java程序中如何来转换Word文档为其他几种常见文档格式&#xff0c;如PDF、图片png、svg、xps、rtf、txt、xml等。 使用工具&#xf…

CentOS7上GitLab的使用

生成SSH Keys 生成root账号的ssh key # ssh-keygen -t rsa -C "adminexample.com" 显示pub key的值 # cat ~/.ssh/id_rsa.pub 复制显示出来的 pub key 以root账号登陆gitlab&#xff0c;点击 "profile settings" 然后点击 "SSH Keys" 将复制的pu…

数据与计算机通信复习重点

数据与计算机通信讲义 第一次课 网络概论 自我介绍 主要承担网络方向课程教学&#xff1a;计算机网络、网络程序设计等 负责课程设计、工程实训等实践教学组织&#xff1a;程序设计基础实训、OS课设、程序设计综合实训 课程安排 课程性质 理论课46学时&#xff0c;限选、考试、…

数据库:除运算

除运算 设关系R除以关系S的结果为关系T&#xff0c;则T包含所有在R但不在S中的属性及其值&#xff0c;则T的原则与S的元组的所有组合都在R中。用象集来定义除法&#xff1a;给定关系R&#xff08;X&#xff0c;Y&#xff09;和S&#xff08;Y&#xff0c;Z&#xff09;。其中X&…

[图解tensorflow源码] 入门准备工作附常用的矩阵计算工具[转]

[图解tensorflow源码] 入门准备工作附常用的矩阵计算工具[转] Link: https://www.cnblogs.com/yao62995/p/5773142.html tensorflow使用了自动化构建工具bazel、脚本语言调用c或cpp的包裹工具swig、使用EIGEN作为矩阵处理工具、Nvidia-cuBLAS GPU加速计算库、结构化数据存储格式…

现共收到 5 个分组,其目的地址分别为: (1) 128.96.40.10 (2) 128.96.41.12 (3) 128.96.41.151 (4) 192.4.123.17 (5) 192.4.

计算目的地址的下一跳&#xff1a; 设某路由器建立了如表 1 所示路由表。现共收到 5 个分组&#xff0c;其目的地址分别为&#xff1a;(1) 128.96.40.10(2) 128.96.41.12(3) 128.96.41.151(4) 192.4.123.17(5) 192.4.123.90试分别计算下一跳解答&#xff1a; 用目的IP地址和路由…

衡量模块独立性的两个定性标准

衡量模块独立性的两个定性标准- 耦合&#xff1a;- 内聚内聚和耦合 模块的独立程度可以由两个定性标准衡量&#xff0c;这两个标准分别是内聚和耦合。 耦合衡量不同模块彼此间互相依赖&#xff08;连接&#xff09;的紧密程度&#xff1b;内聚衡量一个模块内部各个元素彼此结合…

【转】Docker学习_本地/容器文件互传(5)

1、查找所有容器 #docker ps a 2、找出我们想要的容器名字并查找容器长ID #docker inspect -f {{.ID}} python 3、拷贝本地文件到容器 docker cp 本地路径 容器长ID:容器路径docker cp /Users/xubowen/Desktop/auto-post-advance.py 38ef22f922704b32cf2650407e16b146bf61c221…

数据流图典型例题

数据流图典型例题 1.假设一家工厂的采购部每天需要一张订货报表&#xff0c;报表按零件编号排序&#xff0c;表中列出所有需要再次订货的零件。对于每个需要再次订货的零件应该列出下列数据&#xff1a;零件编号、零件名称、订货数量、目前价格、主要供应商、次要供应商。零件…

对称机密算法与非对称机密算法

1、对称加密算法&#xff0c; 加密和解密用的是同一个密钥&#xff0c;常见的为AES算法。缺点&#xff1a;秘钥才传输过程中可能被截取&#xff0c;存在安全问题&#xff0c; 2、非对称加密算法&#xff0c;常见的为RSA算法&#xff0c;它不是像对称机密的算法&#xff0c; 双方…

白盒测试的逻辑覆盖辨析(语句覆盖、判定覆盖、条件覆盖、判定/条件覆盖、条件组合覆盖)

白盒测试逻辑覆盖&#xff08;语句覆盖、判定覆盖、条件覆盖、判定/条件覆盖、条件组合覆盖&#xff09; 逻辑覆盖测试&#xff1a; 语句覆盖&#xff1a;每条语句至少执行一次判定覆盖&#xff1a;每一判定的每个分支至少执行一次条件覆盖&#xff1a;每一判定中的每个条件&…

03 CSS听课笔记

CSS&#xff1a;页面美化和布局控制 1. 概念&#xff1a; Cascading Style Sheets 层叠样式表层叠&#xff1a;多个样式可以作用在同一个html的元素上&#xff0c;同时生效 2. 好处&#xff1a;(1)功能强大(2)将内容展示和样式控制分离   * 降低耦合度。解耦   * 让分工协作…

安装MySQL时出现“服务没有响应控制功能。请键入 NET HELPMSG 2186 以获得更多的帮助。”的问题解决

安装MySQL时出现“服务没有响应控制功能”的问题解决第一步&#xff1a;设置环境变量第二步&#xff1a;初始化my.ini第三步&#xff1a;添加文件第一步&#xff1a;设置环境变量 安装MySQL时&#xff0c;运行“net start mysql”时出现“服务没有响应控制功能。请键入 NET HE…

vue-cli webpack 引入jquery

今天费了一下午的劲&#xff0c;终于在vue-cli 生成的工程中引入了jquery&#xff0c;记录一下。(模板用的webpack) 首先在package.json里的dependencies加入"jquery" : "^2.2.3"&#xff0c;然后install 在webpack.base.conf.js里加入 var webpack requi…

时间序列模型——ARIMA模型实现预测

ARIMA模型和因子预测 文章目录ARIMA模型和因子预测一、ARIMA模型&#xff08;整个周期&#xff09;1.数据预处理2.展示时序图2.数据建模&#xff08;1&#xff09;差分d&#xff08;2&#xff09;p和q&#xff08;3&#xff09;选择模型&#xff08;4&#xff09;检验残差序列&…

线段树 离散化

题目一&#xff1a;E. Infinite Inversions 这个题目没什么思维量&#xff0c;还比较简单&#xff0c;就是离散化要加上每一个值的后面一个值&#xff0c;然后每一个值放进去的不是1 &#xff0c;而是这个值与下一个点的差值。 因为这个数代表了一堆数&#xff0c;然后每一次的…

时序模型——如何用Python进行时序模型预测的baseline预测(简单规则)

时序模型——如何用Python进行时序模型预测的baseline预测&#xff08;简单规则&#xff09; 在对时间序列问题进行建模预测之前&#xff0c;通常可以通过一些简单的规则对结果进行提前的预测&#xff0c;可以作为baseline&#xff0c;供之后的模型进行参考。很多数据分析的比…

国内一些大公司的开源项目

http://www.open-open.com/lib/view/open1377700292339.html 阿里 阿里的开源项目很多&#xff0c;这也跟淘宝正明的开源态度密不可分。有很多重量级的项目&#xff0c;例如LVS、Tengine&#xff0c;或者很有实践价值的中间件&#xff0c;例如 MetaQ(分布式消息系统)、dubbo(RP…

简单关联规则算法例题-9个顾客的编号为(T1,T2,T3,T4,T5,T6,T7,T8,T9),每一个顾客购买的商品记录{{I1,I2,I5}...},并使用python实现简单关联规则

题目&#xff1a; 简单关联规则算法例题-9个顾客的编号为&#xff08;T1,T2,T3,T4,T5,T6,T7,T8,T9&#xff09;,每一个顾客购买的商品记录{{I1,I2,I5},{I2,I4},{I2,I3},{I1,I2,I4},{I1,I3},{I2,I3},{I1,I3},{I1,I2,I3,I5},{I1,I2,I3}}&#xff0c;求频繁项集&#xff1b;并用py…