vue-scrollmagic 滚动动画制作插件

 

1、需求：

在做网站的时候、需要加一个根据页面滚动位置进行页面变化的效果。

2、实现方案：

自己写个滚动监听也不是很复杂、但是管理维护起来比较乱。所以直接找了这个插件

官网：vue-scrollmagic、插件地址

3、使用：

安装

npm i vue-scrollmagic --save

载入

// main.js
import VueScrollmagic from "vue-scrollmagic";
Vue.use(VueScrollmagic, {
  verical: true,
  globalSceneOptions: {
    triggerHook: "onLeave"
    // duration: "100%"
  },
  loglevel: 2,
  refreshInterval: 100
});

使用

<template>
  <div id="home">
    <div class="item trigger0">trigger0</div>
    <div class="item trigger1">
      trigger1
      <div class="page1"></div>
    </div>

  </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        scenes:[
                {
                  scene: {
                    triggerElement: ".trigger0", // 触发元素
                    triggerHook: 0,// 定义触发器 Hook 相对于视口的位置 没弄明白
                    reverse: true, // 控制回滚时、是否加载动画
                    offset: 0, // 偏量、动画开始位置的微调、也可当作triggerElement使用、当triggerElement不存在的时候。
                    duration: "40%" // 动画持续进度
                  },
                  tweenElement: ".page1", // 变化元素 
                  tween: { // 变更动画内容
                    css: { // 配置最终css
                      left: '50%' // 样式参数
                    }
                  }
                },
                
              ]
      }
    },

    mounted() {
      this.scenes.map((screne, i) => {
      const scene = this.$scrollmagic.scene(screne.scene)
      .setTween(screne.tweenElement, screne.tween)
      // .addIndicators({ name: `Scene ${i}` });
      this.$scrollmagic.addScene(scene);

      });

    }
  }
  </script>
  
  <style >
  
  .page1{
    position: absolute;
    width: 20%;
    height: 100%;
    left: -20%;
    background: red;
    transform: translateX(-50%);
  }
  .item{
    height: 100vh;
    text-align: center;
    position: relative;
    z-index: 90;
    color: #ffffff;
    background: forestgreen;
    border-top: 1px solid rgba(255,255,255,.1);
  }

    
  </style>

　　

当然了，这个只是初级的应用、也就是单次动画。如果需要一个动画多次变换、那就需要深度使用了，大概的使用方式如下。

 

 import { TweenMax, TimelineMax, Linear } from "gsap";

var tween = new TimelineMax()
    // TweenMax.to(执行动画元素,动画持续时间,变换属性内容)
      .add(
        TweenMax.to(".logo", 0.5, {
          left: '10%',
          // ease: Linear.easeNone
        })
      ) // draw word for 0.9
      .add(
        TweenMax.to(".logo", 0.5, {
          left: '90%',
          // ease: Linear.easeNone
        }),
      ); // change color during the whole thing
    const scene0 = new this.$scrollmagic.scene({
      triggerElement: "#trigger0",
      duration: "100%",
      tweenChanges: true
    })
      .setTween(tween)
      .addIndicators(); // add indicators (requires plugin)
    this.$scrollmagic.addScene(scene0);