背景

  • 公司正好要做首页,需要模仿别人的官网,滑轮切换要有动画效果。

效果

效果图
效果图

1、方案一-wow.js

wow.js官方 文档

  • 需要搭配anmiate.css使用, 链接
  • 缺点,只能页面加载的时候执行一次动画,无法根据scroll重复触发,需要达到这个效果比较麻烦, 推荐使用方案二。

1-1、在vue中使用方法

  • 以下都是引用的静态资源

html

1
<div class="wow fadeIn"></div>

js

1
2
3
4
5
6
7
8
9
10
11
import WOW from './util/wow/wow';
mounted() {
this.$nextTick(() => {
new WOW.WOW().init()
})
},
```

**css**
```css
@import "./util/wow/animate.scss";

2、方案二aos

  • 用法跟wow.js差不多,可以根据滚动 实现重复动画效果。
  • 文档
  • 以下都是引用的静态资源
  • data-aos-mirror="true"这个属性是判断动画是否可重复。

html

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="p-aos-panel">
<!--aos-->
<div class="p-aos" data-aos="fade-up" data-aos-mirror="true"
>
aaa
</div>
<div class="p-aos" data-aos="fade-right">
bbb
</div>
<div class="p-aos" data-aos="fade-left">
ccc
</div>
</div>

js

import AOS from '../assets/utils/aos/aos'
mounted() {
            this.$nextTick(() => {
                AOS.init()
            })
        },

css

@import "../assets/utils/aos/aos.css";
    .p-aos-panel {
        height: 200vh;
        padding-top: 900px;

        .p-aos {
            background-color: red;
            height: 200px;
            width: 200px;
            margin-top: 20px;
            color: white;
        }
    }

中间遇到的问题

vue-cli3项目引入静态资源就会报错,而vue-cli4不会。知道的麻烦回答下。