屏幕滑动动画方案

·  阅读 2648

背景

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

效果

效果图

1、方案一-wow.js

wow.js官方 文档

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

1-1、在vue中使用方法

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

html

<div class="wow fadeIn"></div>
复制代码

js

import WOW from './util/wow/wow';
mounted() {
            this.$nextTick(() => {
                new WOW.WOW().init()
            })
        },
复制代码

css

@import "./util/wow/animate.scss";
复制代码

2、方案二aos

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

html

<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不会。知道的麻烦回答下。

分类:
前端
标签:
分类:
前端
标签: