[JQuery]スクロールによって要素をフェードイン・アウトさせてみた

スクロールしたら画像や文字がフェードインするものを実装したいなと思い、いろいろな記事を調べてみました。きちんと実装できたので、今回はそれを紹介したいと思います。

参考記事

スクロールした時に要素が可視範囲に入ったらフェードイン表示させる方法 | ホームページ制作・SEO対策 | 栃木県宇都宮 ジップサービス

今回ご紹介させていただく方法は、特定の要素が可視範囲に入ったタイミングでクラスを付ける（消す）スクリプトを実装し、cssで動きを付ける方法になります。 Jqueryを使用しますので、読み込んでください。 特定の要素をしていします。今回は「sample」というIDが付いている要素を例に記載します。 このスクリプトを読み込...

www.gipservice.com

実装サイト※作成中

ロペ CAFE REST ROPE｜さぬき市　カフェ

香川県さぬき市津田町鶴羽にあるお店です。現在作成中。。

kotoura3-blog.com

はじめにー概要

初めに今回の実装内容をざっくり説明すると、「初めはCSSで非表示にさせている。スクロール位置に対応してクラスを変更させ、表示・非表示を切り替えている。その際、CSSでアニメーションも加えている。」といったものです。

詳しく説明していきます。

実装してみる

タイトルにもある通り、JQueryが必要になってきます。HTML・CSS・JSそれぞれのファイルを用意しましょう。

JQueryの準備

JQueryを導入します。導入に関してはこちらのサイトが分かりやすいと思うので、参考にしてみてください。

【入門】jQueryの導入方法から使い方まで！わかりやすく解説します

「HTML/CSSで作ったサイトに動的な機能を加えたい。」 「jQueryの学習の必要性を感じているが、一歩踏み出せない。」 こんな思いを持っている人に、jQueryの導入について解説します。なぜjQueryかと言えば、 ...

creive.me

HTMLの内容

フェードイン・アウトさせたい要素全体をdivタグで囲みます。その際に任意のクラスを設定してください。HTMLファイル以外にも共通のクラス名を付けるところがあるので統一させるよう注意しましょう。今回は、「fade-out」という名前で作っています。

<div class="fade-out">
    ////////////////////////////////////
    //
    //  フェードイン・アウトさせたい要素
    //
    ////////////////////////////////////
</div>

CSSの内容

以下のように記述しましょう。これも任意のクラス名で構いません。今回は「fade-out」に対応するクラス名として「fade-in」という名前で作っています。

.fade-out{
    opacity:0;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -o-transition:all 1s;
    -ms-transition:all 1s;
    transition:all 1s;
}
.fade-in{
    opacity:1;
}

スクロールする前のクラス名が「fade-out」であり、「opacity:0;」により非表示になっています。スクロールされることでクラス名が「fade-in」に変わり、「opacity:1;」となって表示されます。その際に、「transition」の付いた５行によって若干アニメーションが働きます。この「transition」に関しては勉強不足ですが、可逆反応になっているためフェードイン・アウト両方でアニメーションが働きます。

では次に、どのようにクラス名の変更が行われているのか見ていきましょう。

JavaScript(JQuery)の内容

以下のように記述しましょう。

$(function(){
  $(window).scroll(function (){
    $(".fade-out").each(function(){
      var imgPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > imgPos - windowHeight + windowHeight/5){
        $(this).addClass("fade-in");
      } else {
        $(this).removeClass("fade-in");
      }
    });
  });
});

注目してほしいのが、３行目のeach文と７行目のif文です。

each文を用いることで、クラス名「fade-out」のついた要素１つずつに関して、それぞれそれ以下のeach文で囲まれた部分の処理を繰り返します。(１２行目までの内容)

varで定義されている内容に関しては深く触れませんが、if文を用いることでスクロール位置がある一定の位置に来たときにクラス名を、addClassで「fade-out」から「fade-in」に、removeClassで「dade-in」から「fade-out」に変更することを可能にしています。

まとめ

以上、JQueryを利用してのフェードイン・アウトの実装方法でした。この方法に１つ問題があるとすれば、対象の要素が高い位置にある場合にフェードアウトされない点でしょうか。フェードインに関しては、自身の実装環境では通常通り行われました。

なので活用する際は、あまり高い位置にある要素に適用させないようにする必要があるかもしれません。私はフェードアウトはおまけの機能だと考えているので、そこまで気にしていません。