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

前回の記事はこちら

[javascript　Scroll Magicの使い方　その１　準備〜スクロールによるフェードイン](https://qiita.com/fumiya0414/items/86a6a675db4c682c2c34)

#duration設定

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

```javascript
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);
```

[![Image from Gyazo](https://i.gyazo.com/d86152988bb4575695a45c35daa09a2f.gif)](https://gyazo.com/d86152988bb4575695a45c35daa09a2f)
※CSSのtransraleYはスクロールと相性が悪いので外しています。

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

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

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

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

[![Image from Gyazo](https://i.gyazo.com/2ed7db2abf4fb4abce384cd777309002.gif)](https://gyazo.com/2ed7db2abf4fb4abce384cd777309002)

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

#triggerHook設定

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

```javascript
const ourScene = new ScrollMagic.Scene({
  triggerElement: '#project01',
  duration: '100%',
  triggerHook: 1 //追加
})
```
[![Image from Gyazo](https://i.gyazo.com/fb107152d51ab29edcce21f5f4b310ba.gif)](https://gyazo.com/fb107152d51ab29edcce21f5f4b310ba)

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

#triggerElement切替

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

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

```javascript

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

```

[![Image from Gyazo](https://i.gyazo.com/fda390a94cdca2ba79609a63811b9aa7.gif)](https://gyazo.com/fda390a94cdca2ba79609a63811b9aa7)

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

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

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

```
[![Image from Gyazo](https://i.gyazo.com/f90a18bfbf3bd3d7c8754594cfbe155f.gif)](https://gyazo.com/f90a18bfbf3bd3d7c8754594cfbe155f)

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

##複数のシーン設定

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

```javascript
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'
})
```

[![Image from Gyazo](https://i.gyazo.com/4aea0dd8b553384e39f2d21af3fb5e80.gif)](https://gyazo.com/4aea0dd8b553384e39f2d21af3fb5e80)

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

これまでのコード

```html
    <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>
```

```CSS
.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%;
  }
}
```

```javascript
$('.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);
});

```