ほぼCSSだけで、LPでよくある上下左右からフェードインするやつを実装する

背景

• LP実装のフロントエンドを担当
• Ruby on RailsのView内にてフロントエンド組み込み前提
• デザインカンプにアニーメーション、インタラクションの仕様は無かったが、昨今全く動かないLPの方が少ないのではと思った
• デザイナーにインタラクション考えてもらうのも確認フロー大変だし、Railsにプラグイン組み込む検証リスクなど諸々あり、1回あきらめた
• 諦めてからが試合開始
• 変更に強いCSSアニメーション主軸にスクロールインタラクション作れればと思った
• ゴニョゴニョしたら意外と出来た

実装内容

CSSアニメーション実装

• .anm_modデフォルト = 下から元来の位置に戻りつつフェードイン。速度ノーマル
• &.left, &.right 左右から元来の位置に戻りつつフェードイン
• &.delay, &.fast フェードイン速度遅め、早め
• 上記２点の設定で、フェードイン方向（３方向）とスピード（３段階）を調整出来ます
• 数値を変えれば任意の動きも可能ですので、自由に変更してみてください

.animation {
 ...
 .anm_mod {
  // 一度透明にしておく
  opacity: 0;
  // デフォルトでは下方向（から上に向かう）に設定
  transform: translate3d(0, 100%, 0);
  // デフォルトでは1秒に設定
  transition: all 1s ease;
  ...
  &.left {
   transform: translate3d(-100%, 0, 0);
  }
  &.right {
   transform: translate3d(100%, 0, 0);
  }
  &.delay {
   transition: all 2s ease;
  }
  &.fast {
   transition: all 0.8 ease;
  }
 }
}

.animation .anm_mod.active {
  // jsでスクロール値に来たら　activeクラスが付与されるので、透明を解除しながらUIパーツが元の位置に戻る作用をする
 opacity: 1;
 transform: translate3d(0, 0, 0);
}

javaScript

• CSSのみで行きたかったですが、スクロール値の取得だけはCSSでは不可能であったため、スクロール値取得用途のみに絞りこみ、一部jQueryは使いました
• .animationブロック内の .anm_modモジュールを対象にします
• モジュールの位置と、スクロール値、画面の高さを取得します
• .anm_modモジュールがスクロールの位置まで来たら、activeクラスを付与
• 再度TOPまで戻ればactiveを解除する仕様
• jsではスクロールによるactiveクラスの有無だけを作用させる
• フェードイアニメーション自体はCSSにさせる　 < これをjsで処理するプラグインは多いですが、CSSで代替可能ですので、今回ここが一番のポイントとなります。

$(window).scroll(function() {
 　　// .animation 配下の　.anm_modを対象に見る
 $(".animation .anm_mod").each(function() {
  // スクロール中、各UIパーツ　.anm_modがブラウザ画面内に入ったら activeクラスが付与される
  const position = $(this).offset().top;
  const scroll = $(window).scrollTop();
  const windowHeight = $(window).height();
  if (scroll > position - windowHeight) {
   $(this).addClass("active");
  }
  // スクロール中、トップ画面付近まで戻ったら activeクラスを解除 ＝ 何度でもスクロールアニメが表現可能。一度しかアニメーションしたく無ければここを削除してください。
  if (scroll < 100) {
   $(this).removeClass("active");
  }
 });
});

HTML実装例

 <div class="animation">
  <div class="anm_mod left delay">
   anm_mod left delay
  </div>
  <div class="anm_mod right fast">
   anm_mod right fast
  </div>
 </div>

実装結果

CodePen

See the Pen Scroll Fadein CSS Animation by Asagiri (@agdg) on CodePen.