<p>jQueryでドロップダウンメニューを実装してみます。<br></p><h2 id="h5a59f43619">ドロップダウンメニューとは</h2><p>プルダウンメニューとも呼ばれます。Webに限らずソフトウェアやアプリなど様々な場面でよく見かけるUIの一種です。</p><blockquote>プルダウンメニューとは、ソフトウェアやWebサイトなどにおけるメニューの表示方法の一種で、クリックなどの操作によって複数のメニュー項目を表示させるタイプの表示方法のことである。<br>ロールスクリーンを下ろすような動作で展開されるため「プルダウン」や「ドロップダウン」などと呼ばれている。</blockquote><p><a href="https://www.weblio.jp/content/%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%83%80%E3%82%A6%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC#:~:text=%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%A8%E3%81%AF%E3%80%81%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2,%E3%81%A8%E5%91%BC%E3%81%B0%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%80%82" target="_blank" rel="noopener noreferrer">「ドロップダウンメニュー」の意味や使い方 Weblio辞書</a><br></p><h2 id="h5ef7d69a3b">成果物</h2><p>1からCSSを書くのは時間がかかるので <strong>Bootstrap5</strong> のCSSをお借りました。<br>操作形態が異なるため、PCではマウスオーバー、モバイルではタップで展開するような仕様となっております。<br></p><h3 id="hce947c89f2">ナビゲーションの仕様について</h3><p>ブラウザ幅が<strong>768px</strong>以上であればリンクは折りたたまずに横並びで表示します。<br>ブラウザ幅が<strong>767.98px</strong>以下であれば、リンクを折りたたんで縦並びで表示します。<br> </p><h3 id="heb4384662b">ドロップダウンメニューの仕様について</h3><p>ブラウザ幅が<strong>768px</strong>以上であればリンクに<span style="color:#333333">マウスポインタが重なった際に展開を行います。</span><br>ブラウザ幅が<strong>767.98px</strong>以下であれば、リンクをクリックした際に<span style="color:#333333">展開を行います。</span></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fjs6we&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fjs6we&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fjs6we%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="h109f43f351">必要なHTMLを記述</h2><h3 id="h63091202a2">全体のHTML</h3><p>ナビゲーションも含めた全体のHTMLとなります。<br>まるごとコピペ頂いて問題ありません。</p><pre><code>&lt;nav class="navbar navbar-expand-md navbar-light bg-light"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
        &lt;button class="navbar-toggler" type="button"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class="collapse navbar-collapse"&gt;
        &lt;ul class="navbar-nav ms-auto mb-2 mb-lg-0"&gt;
            &lt;li class="nav-item"&gt;
            &lt;a class="nav-link active" aria-current="page" href="#"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item dropdown navbar-dropdown"&gt;
            &lt;a
                class="nav-link dropdown-toggle navbar-dropdown-toggle"
                href="#"
                role="button"
            &gt;
                Dropdown
            &lt;/a&gt;
            &lt;ul class="dropdown-menu navbar-dropdown-menu"&gt;
                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;hr class="dropdown-divider" /&gt;&lt;/li&gt;
                &lt;li&gt;
                &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;</code></pre><h3 id="ha78001c723">ドロップダウンメニューの動作に必要なHTML</h3><p>PCでは  <code>.navbar-dropdown</code> にマウスポインタが重なるとドロップダウンメニューが展開します。<br><code>.navbar-dropdown-toggle</code>にイベントリスナーを設定してしまうと、展開したドロップダウンメニューに<br>マウスポインタを移動させた際に非表示となってしまいます。<br><br>モバイルでは<code>.navbar-dropdown-toggle</code> にクリックされるとドロップダウンメニューが展開します。<br><code>.navbar-dropdown</code>にイベントリスナーを設定してしまうと、展開したドロップダウンメニューをクリックした際に<br>非表示となってしまいます。<br><br>PCではドロップダウンメニュー全体、モバイルではリンク項目にだけイベントリスナーを設定しているイメージです。</p><pre><code>&lt;li class="nav-item dropdown navbar-dropdown"&gt;
    &lt;a
        class="nav-link dropdown-toggle navbar-dropdown-toggle"
        href="#"
        role="button"
    &gt;
        Dropdown
    &lt;/a&gt;
    &lt;ul class="dropdown-menu navbar-dropdown-menu"&gt;
        &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;hr class="dropdown-divider" /&gt;&lt;/li&gt;
        &lt;li&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;</code></pre><p><br></p><h3 id="hcb7430d109">必要なJavaScriptを記述</h3><p>まるごとコピペ頂いて問題ありませんが、<br>1行目から3行目については ES modules の記法となるため、<br>不要であれば削除頂いても問題ありません。</p><pre><code>import $ from "jquery";
import "bootstrap/dist/css/bootstrap.min.css";
import "./index.css";


/**
 * ナビゲーションの開閉処理を有効化
 */
const enableNavBarToggle = () =&gt; {
    $(".navbar-toggler").on("click", function () {
        $(".navbar-collapse").slideToggle();
    });
};


/**
 * ナビゲーションの開閉処理を無効化
 */
const disableNavBarToggle = () =&gt; {
    $(".navbar-toggler").off();
};


/**
 * ナビゲーション内のドロップダウンメニューを有効化
 *
 * stop()
 * 第一引数: 現在のアニメーションをゴールまでジャンプさせるか否か
 * 第二引数: 待機状態のアニメーションを破棄するか否か
 */
const enableDropDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-menu").hide();
    $(".navbar-dropdown").on({
        mouseover: function () {
            $(this).find(".navbar-dropdown-menu").stop(false, true).slideDown(300);
        },
        mouseleave: function () {
            $(this).find(".navbar-dropdown-menu").stop(false, true).slideUp(300);
        },
    });
};


/**
 * ナビゲーション内のドロップダウンメニューを無効化
 */
const disableDropDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-menu").hide();
    $(".navbar-dropdown").off();
};


/**
 * ナビゲーション内のプルダウンメニュー処理を有効化
 */
const enablePullDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-toggle").on("click", function () {
        $(this).next().slideToggle();
    });
};


/**
 * ナビゲーション内のプルダウンメニュー処理を無効化
 */
const disablePullDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-toggle").off();
};


/**
 * 画面幅によって有効化と無効化する処理を振り分け
 */
const mediaQueryList = window.matchMedia("(max-width: 767.98px)");
const listener = (event) =&gt; {
    if (event.matches) {
        // 767.98px以下
        disableDropDownMenuNavBar();
        enableNavBarToggle();
        enablePullDownMenuNavBar();
    } else {
        // 768px以上
        disableNavBarToggle();
        disablePullDownMenuNavBar();
        enableDropDownMenuNavBar();
    }
};
mediaQueryList.addEventListener("change", listener);


/**
 * 処理の開始
 */
$(function () {
    listener(mediaQueryList);
});</code></pre><h3 id="hbfde2b377d">ブラウザ幅の取得について</h3><p><code>resize</code>はブラウザに負担がかかるため、間引き処理を実装する必要が出てきます。</p><pre><code>$(window).on('load resize', function(){
 // 処理を記述
});</code></pre><p>そのため、ブラウザ幅がブレイクポイントより 大きく or 小さく なったときに1度だけ実行される<br><code>window.matchMedia</code> をここでは使用しています。</p><pre><code>const mediaQueryList = window.matchMedia("(max-width: 767.98px)");
const listener = (event) =&gt; {
    if (event.matches) {
        // 767.98px以下
    } else {
        // 768px以上
    }
};
mediaQueryList.addEventListener("change", listener);</code></pre><h3 id="h63be7e2d99">イベントの登録について</h3><p>今回は <code>on</code> メソッドを使用して実装していますが、<code>hover</code> メソッドを使用して実装することも可能です。</p><pre><code>$(".navbar-dropdown").hover(
      function() {
        // mouseover
        $(this).find(".navbar-dropdown-menu").stop(false, true).slideDown(300);
      }, function() {
        // mouseleave
        $(this).find(".navbar-dropdown-menu").stop(false, true).slideUp(300);
      }
);</code></pre><p><br></p><h2 id="h3bcda3e6b0">最後に</h2><p>毎回ググってスクラッチで実装するのは時間の無駄なため、<br>記事として登録してすぐに参照できるように致しました。<br><br>実案件ではこのような仕様で実装をよく行うため、<br>よろしければご活用ください。</p>

<ul><li><a href="https://rinblog.org/jquery-drop-down-menu/" target="_blank" rel="noopener noreferrer">【jQuery】ドロップダウンメニューを簡単に実装する【2つ】</a></li></ul>

jQueryでドロップダウンメニューを実装する

<h2 id="h07e1c30a1d">ページネーションとは</h2><p>情報がたくさんあり、そのまま表示してしまうと読みづらいため、<br>ページを分割して情報を読みやすくするコンポーネントのことを指します。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/9fd12ca9e37343f5a694b83e3d0efde9/example-pagination.png" alt=""><br><br>Googleの検索結果ページの一番下などにも設置されており、<br>日常的に使用されているのはないでしょうか。<br>今回はES2015(ES6)を使用して、このコンポーネントを作成してみたいと思います。<br></p><h2 id="h5ef7d69a3b">成果物</h2><p>CodeSandboxを使用して実装致しました。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F16luq&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2F16luq&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2F16luq%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><h3 id="hcf83e1357e"><br></h3><h2 id="hc499e4ad38">解説</h2><h3 id="h109f43f351">必要なHTMLを記述</h3><pre><code>&lt;div class="container"&gt;
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;span id="js-pagination-result-total"&gt;&lt;/span&gt;件中
&nbsp; &nbsp; &nbsp; &nbsp; &lt;span id="js-pagination-result-range-text"&gt;&lt;/span&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;button id="js-button-prev"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 前へ
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;button id="js-button-next"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 次へ
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;nav id="js-pagination-result-range"&gt;&lt;/nav&gt;
&nbsp; &nbsp; &nbsp; &nbsp; 現在のページ: &lt;span id="js-pagination-current"&gt;&lt;/span&gt;
&nbsp; &nbsp; &lt;/div&gt;
&lt;/div&gt;</code></pre><p><br></p><h3 id="heab1cdbf79">必要なJavaScriptを記述する</h3><p>jQueryは使用せず、ES2015(ES6)で書きました。<br>IE11などレガシーブラウザではそのままでは動作しません。<br>Babelなどを用いてトランスパイルしてください。</p><pre><code>// 前へ_DOM指定
const prevButton = document.getElementById("js-button-prev");
// 次へ_DOM指定
const nextButton = document.getElementById("js-button-next");

// 総数
const globalTotalItem = 100;
// 1ページに表示したい件数
const PER_PAGE = 10;
// 初期ページ
var initialPage = 0;
// 現在のページ
var currentPage = 0;

// 配列を任意の数だけ作成
const range = (start, end) =&gt; {
  const array = [...Array(end - start + 1)].map((_, i) =&gt; {
    return start + i;
  });
  return array;
};

// 閲覧中の情報の件数の範囲を表示
const rangeCurrentPage = () =&gt; {
  if (!globalTotalItem) return;
  const start = currentPage * PER_PAGE + 1;
  const text =
    (currentPage + 1) * PER_PAGE &lt; globalTotalItem
      ? `${start}件〜${(currentPage + 1) * PER_PAGE}件目を表示`
      : `${start}件〜${globalTotalItem}件目を表示`;
  return text;
};

// 前へボタン_アクション
prevButton.addEventListener("click", () =&gt; {
  if (initialPage &gt;= currentPage) return;
  currentPage = currentPage - 1;
  render();
});
// 次へボタン_アクション
nextButton.addEventListener("click", () =&gt; {
  if (PER_PAGE * (currentPage + 1) &gt;= globalTotalItem) return;
  currentPage = currentPage + 1;
  render();
});

// レンダリング
const render = () =&gt; {
  document.getElementById(
    "js-pagination-result-total"
  ).innerHTML = globalTotalItem;
  document.getElementById("js-pagination-result-range").innerHTML = range(
    1,
    Math.ceil(globalTotalItem / PER_PAGE)
  );
  document.getElementById(
    "js-pagination-result-range-text"
  ).innerHTML = rangeCurrentPage();
  document.getElementById("js-pagination-current").innerHTML = currentPage + 1;
};

render();</code></pre><p><br>ここまでに紹介したHTMLとJSをコピペいただければ<br>問題なく動作するはずです。<br>ページ番号にリンクは指定されていないため、必要であれば自身で追加をお願いします。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>もともと「○○件中 ○○件 ~ ○○件を表示」のテキストを出力するためスクリプトでしたが、<br>それだけではテストしづらいため、ページ番号を操作できるパーツをいくつか追加致しました。</p>

JavaScript(ES6) でページネーションを作成する

<p>Swiper の背景画像を時間経過と共にズームダウンさせつつ、<br>フェード効果を用いてスライドを切替させてみます。<br></p><h2 id="hf2663dbbc7">動作デモ</h2><p>今回も CodeSandBox を使って実装を行いました。<br>この記事では全体のソースコードは紹介せず、補足だけを行います。<br></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fumij3&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fumij3&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fumij3%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="hc499e4ad38">解説</h2><h3 id="h8d027c8ed3">はじめに</h3><p>ズームアウト（イン）+ フェード効果 は紹介されているブログをよく見かけますが、<br>いずれも <u>拡大された画像が一気に縮小されてから次のスライドが表示される問題 </u>が特定の条件下で発生していました。<br>このような動きは美しくないため、独自に調整を加えた上でご紹介致します。<br></p><h3 id="h9c82a4d4d5">追加されるクラスの役割</h3><p>アニメーションはCSSで実装するため、追加されるクラスについて把握しておく必要があります。</p><pre><code>&lt;!--  スライドの基本クラスです。 --&gt;
&lt;div class="swiper-slide"&gt;&lt;/div&gt;

&lt;!-- 前のスライドに追加されるクラスです。前のスライドが無い場合は追加されません。 --&gt;
&lt;div class="swiper-slide swiper-slide-prev"&gt;&lt;/div&gt;

&lt;!-- 次のスライドに追加されるクラスです。次のスライドが無い場合は追加されません。 --&gt;
&lt;div class="swiper-slide swiper-slide-next"&gt;&lt;/div&gt;

&lt;!-- 表示中のスライドに追加されるクラスです。 --&gt;
&lt;div class="swiper-slide swiper-slide-active"&gt;&lt;/div&gt;</code></pre><p><br></p><h3 id="hf2db5fb692">調整を加えた箇所</h3><p><br>細かな解説は他の方が既に行われているため、ここでは行いません。<br>以下のブログを参考にさせていただきました。<br><a href="https://yumegori.com/zoom-up-slider20191204" target="_blank" rel="noopener noreferrer">背景画像をズームアップしながらフェードで切り替えるスライダー - Swiperで実装する方法</a><br></p><h4 id="hc1b4dd851a">前のスライドに独自のクラスを追加</h4><p>表示中のスライドに追加されるクラス <code>.swiper-slide-active</code> に加えて、<br>前回表示したスライドに <code>.swiper-slide-active-prev</code> というクラスを追加し、<br>ズームアウトのスタイルを定義しています。<br></p><pre><code>.swiper-slide-active-prev .swiper-bg img,
.swiper-slide-active .swiper-bg img {
    animation: zoomDown 10s linear 0s 1 normal both;
}</code></pre><p><br></p><h4 id="h28c6b6942f">スライドを連続で切替できないように</h4><p>一度切り替えた場合は、<code>swiper.speed</code> の値分の時間が経過しないと<br>次の切り替えができないよう、独自のCSSを追加しています。<br><br>連続で切り替えた場合だと、<u>拡大された画像が一気に縮小されてから次のスライドが表示される問題</u> が発生します。</p><pre><code>.swiper-button-prev.swiper-button-disabled-user,
.swiper-button-next.swiper-button-disabled-user {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}
.swiper-pagination-not-clickable {
    opacity: 0.5;
    pointer-events: none;
}</code></pre><p><br><code>slideChange</code>イベント実行時に以下のような処理が働くよう設定しています。</p><pre><code>on: {
  slideChange: () =&gt; {
    // 変数
    const self = swiper;
    const speed = self.params.speed;
    const navPrevButton = self.el.querySelector(".swiper-button-prev");
    const navNextButton = self.el.querySelector(".swiper-button-next");
    const navButtonDisabledUser = "swiper-button-disabled-user";

    // 処理
    _slidesChangeFirst();
    setTimeout(() =&gt; {
      for (let index = 0; index &lt; self.slides.length; index++) {
        self.slides[index].classList.remove("swiper-slide-active-prev");
      }
      _slidesChangeLast();
    }, speed);
    self.slides[self.previousIndex].classList.add("swiper-slide-active-prev");


    // スライド変更後に最初に行う処理
    function _slidesChangeFirst() {
      navPrevButton.classList.add(navButtonDisabledUser);
      navNextButton.classList.add(navButtonDisabledUser);
      self.pagination.el.classList.add("swiper-pagination-not-clickable");
    }
    // スライド変更後に最後に行う処理
    function _slidesChangeLast() {
      navPrevButton.classList.remove(navButtonDisabledUser);
      navNextButton.classList.remove(navButtonDisabledUser);
      self.pagination.el.classList.remove("swiper-pagination-not-clickable");
    }
  }
}</code></pre><p><br>解説は以上となります。</p>

<ul><li><a href="https://yumegori.com/zoom-up-slider20191204" target="_blank" rel="noopener noreferrer">背景画像をズームアップしながらフェードで切り替えるスライダー - Swiperで実装する方法</a></li></ul>

【サンプルあり】Swiperで背景画像をズームダウンしながらフェードで切り替えてみる

<p>JavaScriptで特定の位置までスクロールしたときにアニメーションを実行する<br>スクロールアニメーション を <u>Intersection Observer API (交差監視 API)</u> を使用して実装してみたいと思います。<br><br><a href="https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API" target="_blank" rel="noopener noreferrer">Intersection Observer API - MDN Web Docs</a><br></p><h2 id="he3f9223631">Intersection Observer API とは</h2><blockquote>Intersection Observer API (交差監視 API) は、ターゲットとなる要素が、祖先要素もしくは文書の最上位のビューポートと交差する変更を非同期的に監視する方法を提供します</blockquote><p>MDN公式から引用しています。要素が交差しているか監視してくれるAPIのことを指します。<br></p><h3 id="h36b9b2b09e">scrollイベントでも実装は可能</h3><p><code>scroll</code> イベントでも実装することも可能ですが、以下のよう問題があります。<br></p><h4 id="h348ca61b81">スクロール毎にイベントが発生するためブラウザに大きな負荷がかかりがち</h4><p>間引き処理を加えればある程度抑制は可能ですが、コードの見通しが悪くなりがちです。</p><pre><code>let timer = null;
let delay = 100;
window.addEventListener('scroll', () =&gt; {
   clearTimeout( timer );
   timer = setTimeout(function(){ 
    /* 処理内容 */
  }, delay );
});</code></pre><h4 id="h1261153f80"><br>ブラウザのリサイズが行われた場合に必要なスクロール量の再計算が必要</h4><p><code>resize</code> イベントも発生頻度が高いため、間引き処理が必要となります。</p><pre><code>window.addEventListener("resize", () =&gt; { /* 再計算処理 */ });</code></pre><p><br>Intersection Observer API では間引き処理やリサイズ時の再計算が不要なため、<br>効率的な実装が可能です。<br></p><h3 id="heb8b2adca8">外部ライブラリではだめなのか</h3><p><u>ScrollTrigger</u> などの外部ライブラリを使用しても問題ありませんが、<br>スクロールアニメーション実装のためだけに何十kbもあるライブラリを<br>読み込むのは少々オーバーです。<br><br>複雑な処理を行いたい場合は、機能の揃っている外部ライブラリを使用すべきでしょう。<br>実装する内容に応じて適切な判断を行うべきです。<br></p><h3 id="h310321b33c">対応ブラウザについて</h3><p>モダンブラウザは概ね対応しているため使用しても問題無いと思われます。<br>Internet Explorer 11 には対応していないため、Polyfill や Babel を使用してください。<br></p><h2 id="hf2663dbbc7">動作デモ</h2><p>今回も CodeSandBox を利用して実装を行いました。<br><br>多少重いため、極端に低スペックなPCでは利用が難しいですが<br>VSCodeと操作感がほぼ同じであったり、npmパッケージが簡単にインストールできたりと<br>非常に使いやすいため重宝しています。<br><br>今回は Bootstrap5公式サイト のサンプルページをそのまま利用させていただきました。<br>要素のある位置までスクロールを行うと、フワッと表示されます。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fl3inp&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fl3inp&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fl3inp%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="hc499e4ad38">解説</h2><p>作成した動作デモの仕様について解説します。</p><h3 id="h313db3a8b3">初めに</h3><p>ICS MEDIA 様 の記事にて紹介されていたコードをほぼそのまま利用させていただいております。<strong>画面内に複数の要素が交差していた場合に遅延処理がかかる</strong>よう、改変を行っています。<br><a href="https://ics.media/entry/190902/" target="_blank" rel="noopener noreferrer">JSでのスクロール連動エフェクトにはIntersection Observerが便利</a><br></p><h3 id="had75ff267f">仕様について</h3><p>特定の <code>data属性</code> を持つ要素とビューポートが交差した場合、クラスを追加します。<br>今回は <code>data-anime-trigger</code> をターゲットとして設定します。<br><code>data属性</code> にアニメーション再生前、<code>.-visible</code> にアニメーション再生後のスタイルを定義しておきます。</p><pre><code>&lt;!--  交差前 --&gt;
&lt;div class="item" data-anime-trigger&gt;&lt;/div&gt;

&lt;!--  交差後 --&gt;
&lt;div class="item -visible" data-anime-trigger&gt;&lt;/div&gt;</code></pre><p><br></p><h3 id="he4acd50bde">複数の要素と交差した場合の仕様</h3><p>複数の要素と交差した場合は、HTMLの上から順番にクラスが追加されていきます。<br>クラスの追加される順番を制御する場合は別途処理の追加が必要です。<br></p><h2 id="ha214098e44">まとめ</h2><p>スクロールアニメーションを手軽に実装したい場合はこの方法をお試しください。<br>お疲れ様でした。</p>

<ul><li><a href="https://ics.media/entry/190902/" target="_blank" rel="noopener noreferrer">JSでのスクロール連動エフェクトにはIntersection Observerが便利</a></li><li><a href="https://www.tamausa-kingdom.net/js-product/other1/index.html" target="_blank" rel="noopener noreferrer">スクロールイベントの時の負荷軽減</a></li></ul>

【サンプルあり】Intersection Observer API でスクロールアニメーションを実装する

<p><u>Swiper</u> にアニメーションを絡める機会が増えてきましたので、<br>今回はスライド上に設置したテキストをアニメーションさせながら表示してみます。<br><br>この手の記事はデモがあったほうが絶対良いので、<br><u>CodeSandBox</u>を使って実装を行いました。<br>この記事では全体のソースコードは紹介せず、補足だけを行います。<br></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fpvowl&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fpvowl&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fpvowl%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="ha31941844a">表示中のスライドには専用のクラスが追加される</h2><p>表示中のスライドには <code>.swiper-slide-active</code>というクラスが追加されます。</p><pre><code>&lt;div class="swiper-slide swiper-slide-active"&gt;&lt;/div&gt;
&lt;div class="swiper-slide"&gt;&lt;/div&gt;
...
&lt;div class="swiper-slide"&gt;&lt;/div&gt;</code></pre><p><br>これを利用してアニメーションを実装します。</p><pre><code>.swiper-slide{　opacity: 0　}
.swiper-slide-active{　opacity: 1;　}</code></pre><p><br></p><h2 id="hf75a47eea3">Transitionでも実装は可能</h2><p>今回は <code>animation</code> を使用していますが、<code>transition</code> でも実装は可能です。<br><br><code>.swiper-slide </code>に <code>.swiper-slide-active</code> が追加されることで、<br>アニメーション開始・終了のスタイルが順番に適用され、<br>結果的にアニメーションが再生されたことになります。<br><br>ページの描画完了時に <code>.swiper-slide-active</code>&nbsp;が追加済だった場合、<br>アニメーション終了のスタイルだけが適用されるため、想定とは異なる動作になる恐れがあります。<br><u>CodeSandBox </u>だとこのような動きになってしまうので  <code>animation</code> で実装を行いました。</p><pre><code>.swiper-slide .swiper-catch {
&nbsp; &nbsp; opacity: 0;
&nbsp; &nbsp; transform: translateX(0);
&nbsp; &nbsp; transition: all 0.4s ease;
}
.swiper-slide-active .swiper-catch {
&nbsp; &nbsp; opacity: 1;
&nbsp; &nbsp; transform: translateX(50px);
&nbsp; &nbsp; transition: all 0.4s ease 0.6s;
}</code></pre><p><br></p><h2 id="ha214098e44">まとめ</h2><p><u>Swiper</u> には様々なAPIが用意されておりますが、<br>アニメーションを追加したい場合は、CSSを弄るだけで事足りる場合が多く感じます。<br>スライド上のテキスト以外にもいくつかのアニメーションを実装したので、後日改めて紹介したいと思います。</p>

<ul><li><a href="https://into-the-program.com/swiper-slide-text-fadein/" target="_blank" rel="noopener noreferrer">【Swiper】テキストがフェードインで表示されるスライダーの作り方</a></li></ul>

カテゴリーが「JavaScript」の記事

カテゴリ