JSライブラリで「ページ内スクロール」「スクロールアニメーション」

ページ内スクロール「smooth.scroll.js」

ページ内スクロールには「smooth.scroll.js」を使用します。

1.公式サイトから、データをダウンロードする。
2.実装したいデータのJSフォルダに、
　dist内の「smooth-scroll.polyfills.min.js」を移動させる。
3.実装したいデータのHTMLに読み込ませる。

<script src="js/smooth-scroll.polyfills.min.js"></script>

4.下記を続けて記述する。

<script>
   var scroll = new SmoothScroll('a[href*="#"]',{
       speed:1000,
   });
</script>

1000＝1秒かけてアニメーション
「aタグのリンクに＃から始まるid名が入っていたら、対象のid先にスクロール移動する」

スクロールアニメーション「ScrollTrigger」

スクロールアニメーションには、「ScrollTrigger」を使用する。

1.公式サイトからデータをダウンロードする。
2.実装したいデータのJSフォルダに、
　dist内の「ScrollTrigger.min.js」を移動させる。
3.実装したいデータのHTMLに読み込ませる。

<script src="js/ScrollTrigger.min.js"></script>

4.アニメーションの指示を記述する。
　以下は一例

<script>
   const trigger = new ScrollTrigger.default()
   trigger.add('[data-trigger]',
   {
       once:true,
       offset: {
           viewport: {
               y:(trigger,frame,direction)=>{
                   return trigger visible ? 0: .3
               }
           }
       },
   });
</script>

要素の30％に達したら、アニメーションをしますよ。という指示

5.CSSでアニメーション条件を記述する。
　以下は一例
　「0.5秒かけて表示させるアニメーション」

.visible,.invisible {
   transition: opacity .5s ease;
   opacity: 0.0;
}
.visible {
   opacity: 1.0;
}
visible・・・見える
invisible・・・見えない

6.アニメーションしたい要素にクラス名「invisible」を入れて、
　その後ろに「data-trigger」と記述すると表示される。　

★下から上に表示させるアニメーション

.visible.animeTop,.invisible.animeTop {
   transition: all .5s;
   transform: translateY(100px);
}
.visible.animeTop {
   transform: translateY(0);
}

translateYの「Y」は、縦方向（上下）の意味。「X」は横方向（左右）の意味。

「100px下にある要素を0.5秒かけて、元の位置に表示される」という記述