HighLab

scroll magic

  • 公開日:
  • 更新日:
  • 文字数:706文字
import Vue from 'vue'
import "./style.scss";
//import "./css/main.css";

//import "./component/animatedModal.js";
import ScrollMagic from 'ScrollMagic';

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({triggerElement: ".trigger", duration: 1000}) // トリガー要素、終了距離(px)
        .setClassToggle(".trigger", "active") // 対象要素と入れ替えるクラス
        .addIndicators( {name: "Indicator Name"}) // デバッグ用インジケータ
        .addTo(controller); // Controllerに追加

/*
var scene = new ScrollMagic.Scene({
        triggerElement: "#trigger",
        duration: 800,  // スタートから800pxまで
        offset: 300      // スタートは300px
    })
    .setPin("#trigger")
    .addIndicators({name: "ScrollMagic"})
*/