效果展示

官网效果：官网demo
实现效果：

官网文档

Animate.css官网
GitHub-animate-css

1）介绍：
Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
即Animate.css 是一个随时可用的跨浏览器动画库，可在 Web 项目中使用。非常适合强调、主页、滑块和注意力引导提示。
2）动画效果：
在官网右侧（绿色框中的内容）是动画效果的选择，选择相应动画后中间的“Animate.css”会出现相应动画，在后面可以通过复制动画名在项目中实现相同动画的执行

WOW.js官网
GitHub-wow-js

1）介绍：
在向下滚动页面时显示 CSS 动画。默认情况下，可以使用它来触发动画.css动画。同时也可以轻松地将设置更改为喜欢的动画库。安装起来非常简单，但是需要与animate.css配合使用
2）效果：
官网demo

实现步骤

1、下载WOW.js 和 Animate.css

npm-wowjs
npm-animate.css

//animate.css
npm install animate.css --save
//wow.js
npm install wowjs

2、代码编写

说明：
为想要添加动画效果的元素添加一个类名（默认为wow，也可以自己定义），再添加相应动画的动画名（动画名到animate官网查看，上面有写到哦）
实例：

 <img src="" class="wow fadeInUp" />//最开始我是用className写的所以没有效果

WOW.js的使用：

 var wow = new WOW({boxClass: 'wow',      // 动画元素的类名 (默认为 wow)animateClass: 'animated', // animate.css的类名 (默认为 animated)offset: 0,          // 距离元素多少距离执行 (默认为 0)mobile: true,       // 是否在移动设备执行动画 (默认为 true)live: true,       // 是否异步加载内容 (默认为 true)});wow.init();

实现代码：

import React from 'react'
import { Link } from "react-router-dom";
import { Row, Col , Typography} from 'antd';
import '../../../../../../node_modules/wowjs/css/libs/animate.css'
// ↑ 这里需要找到相对路径 ， 直接import 'animate.css'没有效果
import { WOW } from 'wowjs'const { Paragraph } = Typography;
export default function () {var wow = new WOW({boxClass: 'wow',    animateClass: 'animated', offset: 0,        mobile: true,      live: true,       });wow.init();return (<div style={{ maxWidth: 1160, margin: '0 auto' }} className='paragraph'><div><Row><Col xs={24} md={12} xl={12}><div style={{ margin: '0 auto', maxWidth: '400px' }}><Link to='/front/service'><img src="./pic/home1.jpg" class="wow fadeInUp" data-wow-delay="100ms" alt="" style={{ maxWidth: '220px', marginLeft: '20%', marginTop: "15%" }} /></Link><Paragraph class="wow fadeInUp" data-wow-offset="50" data-wow-delay="200ms" style={{ fontSize: '15px', textAlign: 'center', maxWidth: '400px', margin: '0 auto', color: '#676B69' }}>云集各类书画、摄影精品，亦租亦售，为您的商务、居家<br />提供雅致的装饰，提升文化内涵。</Paragraph></div></Col><Col xs={24} md={12} xl={12}><div style={{ margin: '0 auto', maxWidth: '400px' }}><Link to='/front/service'><img src="./pic/home2.jpg" class="wow fadeInUp" data-wow-delay="300ms" alt="" style={{ maxWidth: '220px', marginLeft: '20%', marginTop: "15%" }} /></Link><Paragraph class="wow fadeInUp" data-wow-offset="50" data-wow-delay="600ms" style={{ fontSize: '15px', textAlign: 'center', maxWidth: '400px', margin: '0 auto', color: '#676B69' }}>基于智能算法，为每⼀幅艺术品⽣成唯⼀认证码，保护<br />每⼀位作者的版权，延伸每⼀幅作品的价值。</Paragraph></div></Col></Row></div></div>)
}

属性设置：

属性	说明
data-wow-duration	更改动画持续时间
data-wow-delay	动画延迟开始
data-wow-offset	启动动画的距离（与浏览器底部相关）
data-wow-iteration	动画重复的次数

这里通过设置多个元素延迟执行的时间以达到视觉上起伏的效果

这样就实现了滚轮到相应位置出现动画执行的效果
文章有问题的地方欢迎大家评论指出！

react基于WOW.js和Animate.css实现特定位置的动画执行相关推荐

wow.js结合animate.css实现滚动页面触发animate动画效果
animate.css http://www.swiper.com.cn/ wow.js https://wowjs.uk/docs.html https://github.com/graingert ...
使用wow.js和animate.css实现页面滚动动画效果
wow.js是一款结合了Animate.css,可以在页面向下滚动时,为页面中的元素加载动画的js. 项目地址:GitHub - graingert/WOW: Reveal CSS animation ...
wow.js+animate.css实现滚动加载动画
迅雷官网有这种效果: 迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业,公司成立于2003年,基于深耕十几年.获得国际专利的P2SP下载加速技术优势,面向个人用户和企业用户打造了丰富的下 ...
3 css 奖品出现弹出动画_【技术】nuxt中引入wow和animate.css 页面随滚动条出现动画...
1. 通过nodejs安装 cnpm install wowjs --save-dev 安装成功后在"package.json: "wowjs": "^1.1. ...
js实现截取网页上特定位置的图片打印或保存
js实现截取网页上特定位置的图片打印或保存一.实现思路具体思路是创建一个宽和高都是100%的canvas,使其能够覆盖整个页面,然后根据所要截取的图片起始位置相对于canvas的位置(因为是1 ...
Nuxtjs上使用wow.js+animate.css实现滚动加载动画
最近做个官网(技术栈使用Nuxt)需要用到滑动到可视区域才触发动画效果,几乎所有的页面都要"动"起来,手写要累死的节奏,赶紧寻找工具!发现wow.js+animate.css可以满 ...
【技术】nuxt中引入wow和animate.css随页面滚动出现动画
通过nodejs安装 cnpm install wowjs --save-dev 安装成功后:"package.json "wowjs": "^1.1.3&qu ...
Vue 分别使用过渡类名 animate.css 钩子函数等实现动画效果
1. 使用过渡类名实现动画 v-enter: 进入之前元素的起始状态,还没有进入 v-enter-to: 定义进入过渡的结束状态 v-enter-active:定义进入过渡生效时的状态 v-leave ...
3D星球动画html,基于Three.js实现的3D土星（星球）动画
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 function getMat(color) { // our material is a phong ma ...

react基于WOW.js和Animate.css实现特定位置的动画执行

文章目录