【CSS/JS】スクロールに合わせてコンテンツをふわっと下から表示

スクロールしてコンテンツが表示領域に入ったら、コンテンツの内容が下からフワ～っとアニメーション効果付きで表示されるやる。

Waypoints.js & Animate.css

Waypoints.jsとAnimate.cssを併用して実現します。Waypoints.jsはjQueryが必要です。

Waypoints.js

指定したHTML要素が画面内へ入った際、あらかじめ指定した関数を呼び出してくれます。

Link

Waypoints

http://imakewebthings.com/waypoints/

上記のページのダウンロードボタンからダウンロードZIPを展開し、「libフォルダ」内のjquery.waypoints.jsまたはjquery.waypoints.min.jsを読み込んで使用します。

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="jquery.waypoints.min.js"></script>

リファレンス

Link

Waypoint Class • Waypoints

http://imakewebthings.com/waypoints/api/waypoint/

Animate.css

HTML要素にクラスを指定するだけでアニメーションを付けてくれるCSSライブラリ。

Link

Animate.css | A Cross-Browser Library Of Css Animations.

https://animate.style/

ダウンロードしたzipファイルを解凍後、animate.cssまたはanimate.min.cssをHTMLの<head>内で読み込みます。

<link rel="stylesheet" href="animate.css">

ダウンロードページ

Link

Release Update Dependencies And Copyright · Animate-Css/Animate.css · Github

https://github.com/animate-css/animate.css/releases/tag/3.5.1

サンプルソース

HTML部分

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Animate Test</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
  <style>
    body {
      background: repeating-linear-gradient(0deg,
      #ffffff,
      #ffffff 40px,
      #ededed 40px,
      #dedede 80px);
    }
    
    .boxes {
      margin: 80vh auto;
    }
    
    .box {
      border: 3px solid #666;
      width: 10em;
      padding: 10px;
      margin: 4em auto;
      text-align: center;
    }
    
    .animated {
      /*最初は非表示*/
      opacity: 0;
    }
  </style>
</head>
<body>
  <div class="boxes">
  <div class="box animated">box 01</div>
  <div class="box animated">box 02</div>
  <div class="box animated">box 03</div>
  <div class="box animated">box 04</div>
  <div class="box animated">box 05</div>
  <div class="box animated">box 06</div>
  <div class="box animated">box 07</div>
  <div class="box animated">box 08</div>
  <div class="box animated">box 09</div>
  <div class="box animated">box 10</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script src="main.js"></script>
</body>
</html>

Javascript部分

// animatedクラスの付いた要素にwaypointを登録
$('.animated').waypoint({
  handler(direction) {

  // 要素が画面中央に来るとここが実行される
  if (direction === 'down') {

    /*
    * 下方向のスクロール
    * イベント発生元の要素にfadeInUpクラスを付けてアニメーションを開始
    */
    $(this.element).addClass('fadeInUp');

    /*
    * waypointを削除することで、この要素に対しては
    * これ以降handlerが呼ばれなくなる
    */
    this.destroy();
    }
  },

  // 要素が画面中央に来たらhandlerを実行
  offset: '50%',
});
PAGETOP