【Cocoonカスタマイズ】マウスホイールに応じ関連記事を横スクロールする方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

TCDテーマ「HORIZON」は、マウスホイールの動きに応じてコンテンツが横方向へスムーズに流れる独自のレイアウトが特徴的です。
通常の縦スクロール操作をそのまま横スクロールに変換し、写真やカード型コンテンツをダイナミックに見せる演出が魅力の一つとなっています。

国内初の横スクロール専用WordPressテーマ「HORIZON」

TCD開発の横スクロールサイトを制作できるWordPressテーマ「HORIZON」のデモサイト。アートギャラリーやポートフォリオサイトに最適な個性あふれるテンプレートです。当デモサイトで心地いいスクロールモーションをせひ体感してください。

このような横スクロール表現は、関連記事一覧やギャラリーなど、横に並べたいコンテンツに応用すると非常に効果的です。

そこで、本文下の関連記事について「マウスホイール操作に応じて横方向へスクロールする機能」を簡単に実装します。
この記事では、この方法について説明します。

完成イメージ

本ページに完成イメージを反映させます。

実装手順

以下の手順で実装します。

ラベル

JavaScriptを追加

以下のコードを追加します。

jQuery(function ($) {
  $('.related-list').on('wheel', function (e) {
    // デフォルトの縦スクロール動作を無効化
    e.preventDefault();

    // ホイールの縦方向の移動量を取得
    const delta = e.originalEvent.deltaY;

    // 現在の横スクロール位置にホイール移動量を加算して横スクロール
    $(this).scrollLeft($(this).scrollLeft() + delta);
  });
});

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.body .related-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;

  .related-entry-card-wrap {
    flex-shrink: 0;
    width: 300px;
  }
}

さいごに

今回紹介した方法を使えば、TCDテーマ「HORIZON」のように、マウスホイール操作で横方向へスムーズにコンテンツを流すUIを簡単に実装できます。
関連記事やギャラリー、商品リストなど、横並びのコンテンツとの相性も良く、視覚的な訴求力を高めたいサイトにおすすめの手法です。