Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
24
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

image.png

背景

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

実装内容

CSSアニメーション実装

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
24
Help us understand the problem. What are the problem?