スクロールして要素が表示されたらアニメーションを開始する

9285 ワード
CSS jQuery animate.css CSS テキストリンク

スクロールして要素が表示されたら、
アニメーションが動くやり方は色々なサイトで見かけると思います！

私も初めて検索したときには、参考にしたいサイトが多い分、たくさんの情報を目にしてしまい、
結果どの方法を使ったらいいのかわからなくなってしまいました。

jQueryではアニメーションのためのプラグインも多く存在し、
それぞれ複雑な動きをつけることができますが、
簡単な実装をする場合には、jQueryだけでも十分に行うことができるのだと気づきました！
そのため、今回はプラグインを一切利用せずに、
スクロール中に指定した要素が出現したら処理を実行する方法をご紹介したいと思います

内容はとても初学者用となっています、どなたかのお役に立てたら嬉しいです。
また、より良いやり方がございましたら、コメントお待ちしております。

今回行う実装

始めはhelloという言葉が見えていますが、
スクロールしていくとzoominという言葉が出てきます。
zoominが画面の半分まできたところで
ふわっと浮かび出るズームインのアニメーションを実装しています。

使用するもの

Animate.css
jQuery

Animate.cssとはdivなどにあらかじめ用意されたクラスを設定するだけで
アニメーションを適用させることが出来るスタイルシートです。

jQueryとはJavaScriptでできることを、
より簡単な記法で実現できるようにされたJavaScriptライブラリの一種です。
それぞれ、リンク先に公式サイトを貼りましたので参考にしてください。

実装方法

まず、Animate.cssを読むと要素のクラス名に2つの名前をつけることで、
好きなアニメーションが行えるとあります！
今回はズームインを実装したいので、
「animate_animated」「animate_zoomIn」という2つがクラス名に必要ということになりますね。
それを踏まえて、下記のコードで実装しましたのでご覧ください。

HTML

test.html
<!DOCTYPE html>
  <html>
    <head>

      <!-- 下記でjQueryを読み込む  -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="test.js" type="text/javascript"></script>

      <!-- 下記でAnimate.cssを読み込む  -->
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
      />

      <script src="test.css" type="text/css"></script>
    </head>
    <body>
      <div class="text">hello</div>

      <!-- クラス命名に注意  -->
      <div class="animate__animated">zoomin</div>
    </body>
  </html>

※今回はCDNでAnimate.css、jQueryの２つとも読み込みましたが、自分にあった方法で行ってください。
zoominには本来、「animate_animated」「animate_zoomIn」という2つのクラス名が必要ですが
2つ付けてしまうと、ページが読み込まれた時点で処理してしまいます。
（スクロールする前にズームインしてしまう）
スクロールしたときに処理されたいので、ここでは1つだけ付けます。

CSS

test.css
.text {
 font-size: 200px;
 margin: 500px;
}
.animate__animated {
 font-size: 200px;
 margin: 500px;
 /* 下記がアニメーションに必要なコード  */
 visibility: hidden;
 opacity: 0;
 transition: 1s;
}
/* jQueryによって追加されるコード */
.animate__zoomIn {
 visibility: visible;
 opacity: 1;
}

スクロールのアニメーションが目的のため、フォントサイズなどはとても適当です、、、すみません（笑）
ご自身のcssに必要なコードのみコピーなど行ってください。
ページが読み込まれたときにはzoominの文字が見えないように設定し、
スクロールしたら、文字が現れるようにanimate_zoominで設定しておきます。

jQuery

test.js
$(window).on('scroll', function (){

  var animate = $('.animate__animated');
  var zoomIn = 'animate__zoomIn';

  animate.each(function () {

    var animateOffset = $(this).offset().top;
    var scrollPos = $(window).scrollTop();
    var wh = $(window).height();

    // 画面の半分に表示されたら、クラスを追加する
    if(scrollPos > animateOffset - wh + (wh / 2) ){
      $(this).addClass(zoomIn);
    }
  });

  });

ここでは、zoominの文字が画面の半分に表示されたら、
animate__zoomInのクラス名を追加する実装を行っています。
これを行うことで、後からクラス名が追加され、
スクロールして要素が表示されたらアニメーションを開始するよう実装できました。
jQueryの詳しい書き方などは検索したら、たくさん出てくるのでそちらを参考にしてください。

最後に

これからも学習を続けて、プラグインの紹介などもできたらと考えています。
ご覧いただき、ありがとうございました。

参考

animate.css
Animate.cssで遊んでみた