JavaScriptでスクロールに応じて「ふわっと」フェードインするアニメーションの作り方(1回のみ、複数回を指定可能)

「JavaScriptでスクロールに応じて「ふわっと」フェードインするアニメーションの作り方(1回のみ、複数回を指定可能)」の画像です。

JavaScriptでスクロールに応じて「ふわっと」フェードインするアニメーションの作り方を備忘録も兼ねて簡単にまとめました。

WEBサイトや特にLP(ランディングページ)などでギミックとして実装されたりしているのをよく見かけますので参考にして頂けると嬉しいです。

簡単な説明になりますが良ければ参考にしてみて頂けたら幸いです!

目次

JavaScriptでスクロールに応じて「ふわっと」フェードインするアニメーションを作るには?

まずは土台となるHTMLを記述していきます。

その後、土台(HTML)を記述できたらその土台をもとにCSSを記述して最低限の装飾やclassが付与された際にフェードインするアニメーションを記述し、JavaScriptでスクロールに応じて表示領域内に該当の要素が入った時にアニメーション表示されるように動作(処理)を記述していきます。

HTMLを記述していこう

下記のように土台となるHTMLを記述します。

今回はアニメーション動作が中心ですのでHTMLの記述は最低限のみですので、不要なHTML要素もありますので必要に応じて削除や追加などをしていきましょう!

class名やタグの種類などは別のものでも装飾を自身でできる際は大丈夫です!
ただ、class名js-fadeAnimationは最初に「js」と書かれている通り、後から「JavaScript」で使用するのでこちらで変更した際は「JavaScript」側のclass名も同じ箇所を変更するようご注意ください。

classはできるだけ「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名とで分けて使い、分かりやすいように「JavaScript・jQuery」で使うclass名には先頭に「js-」のような感じのclass名をつけた方がいいかと思います!

<div class="fadeAnimation">
  <div class="fadeAnimation__item js-fadeAnimation fadeIn">
    <div class="fadeAnimation__itemInner">
      <p class="fadeAnimation__text">フェードイン</p>
    </div>
  </div><!-- /.fadeAnimation__item -->

  <div class="fadeAnimation__item js-fadeAnimation fadeUp delay04s">
    <div class="fadeAnimation__itemInner">
      <p class="fadeAnimation__text">フェードイン(下から上へ)</p>
    </div>
  </div><!-- /.fadeAnimation__item -->

  <div class="fadeAnimation__item js-fadeAnimation fadeDown delay2s">
    <div class="fadeAnimation__itemInner">
      <p class="fadeAnimation__text">フェードイン(上から下へ)</p>
    </div>
  </div><!-- /.fadeAnimation__item -->

  <div class="fadeAnimation__item js-fadeAnimation fadeRight delay04s">
    <div class="fadeAnimation__itemInner">
      <p class="fadeAnimation__text">フェードイン(左から右へ)</p>
    </div>
  </div><!-- /.fadeAnimation__item -->

  <div class="fadeAnimation__item js-fadeAnimation fadeLeft delay04s">
    <div class="fadeAnimation__itemInner">
      <p class="fadeAnimation__text">フェードイン(右から左へ)</p>
    </div>
  </div><!-- /.fadeAnimation__item -->
</div><!-- /.fadeAnimation -->

※フェードインアニメーション表示を実装させたい要素にはjs-fadeAnimationを追記しておきましょう
また、上記HTMLに記述しているように、fadeUpdelay04sなどもセットで追記しておく事で事前に準備している範囲で数パターンのアニメーションを実装できますので参考までに試してみてください!

CSSで装飾して最低限の見た目や各種フェードアニメーションの動きを作ろう

土台となるHTMLが記述できたら次は土台をもとにCSSで下記のように記述して最低限動きがわかるくらいの装飾をし、各種フェードアニメーションの動きをanimationtransformkeyframesを中心に使用してCSSのみでアニメーション動作を作っていきます。

装飾や動作の指定が正常にできたらデモページのように、スクロールに応じて表示領域に要素が入った時、各種フェードアニメーションのような動きが実装出来ている状態になります。

/*------------------------------
 fadeAnimation デモ用装飾
------------------------------*/
.fadeAnimation {
  display: flex;
  flex-flow: row wrap;
  max-width: 96%;
  margin: 60vh auto;
}

.fadeAnimation__item {
  width: 32%;
  height: 40vh;
  background-color: #202f55;
  margin: 0 auto 60vh;
}

.fadeAnimation__itemInner {
  display: table;
  width: 100%;
  height: 100%;
}

.fadeAnimation__text {
  display: table-cell;
  color: #FFFFFF;
  font-size: 18px;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  box-sizing: border-box;
}

/*------------------------------
 アニメーション
------------------------------*/
.fadeIn {
  opacity: 0;
}

.fadeUp {
  opacity: 0;
  transform: translateY(50px);
}

.fadeDown {
  opacity: 0;
  transform: translateY(-50%);
}

.fadeRight {
  opacity: 0;
  transform: translateX(-50%);
}

.fadeLeft {
  opacity: 0;
  transform: translateX(50%);
}

.delay01s {
  animation-delay: 0.1s;
}

.delay02s {
  animation-delay: 0.2s;
}

.delay03s {
  animation-delay: 0.3s;
}

.delay04s {
  animation-delay: 0.4s;
}

.delay05s {
  animation-delay: 0.5s;
}

.delay06s {
  animation-delay: 0.6s;
}

.delay07s {
  animation-delay: 0.7s;
}

.delay08s {
  animation-delay: 0.8s;
}

.delay09s {
  animation-delay: 0.9s;
}

.delay1s {
  animation-delay: 1s;
}

.delay2s {
  animation-delay: 2s;
}

.fadeIn.is-animated {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadeUp.is-animated {
  animation-name: fadeUp;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadeDown.is-animated {
  animation-name: fadeDown;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadeRight.is-animated {
  animation-name: fadeRight;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadeLeft.is-animated {
  animation-name: fadeLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

各指定箇所の簡単な説明

簡単に説明しますとまずは下記部分はアニメーション表示された際に要素が表示されたかわかるように最低限の装飾をしている箇所になります。

下記はアニメーションの動作に関しては直接影響のある箇所ではないですので正直どんな装飾でも大丈夫ですので今回は詳細は割愛させて頂きます。

/*------------------------------
 fadeAnimation デモ用装飾
------------------------------*/
.fadeAnimation {
  display: flex;
  flex-flow: row wrap;
  max-width: 96%;
  margin: 60vh auto;
}

.fadeAnimation__item {
  width: 32%;
  height: 40vh;
  background-color: #202f55;
  margin: 0 auto 60vh;
}

.fadeAnimation__itemInner {
  display: table;
  width: 100%;
  height: 100%;
}

.fadeAnimation__text {
  display: table-cell;
  color: #FFFFFF;
  font-size: 18px;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  box-sizing: border-box;
}

そして、下記部分がアニメーション動作に関する記述となります。

各所切り分けて以降に簡単になりますが説明させて頂きます。

/*------------------------------
 アニメーション
------------------------------*/
.fadeIn {
  opacity: 0;
}

.fadeUp {
  opacity: 0;
  transform: translateY(50px);
}

.fadeDown {
  opacity: 0;
  transform: translateY(-50%);
}

.fadeRight {
  opacity: 0;
  transform: translateX(-50%);
}

.fadeLeft {
  opacity: 0;
  transform: translateX(50%);
}

.delay01s {
  animation-delay: 0.1s;
}

.delay02s {
  animation-delay: 0.2s;
}

.delay03s {
  animation-delay: 0.3s;
}

.delay04s {
  animation-delay: 0.4s;
}

.delay05s {
  animation-delay: 0.5s;
}

.delay06s {
  animation-delay: 0.6s;
}

.delay07s {
  animation-delay: 0.7s;
}

.delay08s {
  animation-delay: 0.8s;
}

.delay09s {
  animation-delay: 0.9s;
}

.delay1s {
  animation-delay: 1s;
}

.delay2s {
  animation-delay: 2s;
}

.fadeIn.is-animated {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadeUp.is-animated {
  animation-name: fadeUp;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadeDown.is-animated {
  animation-name: fadeDown;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadeRight.is-animated {
  animation-name: fadeRight;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadeLeft.is-animated {
  animation-name: fadeLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

まずは、上から順番に下記がJavaScriptの処理によってclassが付与された時、アニメーションが実行される前の初期の状態を指定している箇所になります。

.fadeIn {
  opacity: 0;
}

.fadeUp {
  opacity: 0;
  transform: translateY(50px);
}

.fadeDown {
  opacity: 0;
  transform: translateY(-50%);
}

.fadeRight {
  opacity: 0;
  transform: translateX(-50%);
}

.fadeLeft {
  opacity: 0;
  transform: translateX(50%);
}
  • fadeInは「単純にフェードイン」の初期状態の指定です
  • fadeUpは「下から上へフェードイン」の初期状態の指定です
  • fadeDownは「上から下へフェードイン」の初期状態の指定です
  • fadeRightは「左から右へフェードイン」の初期状態の指定です
  • fadeLeftは「右から左へフェードイン」の初期状態の指定です

※上記を参考に動作をさせたい箇所にjs-fadeAnimation fadeUpのようにjs-fadeAnimationとセットでclassを指定することでアニメーション動作を実装できます

その後、アニメーション動作を要素毎に遅延して表示させたりして、全体の表示の流れを微調整できるように下記のclassを上記で説明しました同様の箇所に追記して指定する事で順番にフェードインしてくるようなアニメーションを実装できるように事前に準備して記述している箇所になります。

「0.1s(単位:秒)〜2s(単位:秒)」までの記述になりますのでその他に必要な場合は下記を参考に追記して行ってみてください。

※普通にフェードインしてくるだけで良いという場合は下記部分は不要になりますので記述していても問題はないですが、不要な場合は削除して参考に活用して頂けると幸いです!

.delay01s {
  animation-delay: 0.1s;
}

.delay02s {
  animation-delay: 0.2s;
}

.delay03s {
  animation-delay: 0.3s;
}

.delay04s {
  animation-delay: 0.4s;
}

.delay05s {
  animation-delay: 0.5s;
}

.delay06s {
  animation-delay: 0.6s;
}

.delay07s {
  animation-delay: 0.7s;
}

.delay08s {
  animation-delay: 0.8s;
}

.delay09s {
  animation-delay: 0.9s;
}

.delay1s {
  animation-delay: 1s;
}

.delay2s {
  animation-delay: 2s;
}

そして、下記がスクロールに応じてに表示領域に該当要素が入った際に「JavaScript」側で処理してis-animatedのclass名が要素に付与された時に該当のアニメーションが動作するように各種指定しています。

animation-nameの部分が後に記述してある@keyframesのどの指定を使用するかを指定している部分です。

また、animation-durationの部分が1回のアニメーション周期が完了するまでの所要時間を指定している箇所になります。

最後のanimation-fill-modeの部分はCSSアニメーションの実行の前後にどう対象にスタイルを適用するかの指定している箇所になります。

.fadeIn.is-animated {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadeUp.is-animated {
  animation-name: fadeUp;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadeDown.is-animated {
  animation-name: fadeDown;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadeRight.is-animated {
  animation-name: fadeRight;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadeLeft.is-animated {
  animation-name: fadeLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
}

最後に、@keyframesを利用し上記で指定していたanimation-nameで実行するアニメーションの実際の動作を%毎に分けて記述の指定しています。

簡単に説明しますと、「0%」に記述している値から「100%」に記述している値までアニメーション動作してね、という感じです。

簡単になりますが、CSSの各箇所の説明は以上になります。

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

JavaScriptを記述してスクロールに応じてフェードインするアニメーションを再現する為の処理を追加しよう

CSSでのアニメーションの表示を確認する為の最低限の装飾や実際のアニメーション動作の記述は事前に準備できたものの、それだけではスクロールに応じて該当要素が表示領域に入っても何も動作(変化)しません。

そこで、JavaScriptでスクロールに応じて該当要素が表示領域に入った際に実行したい動作(処理)を追加してスクロールに応じてフェードインするアニメーションを再現する為の処理を下記のように記述し、追加していきます。

// Scroll fade-in animation
(function () { // 即時実行関数(グローバル汚染対策)
  let i = 0; // for文用変数の定義
  let el = {}; // 配列・変数用(巻き上げ防止の為、冒頭にて宣言)

  // DOM読み込み後のタイミングで処理
  document.addEventListener('DOMContentLoaded', function () {
    el.targetElement = document.querySelectorAll('.js-fadeAnimation'); // フェードアニメーション表示させる要素のセレクタ指定
    el.firstDisplayOnlyFlag = false; // フェードアニメーション表示を1回のみにするかの判定フラグ(true:1回のみ、false:複数回)
  }, false);

  // スクロール時の処理
  window.addEventListener('scroll', function () {
    scrollAnimationFnc(); // スクロールアニメーション用関数の実行
  }, false);

  // 向き切り替え(リサイズ)時の処理
  window.addEventListener('resize', function () {
    scrollAnimationFnc(); // スクロールアニメーション用関数の実行
  }, false);

  // スクロールアニメーション用関数
  function scrollAnimationFnc () {
    el.scrollValue = window.pageYOffset || document.documentElement.scrollTop; // 現在のスクロール量の取得
    el.documentHeight = document.documentElement.clientHeight; // ドキュメント全体の高さ(スクロールバー含ない)を取得(表示領域部分の高さ)

    for (i = 0; i < el.targetElement.length; ++i) {
      el.clientRect = el.targetElement[i].getBoundingClientRect(); // 対象要素のViewpor(ビューポート)に対する相対位置に関する情報を取得
      el.targetPosition = el.clientRect.top + el.scrollValue; // 対象要素の位置座標を取得
      el.targetHeight = el.targetElement[i].offsetHeight; // 対象要素のborder、paddingを含んだ高さを取得

      if (el.scrollValue < el.targetPosition - el.documentHeight || el.scrollValue > el.targetPosition + el.targetHeight) {
        // ドキュメント全体の高さ(スクロールバー含ない)内(表示領域)に対象要素の位置が入っていなければ処理
        if (!el.firstDisplayOnlyFlag) {
          // 判定フラグが「false(複数回)」の場合に処理
          el.targetElement[i].classList.remove('is-animated'); // 対象要素から「is-animated」classを削除する
        } else {
          // 判定フラグが「true(1回のみ)」の場合に処理
          return false; // 処理を中断
        }
      } else {
        // ドキュメント全体の高さ(スクロールバー含ない)内(表示領域)に対象要素の位置が入っていれば処理
        el.targetElement[i].classList.add('is-animated'); // 対象要素に「is-animated」classを付与する
      }
    }
  }
}());

※コメントアウトはわかりやすいように必要以上に細かめに書いているので実際の業務では邪魔かもなので必要に応じて削除して参考にして頂けると幸いです

処理内容の簡単な説明

下記ハイライト部分はお作法みたいなものでコメントで書かれている通りなのですが、「即時実行関数」で「グローバル汚染対策」です。

簡単に説明しますとこの関数(function () {~})();の中以外に影響させないでねといった感じのものになります。

より詳しく知りたい方は私のお師匠さんみたいな方が作っているこちらのサイトを参考にしてみてくださいね!

また、ハイライト以外の部分はコメントに書いてある通りですので割愛させて頂きます。

(function () { // 即時実行関数(グローバル汚染対策)
  let i = 0; // for文用変数の定義
  let el = {}; // 配列・変数用(巻き上げ防止の為、冒頭にて宣言)

  …処理省略
})();

その後に書かれている下記部分は簡単になりますが、jQueryの$(document).ready(function() {~});$(function() {~});とほぼ同じ意味合いで、最初の HTML 文書の読み込みと解析が完了した時点(スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します)で内部の処理を実行させるという記述になります。

内部の処理に関してはコメントアウトに書いております通り、「フェードアニメーション表示させる要素のセレクタの指定」と「フェードアニメーション表示を1回のみにするかの判定フラグ(true:1回のみ、false:複数回)」をその後の処理で使う変数に格納している処理になります。

初期値は複数回(表示・非表示を繰り返す)の設定になってますので、1回フェードアニメーション表示させたらその後はずっと表示した状態にしておきたい場合は、el.firstDisplayOnlyFlag = false;の部分をel.firstDisplayOnlyFlag = true;に変更する事で、アニメーション表示を1回動作するだけに切り替える(変更)事ができますので必要な場合はこちらを書き換えてみてください!

// DOM読み込み後のタイミングで処理
document.addEventListener('DOMContentLoaded', function () {
  el.targetElement = document.querySelectorAll('.js-fadeAnimation'); // フェードアニメーション表示させる要素のセレクタ指定
  el.firstDisplayOnlyFlag = false; // フェードアニメーション表示を1回のみにするかの判定フラグ(true:1回のみ、false:複数回)
}, false);

そしてここからが実際のスクロールに応じてフェードインするアニメーションを再現する為の処理内容になります。

下記部分はこちらもコメントアウトにて書いてあります通り、「スクロール時」と「向き切り替え(リサイズ)時」にscrollAnimationFnc();スクロールアニメーション用関数の実行をする為の記述になります。

// スクロール時の処理
window.addEventListener('scroll', function () {
  scrollAnimationFnc(); // スクロールアニメーション用関数の実行
}, false);

// 向き切り替え(リサイズ)時の処理
window.addEventListener('resize', function () {
  scrollAnimationFnc(); // スクロールアニメーション用関数の実行
}, false);

そして下記部分がスクロールアニメーション用関数(実際の主要処理内容)になります。

上記で指定していた「スクロール時」と「向き切り替え(リサイズ)時」に下記関数内の処理が実行され、最終的に条件を満たした際にis-animatedのclassが付与され、事前に準備していたCSSのアニメーション動作が実行されるという流れになります。

下記関数内の各所処理内容はコメントアウトにて各所に記述しておりますので、一通り見ていただいて参考にしていただければ幸いです。

簡単になりましたがこちらで処理の説明は以上になります。

// スクロールアニメーション用関数
function scrollAnimationFnc () {
  el.scrollValue = window.pageYOffset || document.documentElement.scrollTop; // 現在のスクロール量の取得
  el.documentHeight = document.documentElement.clientHeight; // ドキュメント全体の高さ(スクロールバー含ない)を取得(表示領域部分の高さ)

  for (i = 0; i < el.targetElement.length; ++i) {
    el.clientRect = el.targetElement[i].getBoundingClientRect(); // 対象要素のViewpor(ビューポート)に対する相対位置に関する情報を取得
    el.targetPosition = el.clientRect.top + el.scrollValue; // 対象要素の位置座標を取得
    el.targetHeight = el.targetElement[i].offsetHeight; // 対象要素のborder、paddingを含んだ高さを取得

    if (el.scrollValue < el.targetPosition - el.documentHeight || el.scrollValue > el.targetPosition + el.targetHeight) {
      // ドキュメント全体の高さ(スクロールバー含ない)内(表示領域)に対象要素の位置が入っていなければ処理
      if (!el.firstDisplayOnlyFlag) {
        // 判定フラグが「false(複数回)」の場合に処理
        el.targetElement[i].classList.remove('is-animated'); // 対象要素から「is-animated」classを削除する
      } else {
        // 判定フラグが「true(1回のみ)」の場合に処理
        return false; // 処理を中断
      }
    } else {
      // ドキュメント全体の高さ(スクロールバー含ない)内(表示領域)に対象要素の位置が入っていれば処理
      el.targetElement[i].classList.add('is-animated'); // 対象要素に「is-animated」classを付与する
    }
  }
}

注意

今回は「jQuery」を使用せず「JavaScript」のみで記述されていますので「jQuery」が読み込まれていなくても動作します!

なので新規でページ作成の仕事などの場合は、「jQuery」を読み込ませると無駄なリソースになりますので、他の処理などで必要ない場合に限りますが読み込ませなくても大丈夫です。

ただ、既存サイトの修正などの際は他の処理をすべて把握できていないはずですのでその際は勝手に読み込みの記述を消したりしないように注意しましょう!

おまけ(jQuery版の記述)

今回は「JavaScript」のみでの記述でしたが「jQuery」版が良かったなどあるかもなので、下記が「jQuery」版の記述になります。

HTML・CSSは同様で、下記も詳細の説明に関しましてコメントアウトにて書いてありますが、基本的に「JavaScript」のみで記述したものと同様ですので良ければこちらも参考にしてみてください!

※こちらは「jQuery」版ですのでこちらの記述だと当然ですが、jQueryライブラリの読み込みが下記記述箇所の実行前に必要ですので動作しない場合はjQueryライブラリの読み込みされているかご確認頂けると幸いです

// Scroll fade-in animation
(function () { // 即時実行関数(グローバル汚染対策)
  let el = {}; // 配列・変数用(巻き上げ防止の為、冒頭にて宣言)

  el.targetElement = '.js-fadeAnimation';  // フェードアニメーション表示させる要素のセレクタ指定
  el.firstDisplayOnlyFlag = false; // フェードアニメーション表示を1回のみにするかの判定フラグ(true:1回のみ、false:複数回)

  $(window).on('load scroll resize', function () {
    $(el.targetElement).each(function () {
      el.targetPosition = $(this).offset().top; // 対象要素の位置を取得
      el.targetHeight = $(this).outerHeight(); // 対象要素のborder、paddingを含んだ高さを取得(marginも含めたい場合は「()」内に「true」を追記する)
      el.windowScroll = $(window).scrollTop(); // 現在のスクロール量を取得
      el.windowHeight = $(window).height(); // ドキュメント全体の高さ(スクロールバー含ない)を取得(表示領域部分の高さ)

      if (el.windowScroll < el.targetPosition - el.windowHeight || el.windowScroll > el.targetPosition + el.targetHeight) {
        // ドキュメント全体の高さ(スクロールバー含ない)内(表示領域)に対象要素の位置が入っていなければ処理
        if (!el.firstDisplayOnlyFlag) {
          // 判定フラグが「false(複数回)」の場合に処理
          $(this).removeClass('is-animated'); // フェードアニメーション表示させる要素から「is-animated」classを削除する
        } else {
          // 判定フラグが「true(1回のみ)」の場合に処理
          return false; // 処理を中断
        }
      } else {
        // ドキュメント全体の高さ(スクロールバー含ない)内(表示領域)に対象要素の位置が入っていれば処理
        $(this).addClass('is-animated'); // フェードアニメーション表示させる要素に「is-animated」classを付与する
      }
    });
  });
}());

※「load」イベントになっている箇所が若干「JavaScript」のみでの記述している方と違うくらいの違いになります
もし、動作しなかったらすみません、その際はお問合せからメッセージ頂くかコメントにて教えて頂けると幸いです

まとめ

今回は「JavaScriptでスクロールに応じて「ふわっと」フェードインするアニメーションの作り方」について簡単にはなりますが、HTML・CSS・JavaScriptでの作り方を説明させていただきました!

「animation」や「@keyframes」などもでてきたので、知らなかった方やもっと詳しく知りたいという方は下記の外部サイトが参考になるかなと思いますので参考にしてみてください。

参考サイト

animation

@keyframes

デモページ

デモページはこちらになります。

See the Pen JavaScriptでスクロールに応じて「ふわっと」フェードインするアニメーションの作り方(1回のみ、複数回を指定可能) by hiroyuki.miyauchi (@hiromiya) on CodePen.

※各言語ボタンを押し下し、ソースコードをLIVE(リアルタイム)で書き換えて表示・実行結果を確認できます。

最後にもう一度ポイントをおさらい

  • 「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名は別に分けて使いわけよう
  • 今回「CSS」でのアニメーションの記述はあくまでよく使われそうな一例にすぎないのでJavaScriptはそのままでCSSの内容さえ書き換えれば色々なパターンのスクロール時のアニメーションが実装可能かと思いますので色々自信で追記や変更してみていろんなパターンのアニメーションを試してみよう!
  • フェードインアニメーション表示させたい要素に「js-fadeAnimation」と「fadeUp」や「delay04s」のclassをセットで追記しておく事で、事前にCSSに記述して準備していた動作の組み合わせで色々なパターンのアニメーションを実装することができる!!
  • 「is-animated」classの付与、削除で状態を変化させる事でスクロールに応じてフェードインするアニメーションを再現し実装する事ができる!
  • 「即時実行関数」で「グローバル汚染対策」をすることができる。
  • 「DOMContentLoaded」は最初の HTML 文書の読み込みと解析が完了した時点(スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します)で内部の処理を実行させる事ができる
  • el.firstDisplayOnlyFlag = false;の部分をel.firstDisplayOnlyFlag = true;に変更する事で、アニメーション表示を1回動作するだけに切り替える(変更)事ができるようにしてあるので必要に応じて変更して参考にして頂けると幸いです!

初心者向けで簡単な説明でしたが上記内容も踏まえまして、是非自身でのプログラミングにも役立てて頂けると幸いです。

初心者の方にオススメの学習サービス

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


PAGE TOP
  • MENU
  • HOME
  • PAGE TOP
  • SIDE BAR