アウトプットするブログ

ブログの投稿ログ

2021年
9月
8月
7月
6月

LP作成でよく使う簡単なアニメーション



gif

簡単なLPを作成するとしてリッチなアニメーションを付けたい時ってみなさんどうしますか? 自分の場合TweenMaxとScrollMagicを使って実装します。
可視範囲に入った時にアニメーションが走る実装などもすごく簡単に実装できるので紹介したいと思います。

ソースの全体はこちら

コード

<script type="text/javascript">
    const controller = new ScrollMagic.Controller();
    const speed = 4;

    $(".anm_y").each(function (elem) {
      var tween = TweenMax.to(elem, speed, {
        y: 0,
        opacity: 1
      });
      var scene = new ScrollMagic.Scene({
        triggerElement: elem, // 要素の指定
        triggerHook: 0.75,
        reverse: false // スクロールを戻した時にアニメーションの逆再生を行うか
      })
        .setTween(tween) // Tweenアニメーション指定
        .addTo(controller); // コントローラへ追加
    });
  </script>


const controller = new ScrollMagic.Controller();

まず、でscrollMagicを宣言します。

$(".anm_y").each(function (elem){}

ここでアニメーションを付与したいクラスを指定しています。

var tween = TweenMax.to(elem, speed, {
  y: 0,
  opacity: 1
});

そしてCSSのプロパティを設定しています。
横幅（width）、高さ（height）、上配置（top）、左配置（left）、背景色（background-color）、外余白（margin）、内余白（padding）などや、回転（rotation）、拡大・縮小（scale）、傾斜変形（skew）、透過（opacity）
などアニメーションに使う様々なものを指定できます。 

var scene = new ScrollMagic.Scene({
  triggerElement: elem, // 要素の指定
  triggerHook: 0.75,
  reverse: false // スクロールを戻した時にアニメーションの逆再生を行うか
})

ScrollMagicの指示を書いていきます。
メソッドやイベントなどはこちらを参照してください。
公式ドキュメント

  .setTween(tween)
  .addTo(controller);

最後にそれぞれのプラグインの挙動をセットしていきます。

まとめ

自分がこの業界に入る前からあったプラグインなので、新しい技術とは言えないですが現役で問題なく使える実装となっています。
もっと簡単にできるいまどきな物があれば是非教えてください！