Vue+wow.js+animate.css实现动画效果

🕗 发布于 2024-03-15 05:06 javascript vue.js css

1.介绍

Wow.js 是一个轻量级的 JavaScript 库，用于在网页滚动时实现动画效果。基于 CSS3 的动画库 Animate.css，并通过触发 CSS 动画类来创建各种引人注目的过渡和动画效果。

使用 Wow.js，可以很容易地为网页中的元素添加动画效果，比如淡入、滑入、缩放等。当用户滚动到指定位置时，Wow.js会自动触发相应的动画效果，为用户提供更加流畅和有趣的浏览体验。

Wow.js 的优点在于简单易用，只需几行代码即可实现各种动画效果，并且支持自定义动画样式和回调函数。这使得 Wow.js 成为开发人员和设计师们在构建交互式网页时的有力工具，为用户提供更加吸引人的视觉效果。

2.wow.js官网地址wow.js

3.效果展示

（觉得官网动画很有意思，搬运过来了哈哈哈）

vue+wowjs+animate动画

4.npm下载资源


npm install wowjs --save-dev
npm install animate.css --save

5.为了方便后期修改动画animate.css代码，可以将node_modules/wowjs/libs/animate.css复制到assets/css/animate.css里面

在这里插入图片描述

5.mian.js引入

// 引入animate.css
import 'animate.css'
// import animated from 'wowjs/css/libs/animate.css';//不需要后期修改动画可以直接使用该代码
import animated from './assets/css/animate.css';
//这里需要将样式用起来，
Vue.use(animated);

6.实现，元素隐藏2秒后显示且加载动画。使用的swing动画效果需要在0%和20%的时候添加opcity属性，先隐藏再显示
在这里插入图片描述

<template>
 <div
      class="textClass wow swing"
      data-wow-duration="2s"
      data-wow-delay="2s"
      style="visibility: hidden;animation-delay: 2s; animation-name: swing;"
    >
      <img
        class=""
        src="https://wowjs.uk/img/wow-logo.jpg"
        style="width: 86%;"
      />
    </div>
    <template/>
    <script>
import { WOW } from "wowjs";//在需要动画的页面引入
export default {
  name: "wows",
  components: {},
  data() {
    return {};
  },
  onload() {
    console.log(123);
  },
  mounted() {
    let wow = new WOW({
      boxClass: "wow", //需要执行动画的元素的 class
      animateClass: "animated", //animation.css 动画的 class
      offset: 150, //距离可视区域多少开始执行动画
      mobile: true, //是否在移动设备上执行动画
      live: true //异步加载的内容是否有效
    });
    wow.init();
  }
};
</script>
<style scoped>
.span3 {
  flex: 1;
  display: flex;
  justify-content: center;
}

.textClass {
  /* height: 80vw; */
  /* background-color: lightblue; */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 15vw;
}
</style>

7.完整效果代码

<template>
  <div>
    <div
      class="textClass wow swing"
      data-wow-duration="2s"
      data-wow-delay="2s"
      style="visibility: hidden;animation-delay: 2s; animation-name: swing;"
    >
      <img
        class="againBtnBox_img"
        src="https://wowjs.uk/img/wow-logo.jpg"
        style="width: 86%;"
      />
    </div>
    <div class="container111 circles">
      <div class="row">
        <div
          data-wow-delay="0.5s"
          class="span3 wow rollIn"
          style="visibility: visible; animation-delay: 0.5s; animation-name: rollIn;"
        >
          <p class="circle bg-green">such easy</p>
        </div>
        <div
          data-wow-delay="0.5s"
          class="span3 wow bounceInDown center"
          style="visibility: visible; animation-delay: 0.5s; animation-name: bounceInDown;"
        >
          <img
            src="https://wowjs.uk/img/wow-1.gif"
            height="100"
            class="wow animated"
            style="visibility: visible;height: 25vw;"
          />
        </div>

        <div
          data-wow-delay="0.5s"
          class="span3 wow lightSpeedIn"
          style="visibility: visible; animation-delay: 0.5s; animation-name: lightSpeedIn;"
        >
          <p class="circle bg-green">very ES</p>
        </div>
      </div>
      <div class="row">
        <div
          class="span3 wow rollIn center"
          style="visibility: visible; animation-name: rollIn;"
        >
          <img
            src="https://wowjs.uk/img/wow-3.gif"
            height="100"
            style="height: 25vw;"
          />
        </div>
        <div
          data-wow-iteration="5"
          data-wow-duration="0.15s"
          class="span3 wow pulse"
          style="visibility: visible; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: pulse;"
        >
          <p class="circle bg-green">WOW</p>
        </div>
        <div
          class="span3 wow bounceInRight center"
          style="visibility: visible; animation-name: bounceInRight;"
        >
          <img
            src="https://wowjs.uk/img/wow-12.gif"
            height="100"
            style="height: 25vw;"
          />
        </div>
      </div>
      <div class="row">
        <div
          class="span3 wow bounceInLeft"
          style="visibility: visible; animation-name: bounceInLeft;"
        >
          <p class="circle bg-green">no jquery</p>
        </div>
        <div
          class="span3 wow flipInX center"
          style="visibility: visible; animation-name: flipInX;"
        >
          <img
            src="https://wowjs.uk/img/wow-2.gif"
            height="100"
            style="height: 25vw;"
          />
        </div>
        <div
          class="span3 wow bounceInRight"
          style="visibility: visible; animation-name: bounceInRight;"
        >
          <p class="circle bg-green">many anims</p>
        </div>
      </div>
      <div class="row">
        <div
          class="span3 wow rollIn center"
          style="visibility: hidden; animation-name: none;"
        >
          <img
            src="https://wowjs.uk/img/wow-5.gif"
            height="100"
            style="height: 25vw;"
          />
        </div>
        <div
          data-wow-iteration="5"
          data-wow-duration="0.15s"
          class="span3 wow shake"
          style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;"
        >
          <p class="circle bg-green">aint GPL</p>
        </div>
        <div
          data-wow-iteration="2"
          class="span3 wow swing center"
          style="visibility: hidden; animation-iteration-count: 2; animation-name: none;"
        >
          <img
            src="https://wowjs.uk/img/wow-6.gif"
            height="100"
            style="height: 25vw;"
          />
        </div>
      </div>
      <div class="row">
        <div
          class="span3 wow rollIn"
          style="visibility: hidden; animation-name: none;"
        >
          <p class="circle bg-green">how small</p>
        </div>
        <div
          data-wow-delay="0.5s"
          class="span3 wow bounceInUp center"
          style="visibility: hidden; animation-delay: 0.5s; animation-name: none;"
        >
          <img
            src="https://wowjs.uk/img/wow-10.gif"
            height="100"
            style="height: 25vw;"
          />
        </div>
        <div
          data-wow-delay="0.5s"
          data-wow-duration="0.15s"
          class="span3 wow lightSpeedIn"
          style="visibility: hidden; animation-duration: 0.15s; animation-delay: 0.5s; animation-name: none;"
        >
          <p class="circle bg-green">3 KiB only</p>
        </div>
      </div>
      <div class="row">
        <div
          class="span3 wow rollIn center"
          style="visibility: hidden; animation-name: none;"
        >
          <img
            src="https://wowjs.uk/img/wow-7.gif"
            height="100"
            style="height: 25vw;"
          />
        </div>
        <div
          data-wow-iteration="5"
          data-wow-duration="0.25s"
          class="span3 wow pulse"
          style="visibility: hidden; animation-duration: 0.25s; animation-iteration-count: 5; animation-name: none;"
        >
          <p class="circle bg-green">just scroll</p>
        </div>
        <div
          class="span3 wow lightSpeedIn center"
          style="visibility: hidden; animation-name: none;"
        >
          <img
            src="https://wowjs.uk/img/wow-9.gif"
            height="100"
            style="height: 25vw;"
          />
        </div>
      </div>
      <div class="row">
        <div
          data-wow-iteration="5"
          data-wow-duration="0.15s"
          class="span3 wow bounce"
          style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;"
        >
          <p class="circle bg-green">reveal now</p>
        </div>
        <div
          class="span3 wow bounceInUp center"
          style="visibility: hidden; animation-name: none;"
        >
          <img
            src="https://wowjs.uk/img/wow-8.gif"
            height="100"
            style="height: 25vw;"
          />
        </div>
        <div
          class="span3 wow bounceInRight"
          style="visibility: hidden; animation-name: none;"
        >
          <p class="circle bg-green">so impress</p>
        </div>
      </div>
      <div class="row">
        <div
          class="span3 wow rollIn center"
          style="visibility: hidden; animation-name: none;"
        >
          <img
            src="https://wowjs.uk/img/wow-4.gif"
            height="100"
            style="height: 25vw;"
          />
        </div>
        <div
          data-wow-iteration="5"
          data-wow-duration="0.15s"
          class="span3 wow flip"
          style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;"
        >
          <p class="circle bg-green">WOW</p>
        </div>
        <div
          class="span3 wow bounceInRight center"
          style="visibility: hidden; animation-name: none;"
        >
          <img
            src="https://wowjs.uk/img/wow-11.gif"
            height="100"
            style="height: 25vw;"
          />
        </div>
      </div>
      <div class="row">
        <div
          data-wow-delay="0.5s"
          class="span3 wow rollIn"
          style="visibility: hidden; animation-delay: 0.5s; animation-name: none;"
        >
          <p class="circle bg-green">no jquery?!</p>
        </div>
        <div
          data-wow-delay="1s"
          class="span3 wow bounceInDown center"
          style="visibility: hidden; animation-delay: 1s; animation-name: none;"
        >
          <img
            src="https://wowjs.uk/img/grumpy.gif"
            height="100"
            style="height: 25vw;"
          />
        </div>
        <div
          data-wow-delay="1.5s"
          class="span3 wow bounceInRight"
          style="visibility: hidden; animation-delay: 1.5s; animation-name: none;"
        >
          <p class="circle bg-green">that sucks!</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
export default {
  name: "wows",
  components: {},
  data() {
    return {};
  },
  onload() {
    console.log(123);
  },
  mounted() {
    let wow = new WOW({
      boxClass: "wow", //需要执行动画的元素的 class
      animateClass: "animated", //animation.css 动画的 class
      offset: 150, //距离可视区域多少开始执行动画
      mobile: true, //是否在移动设备上执行动画
      live: true //异步加载的内容是否有效
    });
    wow.init();
  }
};
</script>
<style scoped>
.span3 {
  flex: 1;
  display: flex;
  justify-content: center;
}
.bg-green {
  background: #5bd5a0;
}
.circle {
  /* margin: 10px 5px; */
  width: 25vw;
  color: #fff;
  font-size: 15px;
  line-height: 25vw;
  text-align: center;
  height: 25vw;
  border-radius: 50%;
}
.row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20vw 0;
}

.container111 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  position: relative;
  padding: 48px 0;
  overflow: visible;
}
.textClass {
  /* height: 80vw; */
  /* background-color: lightblue; */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 15vw;
}
</style>

原文地址：https://blog.csdn.net/oneya1/article/details/136712265

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：H12-831题库（华为HCIP认证题库）
下一篇：Css提高——flex布局及其相关属性

@Autowired 和 @Resource思考（注入redisTemplate时发现一些奇怪的现象）
@Autowired 和 @Resource思考（注入redisTemplate时发现一些奇怪的现象）
阅读更多2024-11-16
25浙江省考-28天学行测-Day5 & Day6-判断推理（中）
1、另有他因2、因果倒置3、否定此因4、根本原因5、三圈质疑1、排除他因2、四圈支持1、无论据有结论2、有论据有结论3、质疑论证过程4、严谨逻辑关系5、比例类论证1、解释说明2、增加论据3、断点
阅读更多2024-11-16
Rust 入门指南（零）：安装及 Cargo 管理器
系列第 0 篇，简单介绍了 Rust 的基本安装和配置流程，以及如何通过 Cargo 创建和管理项目。
阅读更多2024-11-16
Centos使用人大金仓ksql
Centos使用人大金仓ksql
阅读更多2024-11-16
多模态大模型简介
多模态大模型是机器学习领域的一个新兴趋势，它结合了文本、图像、音频等多种数据模态，以实现更全面和深入的信息理解和处理。这种模型能够处理跨模态任务，如图像标注、视觉问答、文本到图像的生成等，是人工智能领
阅读更多2024-11-16
javaScript交互补充2（动画函数封装）
如果多个元素都使用这个动画函数，每次都要var 声明定时器，我们可以给不同元素使用不同的定时器（自己用自己的定时器）核心原理：利用js是一门动态语言，可以很方便的给当前对象添加属性。缓动动画就是让元素
阅读更多2024-11-16
【鸿蒙开发】第十五章 H5与端侧交互、Cookies以及Web调试
Web组件支持在应用拦截到页面请求后自定义响应请求能力。开发者通过接口来实现自定义资源请求响应。自定义请求能力可以用于开发者自定义Web页面响应、自定义文件资源响应等场景。Web网页上发起资源加载请求
阅读更多2024-11-16
javaScript交互补充（元素的三大系列）
使用client系列的相关属性来获取元素可视区的相关信息，可以动态的得到该元素的边框大小，元素大小等。返回自身包括padding，内容区宽度，不含边框，返回数值不带单位。返回自身包括padding，内
阅读更多2024-11-16
django 过滤器的执行
默认情况下，会执行，特别是如果在中配置了它，或者没有禁用它。禁用过滤器：可以通过在APIView中设置来禁用过滤器，避免执行。手动调用过滤器：如果需要，你可以在视图中手动调用来过滤查询集。自定义过滤器
阅读更多2024-11-16
在Ubuntu 24.04 LTS上安装飞桨PaddleX
首先，请运行“ubuntu-drivers devices”命令列出当前可用的硬件设备，确保Ubuntu 24.04.1 LTS已发现安装在桌面计算机中的英伟达显卡，如下图所示。是基于飞桨框架构建的一
阅读更多2024-11-16

Vue+wow.js+animate.css实现动画效果

1.介绍

2.wow.js官网地址wow.js

3.效果展示

4.npm下载资源

相关文章