フェードインを実装する

ページをスクロールダウンしていくと、ふわっと画像やカードなどの要素がフェードインする作りのページがありますよね。
今回は素材のindex.htmlを使って、下図のように２箇所のフェードインを設定します。

1. スクロールダウンすると、ページトップボタンがフェードイン
2. ブログカードがフェードインする

ぜひ一緒に手を動かして、作成してみて下さい。

フォルダ構成・ファイルの作成

ファイルとフォルダの準備

素材の「exercise-set」フォルダは、下図のような構成になっています。

jQueryやプラグインなどのJSファイルを入れるために、「js」というフォルダを作成して下さい。

作成した「js」フォルダ内に、新規ファイルを作成します。 解説ではdemo.jsにしていますが、ファイル名は任意でOK。（※拡張子は.jsにしてください）

index.htmlをエディターで開きます。 前レッスンで行ったように、作成したjsファイル（demo.js）を読み込ませて下さい。

jqueryの切り替え

これでdemo.jsに記述すれば動く…と思いきや、もう一つ設定が必要です。 Bootstrapサイトからコピー＆ペーストしたコードを見てみて下さい。

赤線部分「jquery-3.5.1.slim.min.js」となっていますよね。 これはスリムビルド版という、機能（メソッド）を絞って軽量化したバージョンです。 スリムビルド版には今回使いたい .fadeIn() などのアニメーション系のメソッドがほぼ含まれていません。

このままdemo.jsに書いても動作しませんので、jQueryを切り替えましょう。

jQueryを読み込んでいる部分の<script>～</script>まで丸ごと削除します。 （図の585行目）

https://code.jquery.com/、もしくは全レッスンで作成したファイルから「minified」のCDNコードをコピーして、削除した箇所に貼り付けます。 jquery-3.6.0.min.jsというファイルです。

これで準備は完了です。

【補足】 Bootstrap5を利用する場合は、bootstrapのjsファイルの下でjQueryの読み込みを行って下さい。

※上図ではGoogleのCDNを使っています。

1.ページトップボタン

CSS-positionのレッスンで作成したページトップボタンは、図のようにページトップからフッターまでずっと表示されています。 しかし、黒で統一したトップ部分に表示されると違和感がありますよね。

画面トップの時は非表示、 スクロールダウンすると表示されるようにしましょう。

demo.jsファイルに、下記のようにコードを書いて下さい。 （※コメントアウト部分は書かなくても良いです）

demo.js

まずは1行。 「back-to-top」クラスのcssをdisplay:none;にせよという命令です。 フェードインさせるには、最初は非表示状態である必要があるからですね。

style.cssの方に直接書いてしまうと、何らかの事情でjsファイルが動かなかった時に、ずっと非表示のままになっていまします。

ですので、jsと連動させて表示・非表示を切り替える場合はこのように、js側から指示を出します。 こうしておけば、jsファイルが動かなかった時はこの命令も無視され「back-to-top」クラスの要素が消えてしまうことはありません。

次にフェードインさせるための命令を書きます。

demo.js

これは、スクロールというアクションがあった時に{ }内の処理を行う、という指定です。

$(window).on('scroll', function () {...}

設定したいのは「スクロールダウンされた時に、ボタンが表示される」ということです。 スクロールダウンされた時に、という条件を指定するためにif文を使います。

    if ($(window).scrollTop() > 100) {
      $('.back-to-top').fadeIn(1200);
    }

.scrollTop() > 100 は「ページのトップから100px以上のスクロール」を示します。 ですので、上の行は「もし、100pxより多くスクロールされたら {} 内の処理を実行する」という意味になります。

{} 内の処理である $('.back-to-top').fadeIn(1200); はシンプルなjQueryの命令文ですね。 「back-to-top」クラスの要素を1200ミリ秒でフェードインせよ、です。

スクロールアップしてページトップまで戻った時に、ボタンがフェードアウトする設定も加えましょう。 完成したコードは下記です。

$(window).on('scroll', function() {
  if ($(window).scrollTop() > 100) {
    $('.back-to-top').fadeIn(1200);
  } else {
    $('.back-to-top').fadeOut(1200);
  }
});

保存して、スクロールに応じてフェードイン/フェードアウトされるか確認してみて下さい。

2.ブログカード

次にブログカード部分がフェードインするよう設定をします。

とはいえ、ページトップボタンを作った方法だと「ページ最上部から〇〇px」という設定が必要です。 画面幅が狭くて様々な要素が縦並びになると距離は変わりますし、コンテンツの追加・削除などをした時にも修正が必要になりますよね。

なので、こちらはWaypoints.jsというプラグインを使って「この要素までスクロールされた時」という条件を付けられるようにしてみましょう。 スクロールに連動させた設定をしたい時に、よう使用されるプラグインです。

①プラグインの追加

waypoints.jsをダウンロード

waypoints.jsの配布ページを開きます。 「Download」ボタンをクリックして、プラグインフォルダをダウンロードしてください。

jsファイルの追加

フォルダを解凍し、プラグインとして機能するjsファイル（jquery.waypoints.min.js）を作成中のフォルダにコピーします。

DLフォルダ

作成サイトのフォルダ

htmlファイルから読み込ませる

index.htmlにjquery.waypoints.min.jsを読み込む記述を加えます。 jqueryと依存関係があるので、必ず下記の順番で書くようにしてください。

②フェードインさせる記述

スタイルを作成する

スクロールに合わせてブログカードをフェードさせるために、以下2つのCSSクラス作って切り替える方法を使います。

• 非表示のクラス
• 表示するクラス

cssのtransitionプロパティを使って切り替え速度をゆっくりに設定することで、フェードインしているように見える仕組みです。

今回は以下のクラス名を付けて、cssを設定していきます。

• 非表示のクラス→animated-hidden
• 表示するクラス→animated-view

とりあえず動作確認用に、透明(非表示)と不透明(表示)だけ設定しておきましょう。

style.css

jsを記述

demo.jsファイルを使ってクラスの付け外しを設定します。

ブログセクションではカード部分全体を囲っている「card」クラスを持つ<div>に「blog-card」というクラスが入っていますね。

index.html

cardクラスは他のセクションでも使用しているので、影響しないように「blog-card」クラスをセレクタに使用します。
$("#blog .card") のように書いても良いです。

waypoints発動させるスクリプトを書きます。

demo.js

指示している内容はシンプル。
「blog-card」クラスを持つ要素が、 スクロールダウンで画面上から60％の位置まで来たら、非表示用のクラス（animated-hidden）を外して、表示用のクラス（animated-view）を付け加えるというものです。

上書き保存して、ブラウザで表示を確認してみましょう。 一回だけ、スクロールダウンでフェードインするはずです。

【確認用コード】

$(".blog-card").addClass('animated-hidden');

$('.blog-card').waypoint({ 
  handler: function(direction) {
    if(direction === "down"){
      // 下スクロール時の処理
      $('.blog-card').addClass('animated-view');
      $('.blog-card').removeClass("animated-hidden");
    } 
  },
  offset: "60%" //handlerのトリガー位置
});

【補足】 waypoints.jsのオプション設定は公式の紹介ページをご確認ください。 メジャーなプラグインですので「waypoints.js　設定」などと検索して頂いても、解説サイトが多く出てきます。

スクロールで行き来するたびにフェードイン/アウトさせたい場合は、下記のように記述すると出来ます。

【フェードイン/アウトの例】

  $(".blog-card").addClass('animated-hidden');

  $('.blog-card').waypoint({
    handler: function(direction) {
      if(direction === "down"){// 下スクロール時の処理
        $('.blog-card').addClass('animated-view');
      }else{
        $('.blog-card').removeClass('animated-view');
      }
    },
    offset: "80%" //handlerのトリガー位置
  });
  $('.animated-view').waypoint({// 上スクロール時の処理
    handler: function(direction) {
      if(direction === "up"){
        $('.blog-card').addClass('animated-hidden');
      }else{
        $('.blog-card').removeClass('animated-hidden');
      }
    },
    offset: "5%" //handlerのトリガー位置
  });

ただし、この書き方だけの場合、スマホ幅でスクロールアップすると途中で消えてしまいます。 メディアクエリでスタイルを変更するなどプラスの設定が必要です。

実習

ブログカードのcssを調整してみましょう。 確認用に設定してみたjsの「offset」の値を変更してみたり、transitionプロパティで時間を設定するなどしてフェードイン効果が自然に見えるように調整してみてください。

など、入力する値によって雰囲気が結構変わりますよ。 フェードインではなく、transformプロパティなど使ったアニメーション表示にしても面白いですね。

解答ファイルについて

今回から実習の解答に「js」ファイルが加わります。
index-レッスン名.htmlからは、それぞれ解答用のjsファイルが読み込まれています。

それぞれのファイルを該当フォルダに移してご確認下さい。