javascript Scroll Magicの使い方 その２ durationとtriggerHookの設定

前回の記事はこちら

javascript　Scroll Magicの使い方　その１　準備〜スクロールによるフェードイン

duration設定

triggerElementでスクロールの開始位置を指定した後に
プロパティでdurationを設定すると
アニメーションの範囲を指定することができます。
colorEndも追記して終了地点を可視化しておきます。

const ourScene = new ScrollMagic.Scene({
  triggerElement: '#project01',
  duration: '300' //追加
})
.setClassToggle('#project01','fade-in')
.addIndicators({
  name:'fade scene',
  colorTrigger: 'black',
  colorStart:'#75C695',
  colorEnd:'pink' //追加
})
.addTo(controller);

※CSSのtransraleYはスクロールと相性が悪いので外しています。

durationを数値で指定するとpxで範囲を決めることができます（上記の場合は300px）

const ourScene = new ScrollMagic.Scene({
  triggerElement: '#project01',
  duration: '300' //追加
})

％指定をするとブラウザの高さに対するパーセンテージで指定が可能です（CSSのvh指定と似ています）

const ourScene = new ScrollMagic.Scene({
  triggerElement: '#project01',
  duration: '100%' //変更
})

表示しているブラウザの高さで比率指定が可能です

triggerHook設定

デフォルトではブラウザの中心がtriggerになっていますが
交差する場所をずらすにはtriggerHookを使用します。

const ourScene = new ScrollMagic.Scene({
  triggerElement: '#project01',
  duration: '100%',
  triggerHook: 1 //追加
})

１で設定するとブラウザの下端がtriggerHookとなります。
０．９（９０％）など小数点指定が可能です。

triggerElement切替

htmlが入れ子になっている場合
DOMを半角空けて指定することで
triggerElementを指定できます。

triggerHookは０．９（９０％）に指定します。

const ourScene = new ScrollMagic.Scene({
  triggerElement: '#project01 div', //追加
  duration: '100%', 
  triggerHook: 0.9 
})

project01の中のdiv要素（円の上端）を
triggerElementに指定しました。

reverseプロパティ

シーン内でreverseをfalseにするとアニメーションの
挙動を１回に制限することができます。
※durationも不要のため削除しています。

const ourScene = new ScrollMagic.Scene({
  triggerElement: '#project01 div', //追加
  triggerHook: 0.9,
  reverse:false
})

reverseプロパティを設定したため
スクロールを戻してもアニーメーションしなくなりました。

複数のシーン設定

残りの2つの要素もスクロールでフェードインするように
jsシートを以下に書き換えます。
※reverse：falseの設定を削除しています。

const controller = new ScrollMagic.Controller();

const ourScene = new ScrollMagic.Scene({
  triggerElement: '#project01 div', //追加
  triggerHook: 0.9,
})
.setClassToggle('#project01','fade-in')
.addIndicators({
  name:'fade scene',
  colorTrigger: 'black',
  colorStart:'#75C695',
  colorEnd:'pink'
})
.addTo(controller);


const ourScene2 = new ScrollMagic.Scene({
  triggerElement: '#project02 div', //追加
  triggerHook: 0.9,
})
.setClassToggle('#project02','fade-in')
.addIndicators({
  name:'fade scene 2',
  colorTrigger: 'black',
  colorStart:'#75C695',
  colorEnd:'pink'
})
.addTo(controller);


const ourScene3 = new ScrollMagic.Scene({
  triggerElement: '#project03 div', //追加
  triggerHook: 0.9,
})
.setClassToggle('#project03','fade-in')
.addIndicators({
  name:'fade scene 3',
  colorTrigger: 'black',
  colorStart:'#75C695',
  colorEnd:'pink'
})

繰り返しが冗長なのでJqueryのeachを使ってリファクタリングしておきます。

これまでのコード

    <div id="intro">
      <div class="content">
        <div class="img-logo"></div>
        <h1>The title</h1>
        <p>
          Short and sharp ScrollAnimation demos,<br>
        </p>
      </div>
    </div>

    <div class="main-container" id="main">

      <div id="project01" class="project">
        <div class="img"></div>
        <h1>Project title</h1>
        <p class=info>
          Lorem ipsum dolor sit amet, consectetur<br>
          adipiscing elit, sed do eiusmod tempor incididunt<br>
          ut labore et dolore magna aliqua. Ut enim ad<br>
          minim veniam, quis nostrud exercitation ullamco<br>
          laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>

      <div id="project02" class="project">
        <div class="img"></div>
        <h1>Project title</h1>
        <p class=info>
          Lorem ipsum dolor sit amet, consectetur<br>
          adipiscing elit, sed do eiusmod tempor incididunt<br>
          ut labore et dolore magna aliqua. Ut enim ad<br>
          minim veniam, quis nostrud exercitation ullamco<br>
          laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>

      <div id="project03" class="project">
        <div class="img"></div>
        <h1>Project title</h1>
        <p class=info>
          Lorem ipsum dolor sit amet, consectetur<br>
          adipiscing elit, sed do eiusmod tempor incididunt<br>
          ut labore et dolore magna aliqua. Ut enim ad<br>
          minim veniam, quis nostrud exercitation ullamco<br>
          laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

.project{
  border: 10px solid white;
  height: 100vh;
  width: 100%;
  background-color: gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity:0;
  transition: all 1s ease-out;
  &.fade-in{
    opacity: 1;
  }
  .info{
    text-align: center;
  }
  .img{
    width: 200px;
    height: 200px;
    background-color:rgb(82,107,195);
    border-radius: 50%;
  }
}

$('.project').each(function(){
  const ourScene = new ScrollMagic.Scene({
    triggerElement: this.children[0],
    triggerHook: 0.9,
  })
  .setClassToggle(this,'fade-in')
  .addIndicators({
    name:'fade scene',
    colorTrigger: 'black',
    colorStart:'#75C695',
    colorEnd:'pink'
  })
  .addTo(controller);
});