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



#Scroll Magicとは
[scrollmagic](https://scrollmagic.io/)
[![Image from Gyazo](https://i.gyazo.com/ee5906b8d5add6ad29b5bf50ba31535c.jpg)](https://gyazo.com/ee5906b8d5add6ad29b5bf50ba31535c)

スクロールアニメーション定番のライブラリです

scrollの発火地点や長さを細かく指定でき
version２からはjqueryやGSAPから独立しました

scroll検出はjsのintersectionobserverなどもありますが
scrollmagicは記述が少なくデバッグ用のトリガーも
細かく表示ができるため使い勝手が良いと思います。

またGSAPと組み合わせることで
WEBページのアニメーションをリッチにすることが可能です。

#完成イメージ

まず以下のような簡単なスクロールアニメーションを作成します。

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

#準備

今回も読み込みはCDNを使用します。
Scroll Magic→JSシートの順番です
デバッグ用のCDNも忘れずに読み込みましょう

```javascript

//scroll Magic読み込み
<script src = "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
//scroll Magicデバッグ
<script src = "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
```

今回は簡単なHTML/CSS(SCSSを使用しています)で以下を作成しています。

```html: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:css
.project{
  border: 10px solid white;
  height: 100vh;
  width: 100%;
  background-color: gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .info{
    text-align: center;
  }
  .img{
    width: 200px;
    height: 200px;
    background-color:rgb(82,107,195);
    border-radius: 50%;
  }
}
```
[![Image from Gyazo](https://i.gyazo.com/3e305caa8d6c3bb9c961d5404ba8cf4a.gif)](https://gyazo.com/3e305caa8d6c3bb9c961d5404ba8cf4a)

#Controllerの呼び出しとScene作成

ScrollMagicを使用するには
まず制御用のコントローラーと
スクロール検出用のシーンを作成します。

```JS
//コントローラーの作成
const controller = new ScrollMagic.Controller();

//シーンの作成
const ourScene = new ScrollMagic.Scene({
  triggerElement: '#project01'
})

```
今回はproject01（一番上の灰色領域）をスクロールイベントのトリガーとします

```js
.setClassToggle('#project01','fade-in')
.addTo(controller);

```

setClassToggleを使用してトリガーポイントで
fade-inというクラスを付与するよう設定し
最後にcotrollerへ.addToでイベントを渡します。

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

アニメーションは設定していませんが検証すると
ブラウザの中心までscrollすると#project01に
fade-inというクラスがtoggleされています。

あとはCSSを使用してクラスを利用したアニメーションをつけます。
※SCSSを使用しています。

```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; //追加   
  transform:translateY(50px); //追加
  transition: all 1s ease-out; //追加
  &.fade-in{
    opacity: 1; //追加
    transform:translateY(0); //追加
  }
  .info{
    text-align: center;
  }
  .img{
    width: 200px;
    height: 200px;
    background-color:rgb(82,107,195);
    border-radius: 50%;
  }
}

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

ブラウザーの中心でフェードインさせることができました。

##デバッグ用Indicatorの設置
イベントの発火ポイントを可視化するために
indicatorを設置しましょう

```js
const controller = new ScrollMagic.Controller();

const ourScene = new ScrollMagic.Scene({
  triggerElement: '#project01'
})

.setClassToggle('#project01','fade-in')
.addIndicators({ //追加
  name:'fade scene',
  colorTrigger: 'black',
  indent: 200,
  colorStart:'#75C695'
})
.addTo(controller);

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

indicatorを設置することでtriggerの交差点がわかりやすくなります
また色や名前もプロパティとして変更する事ができます。
[indicatorのプロパティ](https://scrollmagic.io/docs/debug.addIndicators.html#Scene.addIndicators)

次回はdurationとtriggerHookの設定です

[javascript　Scroll Magicの使い方　その２　durationとtriggerHookの設定](https://qiita.com/fumiya0414/items/295167b375f46542b500)