wow.js和animate.css,添加纯js和css的动画特效

2024-01-15 06:19| 来源: 网络整理| 查看: 265

wowjs的使用方式例： ** 需要的动画里面 class 里面添加 wow 然后在添加动画样试 bounceInDown **

方式一：

第一步：安装 cnpm install wowjs --save-dev第二步：在 main.js 中引入 css 样式 ‘import ‘wowjs/css/libs/animate.css’’第三步：在组件中使用

import { WOW } from 'wowjs' mounted() { var wow = new WOW({ boxClass: "wow", //需要执行动画的元素的 class animateClass: "animated", // animation.css 动画的 class offset: 0, // 距离可视区域多少开始执行动画 mobile: true, // 是否在移动设备上执行动画 live: true // 异步加载的内容是否有效 }) wow.init(); }, // 或者 methods: { initWowAnimate() { const wow = new WOW({ boxClass: "wow", //需要执行动画的元素的 class animateClass: "animated", // animation.css 动画的 class offset: 0, // 距离可视区域多少开始执行动画 mobile: true, // 是否在移动设备上执行动画 live: false // 异步加载的内容是否有效 }) wow.init() } } watch: { $route(to, from) { if (to) { console.log('路由改变了----》', to) this.$nextTick(() => { this.initWowAnimate() }) } } ———————————————— 版权声明：本文为CSDN博主「cs_dn_Jie」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/cs_dn_Jie/article/details/112374251

方式二：

第一步：安装 cnpm install wowjs --save-dev第二步：在 main.js 中引入 css 样式 ‘import ‘wowjs/css/libs/animate.css’’第三步：在 main.js 中挂载 wow ‘Vue.prototype.WOW=wow"第四步：在使用页面初始化中的mounted函数中初始化'new this.wow.WOW().init()'　　

import { WOW } from 'wowjs' mounted() { new this.$wow.WOW().init() },

参数可写可不写data-wow-duration=‘2s’（动画持续时间)

data-wow-delay=‘1s’（动画延迟时间）

data-wow-offset=‘100’（元素的位置露出后距离底部多少像素执行）

data-wow-iteration=‘10’（动画执行次数）这四个属性可选可不选。————————————————

原文链接：https://blog.csdn.net/cs_dn_Jie/article/details/112374251

方式三：

　　头部引用animate.css。底部引入wow.jsWi且初始化一下

　　　　　　new WOW().init(); 　　

如需自动以配置，如下使用：

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

注意new WOW().init();中的WOW要大写，否则就没效果了。

【配置】

属性/方法类型默认值说明 boxClass 字符串 ‘wow’ 需要执行动画的元素的 class animateClass 字符串 ‘animated’ animation.css 动画的 class offset 整数 0 距离可视区域多少开始执行动画 mobile 布尔值 true 是否在移动设备上执行动画 live 布尔值 true 异步加载的内容是否有效

例：

wow 必加 slideInLeft就是说明动画样式。（下面有其他效果说明） data-wow-duration（动画持续时间） data-wow-delay（动画延迟时间） data-wow-offset（元素的位置露出后距离底部多少像素执行） data-wow-iteration（动画执行次数）无限次：infinite 这四个属性可选可不选。

wow rollIn 从左到右、顺时针滚动、透明度从100%变化至设定值 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 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

fullpage.js和wow.js

有的网站采用全屏滚动的fullpage插件与wow相结合的方法，实现的效果比较酷炫。我们完全可以仿写。

但是使用fullpage.js下wow.js无效失效没动作

问题出在fullpage隐藏了滚动条,将滚动条开启即可,把scrollBar设置为true,代码如下　　$(‘#fullpage‘).fullpage({　　　　scrollBar:true；　　});最后利用css将滚动条隐藏,将html添加overflowhidden，代码如下　　html{

　　　　overflow:hidden;

　　}

原文摘自：https://www.cnblogs.com/linjiu0505/p/10605543.html

原文摘自：http://www.mamicode.com/info-detail-2286884.html

【本文地址】

公司简介

联系我们