【前端】使用wow.js这个插件（实现页面动画效果），提高前端开发效率。

1.简介

有的页面在向下滚动的时候，有些元素会产生细小的动画效果。比如需要做到滚动条滑到某个位置时，才能显示动画。
wow.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。

2.兼容性

在这里插入图片描述

IE6、IE7 等老浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

3.如何使用？

1、wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css。

<link rel="stylesheet" type="text/css" href="css/animate.min.css">

2、在最底部或引入的css下面引用wow.js或者wow.min.js，然后再下面再写一行javascript代码。（无需引用jquery）

<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">new WOW().init();//WOW要大写
</script>

如果需要自定义配置，可如下使用：

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

相关参数说明：
在这里插入图片描述

3、写html代码（必须设置为块状或者行内块状），并添加class类名。

<div class="wow slideInLeft"></div>

另外可以加入 data-wow-duration（动画持续时间）、 data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）、data-wow-iteration（动画执行次数）属性 （可选可不选），如：

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>

下表为部分对应类名及其效果：

类名动画效果
wow slideInUp从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）
wow slideInDown从上往下、上来后固定到设定位置、透明度为设定值不变
wow slideInLeft从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）
wow slideInRight从右往左、上来后固定到设定位置、透明度为设定值不变
wow rollIn从左到右、顺时针滚动、透明度从100%变化至设定值
wow bounceIn从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值
wow bounceInUp从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
wow bounceInDown从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
wow bounceInLeft从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
wow bounceInRight从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
wow lightSpeedIn从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
wow pulse原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
wow flipInX原位置后仰前栽、透明度从100%变化至设定值
wow flipInY原位置左右旋动、透明度从100%变化至设定值
wow bounce上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow shake左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow swing从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
wow bounceInU原位置不变、直接从不显示到显示（无过过渡效果）
wow wobble原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

测试–示例：

<!DOCTYPE html>
<html>
<head><title>wow演示</title><meta charset="utf-8"><!-- 1.引入wow依赖的animate.css --><link href="css/animate.css" rel="stylesheet" type="text/css"><!-- 2.引入wow.js 文件 --><script type="text/javascript" src="js/wow.js"></script><!-- 3.now 对象 --><script type="text/javascript">new WOW().init();// 可选的参数// wow = new WOW({//     boxClass:     'wow', 		//WOW.js需要执行动画的元素的class    //     animateClass: 'animated',   //animation.css 动画的 class//     offset:       0,            //距离可视区域多少开始执行动画    //     mobile:       true,  		//是否在移动设备上执行动画     //     live:         true        	//异步加载的内容是否有效// })// wow.init();</script>
</head>
<body><div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s" data-wow-offset="1000"  data-wow-iteration="1" style="width: 500px;height: 1000px;background-color: #ccc;position: absolute;left: 50%;margin-top: 0px;margin-left: -250px;margin-bottom: 50px">wow 动画演示</div>	</body>
</html>

4.备注

4.1 下载地址：animate.css：https://github.com/matthieua/WOW
或者打开链接: https://pan.baidu.com/s/1JPXqAYLj4zKazwDhbBELGQ?pwd=qxtx 提取码: qxtx 获取Wow的css和js包。
4.2 动画效果展示网站：https://daneden.github.io/animate.css/
4.3 参考 演示地址 http://www.dowebok.com/131.html

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

vue中引入及使用wow.js

vue中引入及使用wow.js

1. 安装 npm install wowjs --save (animate.css会被自动安装&#xff0c;但是这里有坑) 2. 在main.js中引入animate.css 引入时需要注意看是引入的哪个animate.css文件&#xff0c;在后面有详细讲解。 3. 引入wow.js并初始化 这里方法有二 方法1 在main.js中添加 impor…
阅读更多...
http://bbs.duowan.com/forum.php,多玩论坛宣告关闭 国内游戏社区又少一个

http://bbs.duowan.com/forum.php,多玩论坛宣告关闭 国内游戏社区又少一个

2019年的今天还有人上论坛吗&#xff1f;有是肯定有的&#xff0c;但是论坛在国内的发展情况是注定的了&#xff0c;最近几年来大大小小的网站都关闭过旗下的论坛。今天没注意&#xff0c;很有名的多玩也宣布关闭论坛&#xff0c;今年12月31日后停止服务。 多玩之前、现在都是国…
阅读更多...
Lottery抽奖项目第二章第二节：搭建DDD四层结构

Lottery抽奖项目第二章第二节：搭建DDD四层结构

搭建DDD四层结构 DDD&#xff1a;Domain Driven Design 描述&#xff1a;基于DDD架构构建&#xff0c;初始化搭建工程结构 本节是陆续搭建系统和编码的开始&#xff0c;我们会优先完成一个基础工程的创建。一般在互联网企业这部分工作可能不需要反复处理&#xff0c;只需要在…
阅读更多...
企业如何通过CRM来提高销售业绩？

企业如何通过CRM来提高销售业绩？

在当今市场环境中&#xff0c;客户的需求更偏向于个性化&#xff0c;企业面对的竞争更加激烈。如何有效地获取和维护客户&#xff0c;提高收入成为了企业的核心问题。作为一种强大的销售管理工具&#xff0c;CRM如何提高销售业绩&#xff1f; 提高客户转化率&#xff1a; 企业…
阅读更多...
LSA

LSA

Type-7 LSA : NSSA External LSA NSSA&#xff08;非完全末梢区域Not-So-Stubby Area)我们可以理解为从Stub Area衍生而来&#xff0c;StubArea是不允许外部路由进入的&#xff0c;而NSSA可以。当NSSA的ASBR向该区域注入外部路由时&#xff0c;这些外部路由将使用Type-7 LSA来描…
阅读更多...
SD 总线引脚介绍

SD 总线引脚介绍

参考 https://www.cnblogs.com/justin-y-lin/p/12259851.html SD卡与TF卡的引脚定义 - 360文档中心
阅读更多...
PostgreSQL分区表

PostgreSQL分区表

什么是分区表 数据库分区表将表数据分成更小的物理分片&#xff0c;以此提高性能、可用性、易管理性。分区表是关系型数据库中比较常见的对大表的优化方式&#xff0c;数据库管理系统一般都提供了分区管理&#xff0c;而业务可以直接访问分区表而不需要调整业务架构&#xff0c…
阅读更多...
Qt5.15.2+VLC3.0.14学习笔记（六）Qt Player测试（官方示例 vlc-qt+mingw_64版）

Qt5.15.2+VLC3.0.14学习笔记（六）Qt Player测试（官方示例 vlc-qt+mingw_64版）

前记&#xff1a; Qt Player是官方源码中的一个示例&#xff0c;好像已经很久没有更新了&#xff0c;今天运行测试了下&#xff0c;需要修改部分内容才能运行 vlc-3.0.14源码下载地址&#xff1a;https://code.videolan.org/videolan/vlc 已下载源码包 win下已编译的VLC下载…
阅读更多...
UE4/5在蓝图细节面板中添加函数按钮（蓝图与c++的方法）

UE4/5在蓝图细节面板中添加函数按钮（蓝图与c++的方法）

目录 在细节面板中添加按钮使用函数 蓝图的方法 事件 函数 效果 uec的方法 效果 在细节面板中添加按钮使用函数 很多时候&#xff0c;我们可以看到一些插件的actor类中&#xff0c;点击一下之后就可以实现如矩阵一样的效果。 实际上是因为其使用了函数来修改了蓝图中的数…
阅读更多...
github上十二款最著名的Android播放器开源项目

github上十二款最著名的Android播放器开源项目

1.ijkplayer 项目地址&#xff1a; https://github.com/Bilibili/ijkplayer 介绍&#xff1a;Ijkplayer 是Bilibili发布的基于 FFplay 的轻量级 Android/iOS 视频播放器。实现了跨平台功能&#xff0c;API 易于集成&#xff1b;编译配置可裁剪&#xff0c;方便控制安装包大小&a…
阅读更多...
iOS 处理HLS视频流

iOS 处理HLS视频流

一、HLS介绍 HLS是苹果主导的音视频传输协议&#xff0c;其主要的格式是一个索引文件(M3U8) ts分片的视频文件。 HLS的优势是iOS系统天然支持&#xff0c;通过Http 80传输&#xff0c;规避了常规的防火墙问题。 视频的分片方便服务器CDN对视频文件分发缓存。 HLS支持视频点播和…
阅读更多...
Typecho开启全站Pjax

Typecho开启全站Pjax

原文地址&#xff1a;Typecho开启全站Pjax 前言 因为上次更新后加入民音乐插件&#xff0c;但是有个问题就是在页面跳转的时候由于页面已经刷新了&#xff0c;所以音乐就不会继续播放了&#xff0c;就想着去引入Pjax来解决这个问题&#xff0c;同时引入pjax后比较直观的改变就…
阅读更多...
rk3588编译Ubuntu固件，Linux SDK开发

rk3588编译Ubuntu固件，Linux SDK开发

基础认知 Linux SDK 是由 Firefly 官方提供的 Linux 软件开发工具包&#xff0c;旨在方便用户基于其进行模块开发与系统定制。 SDK 目录树 各个芯片平台的 Linux SDK 目录树可能略有差异&#xff0c;但一般如下&#xff1a; ├── app # 存放上层应用 app,主要是 qcamera/qf…
阅读更多...
RK3568开发笔记（五）：在虚拟机上使用SDK编译制作uboot、kernel和ubuntu镜像

RK3568开发笔记（五）：在虚拟机上使用SDK编译制作uboot、kernel和ubuntu镜像

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/127783966 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…
阅读更多...
Uniapp集成熊猫播放器

Uniapp集成熊猫播放器

先源码分析 后续增加集成的例子 相关链接 官方文档：https://www.yuque.com/lahuayouyiliushuiwuqing/csqxe2插件地址：https://ext.dcloud.net.cn/plugin?id=6715 源码分析删掉不需要的组件 不知道路径问题
阅读更多...
wordpress html音乐,【WordPress插件】QPlayer音乐播放器插件html5音乐插件

wordpress html音乐,【WordPress插件】QPlayer音乐播放器插件html5音乐插件

音乐播放器&#xff0c;这个大家不陌生了&#xff0c;wordpress也是可以直接插入的&#xff0c;但是不够美观&#xff0c;而且只支持本地的&#xff0c;今天给大家推荐一款自动解析各大音乐网站的播放器&#xff0c;界面美观&#xff0c;支持歌词显示。 使用方法&#xff1a; D…
阅读更多...
QPlayer2-资源网各大程序背景音乐插件

QPlayer2-资源网各大程序背景音乐插件

介绍&#xff1a; QPlayer2一款简洁小巧的HTML5底部悬浮音乐播放器&#xff0c;支持网易云音乐解析&#xff0c;由GitHub用户Jrohy开发&#xff0c;最新版本为v1.3.4.2&#xff0c;更新于三年前&#xff0c;已不再更新。 如今&#xff0c;MoeShin将代码优化后制成QPlayer2&…
阅读更多...
三款QPlayer2-背景音乐插件

三款QPlayer2-背景音乐插件

简介&#xff1a; 一款简洁小巧的 HTML5 底部悬浮音乐播放器&#xff0c;支持云音乐&#xff0c;现已支持WordPress、Typecho、Z-Blog。 网盘下载地址&#xff1a; http://kekewangLuo.net/iTqbm3fJQ6y0 图片&#xff1a;
阅读更多...
week6刷题

week6刷题

题解: 使用二分查找 class Solution { public:int minArray(vector<int>& numbers) {int low 0;int high numbers.size() - 1;while (low < high) {int pivot low (high - low) / 2;if (numbers[pivot] < numbers[high]) {high pivot;}else if (numbers…
阅读更多...
[组图]一切从零开始 Symbian智能机之软件入门（转）

[组图]一切从零开始 Symbian智能机之软件入门（转）

购买NOKIA智能手机的朋友们会发现&#xff0c;NOKIA采用的是一种叫做Symbian的操作系统。Symbian由摩托罗拉、西门子、诺基亚等几家大型移动通讯设备商共同出资组建的一个合资公司&#xff0c;专门研发手机操作系统。而Symbian操作系统的前身是EPOC&#xff0c;而EPOC是Electro…
阅读更多...
最新文章

Copyright @ 2022~2023