Codeリーダブルコード開発補助php-cs-fixerkozawa2023.11.25テキストを無限ループさせる方法(覚え書き)プログラミング今回はテキストを無限ループさせる方法を記述していきます。画像の無限ループはよくありますが、テキストの無限ループも稀にあったりするので覚えてもらえたら嬉しいです。気になるところをクリックしてください!■実装方法ここでは方法を3つ紹介します。・メリット・デメリット・まとめ■CSSのanimationプロパティを用いた方法animationプロパティとは、要素に対してアニメーションを付与するものであり、アニメーションはキーフレーム(@keyframes)で定めたスタイルに従って動きます。実際のデモと一緒に説明していきます。画面外に溢れた分を見切れるように}</style>■何をしているのかまず全体を覆うslider-wrapを用意します。hiddenをセットで使うことで画面外を見切れさせ、ウィンドウを横にスクロールできてしまう問題を防ぎます。flexとanimationを付与します。flexは要素を横や縦に並び替えるといったもので標準値は横並びになります。これによってテキスト群を横並びにします。animationによって横にスライドする動きを作るのですがslickやswiperのような子要素一つ一つをスライドさせるといった概念ではないため、1つのスライドに対して何秒といった動きはつけられません。アニメーション秒数(ここでは親要素の右端が左端の開始地点までスライドするまでの時間※見切れている要素も含む)がおおよその秒数になります。注意点としてあくまでアニメーションは親要素が動いているだけなので子要素数(スライドの数)が空の状態でも秒数の限り動き続けます。これによってアニメーション秒数が子要素数(スライドの数)より多い場合は空の要素が見えてしまうため、そうならないよう同じ要素を追加する必要があります。アニメーション秒数が短すぎてもスライドの速度が速すぎてしまうためアニメーション秒数を維持しつ子要素数(スライド数)を確保しましょう。ポイントとしてはanimationの最後にbothがとても重要になります。これはanimation-fill-modeプロパティでありアニメーション前後の動きを指定しています。ここでbothとは「開始時に終了時の状態を維持、終了時に開始時の状態に戻る」効果があります。上記のように要素が続け様表示され続ける状態だと状態を維持しつつ、次の動きも用意するというbothの特性が必要になります。「slick」はjQueryライブラリを使用したスライダー作成用のプラグインです。様々なoption(拡張機能)がある中で、テキストを無限ループさせる方法を記述します。slickプラグインを読み込みます。以下はCDN(外部読み込み)の場合です。src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>次に#js-slick-slider(ループさせたい要素を内包した親要素)に対して関数(slickFunction)を定義します。optionとして必要になるのが以下になります。・speed:スライド秒数(数値(ミリ秒)で記入、ここでは文字数において時間を返すsetTextSpeedという関数を別途設けています。・variableWidth:スライド幅の自動計算を行うか(スライド毎に横幅異なるためfalse)1234567・infinite:無限ループさせる(true)・autoplay:自動再生(true)・autoplaySpeed:自動再生間のインターバル秒数(0)・speed:スライド秒数(数値(ミリ秒)で記入、ここでは文字数において時間を返すsetTextSpeedという関数を別途設けています。pauseOnHover:ユーザーアクションに関するもの(ユーザーアクションを起こす時にラグが発生するので基本false)・variableWidth:スライド幅の自動計算を行うか(スライド毎に横幅異なるためfalse)また、上記で設定したspeedに対して、要素毎にスライド秒数を揃えるために.on(“afterChange”)というイベント関数を使用します。speed」となるため要素幅が可変の場合だと要素毎にスライド秒数が異なります。そのため、初期で見越していた要素幅が変わる場合上記のイベント関数を使用して例外処置を取ります。秒数の関数(setTextSpeed)を別途用意しています。実際に作成すると以下のようになります。﻿また、任意ですがsetSlickElementsWidthという関数により子要素(スライド)毎に横幅を指定しています。これを指定することで微妙なラグを防ぐことができます。「swiper」はslick同様にスライダー作成用のプラグインです。こちらはjQueryライブラリが必要がありません。同様にテキストを無限ループさせる方法を記述します。{setSwiperElementsWidth();swiperFunction();});</script>■何をしているのかまずswiperプラグインを読み込みます。以下はCDN(外部読み込み)の場合です。src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>次に#js-swiper-slider(ループさせたい要素を内包した親要素)に対して関数(swiperFunction)を定義します。optionとして必要になるのが以下になります。・speed:スライド秒数(数値(ミリ秒)で記入、ここでは文字数において時間を返すsetTextSpeedという関数を別途設けています。disableOnInteraction:ユーザーアクションに関するもの(ユーザーアクションを起こす時にラグが発生するので基本false)・loop:無限ループ(true)・slidesPerView:左右のスライドをはみ出してみせるか(必要なし:'auto')・speed:スライド秒数(数値(ミリ秒)で記入、ここでは文字数において時間を返すsetTextSpeedという関数を別途設けています。linear;を設定する必要があります。上記で設定したspeedに対して、要素毎にスライド秒数を揃えるために.on(“slideChange”)というイベント関数を使用します。speed」となるため要素幅が可変の場合だと要素毎にスライド秒数が異なります。そのため、初期で見越していた要素幅が変わる場合上記のイベント関数を使用して例外処置を取ります。秒数の関数(setTextSpeed)を別途用意しています。実際に作成すると以下のようになります。﻿また、任意ですがsetSwiperElementsWidthという関数により子要素(スライド)毎に横幅を指定しています。これを指定することで微妙なラグを防ぐことができます。swiperの順です。・javaScriptを記述する必要がない。デメリット・アニメーション秒数によって、同じ子要素(スライド)を追加する必要がある。・1スライド秒数何秒という定義が難しい。■slickメリット・スライドを自動生成・削除してくれるので同じ子要素(スライド)を追加する必要がない。・1スライド毎に秒数指定ができる。・option(拡張機能)が豊富なので、スライダーをやりたい場合はまずこれを重宝する。デメリット・javaScriptの記述が必要。・jQueryライブラリが必要。・若干動きの遅延があり、スライドによって速度が変わることがある。■swiperメリット・jQueryライブラリが必要ない。・スライドを自動生成・削除してくれるので同じ子要素(スライド)を追加する必要がない。・1スライド毎に秒数指定ができる。デメリット・javaScriptの記述が必要。・若干動きの遅延があり、スライドによって速度が変わることがある(slickより目立つ)。・若干動きがカクっとなる時がある。■まとめどの方法にもメリット・デメリットは存在しますが個人的には直感的にできるslickがおすすめです!animationのように空の状態が見えてしまうリスクがないからです。一方でアニメーションのガクつきが気になる方、javaScriptが面倒だという方はanimationをお勧めします!最後まで読んでいただきありがとうございました!それではまたお会いしましょう。kozawaコーダーからWebデザイナーからフロントエンドエンジニアへ。クライアントページ作成や開発周りなど広くやらせてもらってます。US私たち”アライドアーキテクツのエンジニア”は”世界をよりよく変えたい”という想いを強く持ちながらWebサービスを創っています。”日本発、世界的なWebサービスを創る”ことをエンジニアチームは本気で考え、毎日チャレンジしています。