HOME > 記事アーカイブ > 【Splide.js】無限スクロールするテキストアニメーションの実装方法

2025/01/20

2025/03/02

【Splide.js】無限スクロールするテキストアニメーションの実装方法

こんにちは！WEBコーダーのこんかいです！

今回は、最近流行りのデザインである、無限スクロールでテキストを表示する方法について紹介します！

この記事の目次

1.1. Splideとは？
2.Splide＆Auto Scroll Extensionの導入
- 2-1.(1) CDNリンクを使用する方法
- 2-2.(2) ファイルをダウンロードして導入する方法
3.無限スクロールを作成してみよう
- 3-1.HTMLコード
- 3-2.JavaScript
- 3-3.SCSS
4.まとめ

1. Splideとは？

Splideは、軽量で高性能なJavaScriptのスライダーライブラリです。特徴として以下が挙げられます：

軽量（約29KB）でパフォーマンスが高い
レスポンシブ対応
タッチスワイプに対応
豊富なオプションとAPI

Splide＆Auto Scroll Extensionの導入

(1) CDNリンクを使用する方法

HTMLの<head>タグ内、または<body>終了タグの直前に、以下のコードを追加します。これで、Splideのスタイルシート、JavaScriptコア、そして無限スクロール用のAuto Scroll Extensionが読み込まれます。

CDNリンクを追加するだけで、すぐにSplideを使い始められます。

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<!-- Auto Scroll Extension -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>

HTML

メリット

CDNリンクを使う方法は、セットアップが簡単です。ファイルのダウンロードや管理が不要で、常に最新バージョンを自動で利用できます。

注意点

ただし、インターネット接続が必須のため、オフライン環境では使用できません。また、特定のバージョンに固定したいプロジェクトには向いていません。

(2) ファイルをダウンロードして導入する方法

Splideの公式サイトやnpmからファイルをダウンロードし、プロジェクト内で管理する方法です。

ダウンロード方法

Splideのファイルは次の2つの方法で入手できます。

1つ目は、公式サイト（Splide公式ページ）からsplide.min.jsとsplide-core.min.cssを、Auto Scroll Extensionからsplide-extension-auto-scroll.minをダウンロードします。

2つ目は、npmでコマンドラインからインストールする方法です。以下のコマンドを実行します。

npm install @splidejs/splide
npm install @splidejs/splide-extension-auto-scroll

JavaScript

使用方法

ダウンロードしたファイルをプロジェクトに配置し、HTMLで読み込みます。

<!-- CSS -->
<link rel="stylesheet" href="/path/to/splide.min.css">
<!-- JavaScript -->
<script src="/path/to/splide.min.js"></script>
<!-- Auto Scroll Extension -->
<script src="/path/to/splide-extension-auto-scroll.min.js"></script>

HTML

メリット

ローカル環境で使用でき、バージョンを固定できるため、プロジェクトの一貫性を保てます。

私はこちらの方法で進めていきます。

無限スクロールを作成してみよう

HTMLコード

今回使用するHTMLコードはこちらです！このHTMLの重要なポイントは、p-keyword-slider__splide要素を3つ用意し、それぞれにjs-keyword-carousel-ltr、js-keyword-carousel-rtl、js-keyword-carousel-ltr2という識別用クラスを付与していることです。

これらのクラスによって、JavaScriptで各スライダーを個別に制御することが可能になります。

<div class="p-keyword-slider">
	<div class="p-keyword-slider__label">
		<p class="p-keyword-slider__ttl">テキスト無限スクロール</p>
		<p class="p-keyword-slider__sub-ttl">Splide.js</p>
	</div>
	<div class="p-keyword-slider__splide js-keyword-carousel-ltr splide">
		<div class="splide__track p-keyword-slider__track">
			<ul class="splide__list p-keyword-slider__list">
				<li class="splide__slide p-keyword-slider__slide">
					<a href="" class="p-keyword-slider__link"><span>#</span>Keyword</a>
				</li>
				<li class="splide__slide p-keyword-slider__slide">
					<a href="" class="p-keyword-slider__link"><span>#</span>Keyword</a>
				</li>
				<!-- 任意の数li要素を複製する -->
			</ul>
		</div>
	</div>
	<div class="p-keyword-slider__splide js-keyword-carousel-rtl splide">
		<!-- 一つ目と同じ -->
	</div>
	<div class="p-keyword-slider__splide js-keyword-carousel-ltr2 splide">
		<!-- 一つ目と同じ -->
	</div>
</div>

HTML

JavaScript

今回使用するJavaScriptはこちらです！

document.addEventListener('DOMContentLoaded', function () {
  // 共通の設定オプションを定義
  const defaultOptions = {
    type: 'loop', // スライダーを無限ループさせる
    drag: 'free', // フリードラッグを有効化
    arrows: false, // ナビゲーション矢印を非表示
    pagination: false, // ページネーションを非表示
    autoWidth: true, // 各スライドの幅を自動調整
    gap: 8, // スライド間の間隔
    autoScroll: {
      speed: 0.4, // 自動スクロールの速度
      pauseOnHover: true, // ホバー時にスクロールを一時停止
      pauseOnFocus: false, // フォーカス時の一時停止を無効化
    },
  };

  // 共通の関数でカルーセルを初期化
  function initSplide(selector, customOptions = {}) {
    const element = document.querySelector(selector); // 指定されたセレクタの要素を取得
    if (element) { // 要素が存在する場合のみ処理を実行
      const options = { ...defaultOptions, ...customOptions }; // デフォルト設定とカスタム設定をマージ
      const splide = new Splide(element, options); // Splideインスタンスを作成
      splide.mount(window.splide.Extensions); // Splideを初期化し、拡張機能を有効化
    }
  }

  // 各カルーセルを初期化
  initSplide('.js-keyword-carousel-ltr', {}); // 左から右のスライダー
  initSplide('.js-keyword-carousel-rtl', { direction: 'rtl' }); // 右から左のスライダー { autoScroll: { speed: -0.4}}でも可能
  initSplide('.js-keyword-carousel-ltr2', { start: 6 }); // 開始位置をずらす
});

JavaScript

共通関数initSplideを使用してスライダーを初期化しています。js-keyword-carousel-ltr、js-keyword-carousel-rtl、js-keyword-carousel-ltr2の設定は多くの部分が共通しているため、共通関数を使うことでコードをシンプルに保てます。

 // 各カルーセルを初期化
  initSplide('.js-keyword-carousel-ltr', {}); // 定義のまま使う。
  initSplide('.js-keyword-carousel-rtl', { direction: 'rtl' }); // 右から左のスライダー { autoScroll: { speed: -0.4}}でも可能
  initSplide('.js-keyword-carousel-ltr2', { start: 6 }); // 開始位置をずらす

Sass

上記のように、各カルーセルを個別に初期化とカスタマイズができます！

例えば、initSplide('.js-keyword-carousel-rtl', { direction: 'rtl' });と指定することで、defaultOptionsに右方向スライダーのオプションを追加できます。

また、initSplide('.js-keyword-carousel-ltr2', { start: 6, autoScroll: { speed: 1}});のように指定すれば、値の上書きや複数のオプション設定も可能です。

Splideの初期化時にsplide.mount(window.splide.Extensions);を使用することで、autoScrollオプションが利用できるようになります。

このautoScrollオプションでは、以下のような詳細な設定が可能です：

speed: スライダーのスクロール速度を設定します。負の値にすると逆方向に進みます（※direction: 'rtl'での逆向き設定の方が安定した動作になる感じがしています）
pauseOnHover: マウスホバー時のスクロール一時停止を設定します
pauseOnFocus: フォーカス時のスクロール一時停止を設定します

以下のコードは、これらのオプションをカスタマイズした例です。

autoScroll: {
  speed: 0.6, // 自動スクロールの速度
  pauseOnHover: true, // ホバー時に停止
  pauseOnFocus: true, // フォーカス時にも停止
},

JavaScript

SCSS

今回使用するSCSSはこちらです！

CSSは動きとは関係がないので紹介程度にします。

.p-keyword-slier__ttl{
  @include font(40, 700, 60, 0);
  margin-top: rm(40);
  margin-left: rm(20);
}

.p-keyword-slier__sub-ttl{
  @include font(32, 700, 48, 0);
  margin-top: rm(8);
  margin-left: rm(20);

}
.p-keyword-slider__track{
  padding-block: rm(10);
}

.p-keyword-slider__slide{
  width: fit-content;
}

.p-keyword-slider__link{
  padding: rm(8) rm(16);
  display: flex;
  background: #fff;
  border: 1px solid #303030;
  color: #303030;
  border-radius: 999px;
  width: fit-content;
  @include font(20, 700, 30, 0);
  box-shadow: 4px 4px 0px rgba(0, 0, 0,1);
  transition: all 0.3s ease;
  background-color: #ffffff;
  @media(any-hover: hover) {
    &:hover {
      box-shadow: none;
      translate: 4px 4px;
      background-color: var(--item-color);
      span{
        color: #303030;
      }
    }
  }
  span{
    transition: all 0.3s ease;
    color: var(--item-color);
    margin-right: rm(2);
  }
}

.p-keyword-slider__slide{
  //色をランダムぽく見せるための設定
  &:nth-child(2n){
    .p-keyword-slider__link{
      --item-color:#e7c713;
    }
  }
  &:nth-child(2n - 1){
    .p-keyword-slider__link{
      --item-color:#56e713;
      --text-color:#303030;
    }
  }
  &:nth-child(3n){
    .p-keyword-slider__link{
      --item-color:#28e5eb;
      --text-color:#303030;
    }
  }
  &:nth-child(3n - 1){
    .p-keyword-slider__link{
      --item-color:#f7a116;
    }
  }
}
.js-keyword-carousel-rtl{
  .p-keyword-slider__link{
    span{
      order: 1;
    }
  }
}

Sass

まとめ

Splide.jsを使用することで、シンプルながら効果的な無限スクロールのテキストスライダーを実装できます。ホバー時の一時停止機能や方向の制御など、細かいカスタマイズも可能です。

Swiperより簡単に無限スクロールが実装できるので、是非プロジェクトに合わせてカスタマイズしてみてください！

この記事が「いいね！」と思ったら
ハートをタップ！

累計 70 いいね！

注目度急上昇中！人気記事！

完全未経験から大学生コーダーへ！大学生で月20万円を稼ぐためのコミュニティ活用術！

コラム

2025/02/18

2025/03/03

完全未経験から大学生コーダーへ！大学生で月20万円を稼ぐためのコミュニティ活用術！

こんかい技術メモ

2025/01/20

2025/03/02