【自作】回転しながらフェードアップする方法

2023年2月11日2023年7月1日

まずはこちらをご覧ください。スクロールしてみてください。

See the Pen Untitled by muchi@webコーダー (@muchikun_61) on CodePen.

画面が表示されると同時に回転しながらフェードアップ、スクロールして要素が画面に入ってきて回転しながらフェードアップするアニメーションになります。

これを実現する方法を解説していこうと思います。ライブラリはjQueryのみ使用して、その他の部分は自作していきます。

解説のベースになっている参考記事がこちらになります。

https://coco-factory.jp/ugokuweb/move02/4-1/

https://coco-factory.jp/ugokuweb/jscss/

大部分がこちらのサイトのコードを利用します。回転の部分とそれにまつわる注意点について補足的に解説していこうと思います。ではやっていきましょう！

コードと解説

HTML

<div class="box js-rotate-fadeUp-trigger"></div>
<div class="box js-rotate-fadeUp-trigger"></div>
<div class="box js-rotate-fadeUp-trigger"></div>
<div class="box js-rotate-fadeUp-trigger"></div>
<div class="box js-rotate-fadeUp-trigger"></div>
<div class="box js-rotate-fadeUp-trigger"></div>
<div class="box js-rotate-fadeUp-trigger"></div>
<div class="box js-rotate-fadeUp-trigger"></div>
<div class="box js-rotate-fadeUp-trigger"></div>
<div class="box js-rotate-fadeUp-trigger"></div>

CSS

/* boxのスタイルを変更。ここは無視していただいて構いません。 */
.box {
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  margin-top: 20px;
}

/* アニメーション */
/* 少し回転して下から */
.rotate-fadeUp {
  animation-name: rotate-fadeUp-animation;
  /* アニメーションの時間。適宜変更してください。 */
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes rotate-fadeUp-animation {
  from {
    opacity: 0;
    /* 　　translateYで100px下からフェードアップさせる処理 */
    /* 　　rotateで40deg回転して傾きを加えている。分かりやすく大袈裟にしてます。 */
    /* 　　これらは適宜変更してください */
    transform: translateY(100px) rotate(40deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

JavaScript( jQuery )

function rotateFadeUpAnime() {
    jQuery(".js-rotate-fadeUp-trigger").each(function () {
      // 要素の位置から50px上の値を取得
      // 数値は適宜変更してください
      var elemPos = jQuery(this).offset().top - 50;
      // 画面トップからのスクロールの値を取得
      var scroll = jQuery(window).scrollTop();
      // 画面の高さを取得
      var windowHeight = jQuery(window).height();
      if (scroll >= elemPos - windowHeight) {
        // 画面内に入ったら
        jQuery(this).addClass("rotate-fadeUp");
      } else {
        // 画面外に出たら
        jQuery(this).removeClass("rotate-fadeUp"); 
      }
    });
  }

// 画面をスクロールをしたら動かしたい場合の記述
  jQuery(window).scroll(function (){
    rotateFadeUpAnime();/* アニメーション用の関数を呼ぶ*/
  });

// 画面が読み込まれたらすぐに動かしたい場合の記述
  jQuery(window).on('load', function(){
    rotateFadeUpAnime();/* アニメーション用の関数を呼ぶ*/
  });

コメントを読んでいただければ大体の感覚は掴めると思います。数字の部分を調整していただいて、自分好みの設定にしていただければと思います。

注意点

スマホサイズ時横スクロールが発生する場合

これは私のケースなのですが、当サイトのブログ一覧ページでも今回紹介した動きをつけているのですが、実機(iPhone)で確認したところ回転のアニメーションによって画面幅よりも要素がはみ出てしまって横スクロールするといった問題が発生しました。ちょっと荒技だとは思うのですが、私はこのように対処いたしました。

HTML

<body>
  <div class="wrapper">
    
  </div>
</body>

CSS

.wrapper {
  overflow: hidden;
}

これを記述することによって画面サイズを超えて横スクロールする問題を解消することができます。

こういった事象が起こった場合、荒技ではありますが結構使えるテクニックなので覚えておいても良いかも知れません。

スマホサイズ時要素がチラつく場合

これも私の場合なのですが、実機(iPhone)で確認するとスクロールによって表示される要素がチカチカとチラつく現象が起こりました。紹介したJavaScript(jQuery)のコードの中に下記のような記述があったかと思われます。

JavaScript( jQuery )

      // 要素の位置から50px上の値を取得
      // 数値は適宜変更してください
      var elemPos = jQuery(this).offset().top - 50;

例では要素の位置から50px上の段階でアニメーションが走るトリガーになっていますが、これが短いのが問題だったようです。

      var elemPos = jQuery(this).offset().top - 50;
      if (window.matchMedia("(max-width:767px)")) {
        elemPos -= 100;
      }

私はこのようにスマホサイズ時では要素のもう少し上の時点からアニメーションが起動するように修正致しました。実機で確認しながら調整して見てください。

まとめ

いかがでしたでしょうか？

このくらいのアニメーションであればうるさい感じにならずにオシャレ感を演出できると思います。もし、問題に遭遇してしまった場合は今回紹介した方法で問題に対処する。もしくはwow.jsなどのライブラリを使用してフェードアップを実装するなどしてみても良いかも知れません。念の為、wow.jsのリンク(github)を記載しておきます。

https://github.com/graingert/wow

以上キクチウェブのキクチでした。ではでは。