rgbKineticSliderがカッコいい！！

こんにちは！
台湾でエンジニアをしているゆーたです！
今回はたまたま検索で見つけたrgbKineticSliderがカッコよかったので記事にしてみました！

まずはrgbKineticSliderがどんなものかをみてみます。

マウスの動きに合わせて波打つように背景が動きます。
めっちゃカッコいいですよね！
作成するには以下のGitHubコードを参考に行います。

概要欄には使い方と、プラグインの詳細が細かく記載されています。
それぞれ細かくみてみます。

コード内の内容

色々触ってみたのですが、
コード内は以下のような感じで制御されています。
※cssや導入するJSの内容は省略します。

//html内
<div id="rgbKineticSlider" class="rgbKineticSlider"></div>
  <nav>
    <a href="#" class="main-nav prev" data-nav="previous">Prev</a>
    <a href="#" class="main-nav next" data-nav="next">Next</a>
　　　　</nav>

htmlではid=rgbKineticSliderというものに対してJSが効くように設定されています。navタグのスライダーボタンも作成することが可能です。

//JS内

const images = [
	"images/image-1.jpg",
	"images/image-2.jpg",
	"images/image-3.jpg",
];
const texts = [["FLOWERS"], ["MOUNTAINS"], ["FOREST"]];

const slider = new rgbKineticSlider({
	slideImages: images,
	itemsTitles: texts,

	backgroundDisplacementSprite: "images/map-9.jpg",
	cursorDisplacementSprite: "images/displace-circle.png",

	cursorImgEffect: true,
	cursorTextEffect: false,
	cursorScaleIntensity: 0.6,
	cursorMomentum: 0.2,

	swipe: true,
	swipeDistance: window.innerWidth * 0.35,
	swipeScaleIntensity: 2,

	slideTransitionDuration: 1.2,
	transitionScaleIntensity: 30,
	transitionScaleAmplitude: 160,

	nav: true,
	navElement: ".main-nav",

	imagesRgbEffect: false,
	imagesRgbIntensity: 0.9,
	navImagesRgbIntensity: 80,

	textsDisplay: true,
	textTitleSize: 130,
	textsTiltEffect: true,
	googleFonts: ["Playfair Display: 700"],
	textsRgbEffect: true,
	textsRgbIntensity: 1,
});

JS内は以上のようになっています。
それぞれの意味としては以下の通りです。

const images =
[ "images/image-1.jpg", "images/image-2.jpg", "images/image-3.jpg", ];
スライドしたい画像を配列に入れ、変数imagesに格納する。

const texts = [["FLOWERS"], ["MOUNTAINS"], ["FOREST"]];
画像と同じでスライドしたいテキストを配列に入れ変数textsに格納する。

それぞれのオプションについて

1. slideImages: images:

   • 表示するスライドの画像のリストを指定します。

2. itemsTitles: texts:

   • 各スライドに関連付けられたタイトルまたはテキストを指定します。

3. backgroundDisplacementSprite: "画像ファイルURL":

   • 背景の変位（ディストーション）効果を制御するためのスプライト画像のパスを指定します。

4. cursorDisplacementSprite: "画像ファイルURL":

   • カーソルの変位効果を制御するためのスプライト画像のパスを指定します。

5. cursorImgEffect: true:

   • カーソルが画像の上に乗った時の変位効果の有効/無効を指定します。

6. cursorTextEffect: false:

   • カーソルがテキストの上に乗った時の変位効果の有効/無効を指定します。

7. cursorScaleIntensity: 0.6:

   • カーソルの変位のスケールの強度を設定します。

8. cursorMomentum: 0.2:

   • カーソルの動きのモーメンタム（遅延）を設定します。

9. swipe: true:

   • スワイプ機能の有効/無効を指定します。

10. swipeDistance: window.innerWidth * 0.35:

    • スライドを変更するためのスワイプの最小距離を指定します。

11. swipeScaleIntensity: 2:

    • スワイプ時の変位スケールの強度を設定します。

12. slideTransitionDuration: 1.2:

    • スライド間の遷移の持続時間を秒単位で設定します。

13. transitionScaleIntensity: 30:

    • スライドの遷移時の変位スケールの強度を設定します。

14. transitionScaleAmplitude: 160:

    • スライドの遷移時の変位スケールの振幅を設定します。

15. nav: true:

    • ナビゲーションの有効/無効を指定します。

16. navElement: ".main-nav":

    • ナビゲーションとして使用する要素のセレクタを指定します。

17. imagesRgbEffect: false:

    • 画像のRGB効果の有効/無効を指定します。

18. imagesRgbIntensity: 0.9:

    • 画像のRGB効果の強度を設定します。

19. navImagesRgbIntensity: 80:

    • ナビゲーション画像のRGB効果の強度を設定します。

20. textsDisplay: true:

    • テキストの表示/非表示を指定します。

21. textTitleSize: 130:

    • テキストタイトルのサイズを指定します。

22. textsTiltEffect: true:

    • テキストの傾き効果の有効/無効を指定します。

23. googleFonts: ["Playfair Display: 700"]:

    • 使用するGoogle Fontsを指定します。

24. textsRgbEffect: true:

    • テキストのRGB効果の有効/無効を指定します。

25. textsRgbIntensity: 1:

    • テキストのRGB効果の強度を設定します。

ざっとこんな感じで色んなオプションを追加することが出来るようです。
アレンジしてサイトに導入してみたらおもしろそうですね！

スライダーを自動にしたい場合は以下のようにJSを追記したらできました！

document.addEventListener("DOMContentLoaded", function() {
	let waitingDuration = 2000;
	let counter = 0;
	let clickNextBtn = setInterval(function() {
			let nextBtn = document.querySelectorAll(".main-nav")[1];
			if (counter == 0) {
					counter += 1;
			} else {
					nextBtn.click();
			}
	}, waitingDuration);
});

こんな感じでできました！

rgbkineticsliderが面白かったので、参考にして遊んでみた！
こういうの考える人はすごいなと思う！#Web制作 pic.twitter.com/we5rMMr1Nx

— ゆーた🇯🇵🇹🇼台湾webエンジニア (@trizolyuta) September 26, 2023

TwitterやInstagramやってます！
仕事はフリーで主にweb制作をしております。
台湾好きや興味がある人とお友達になりたいです。
またweb制作の仕事も随時募集中なので、
ポートフォリオを見ていただけると嬉しいです！
DMお待ちしております！

Twitter:@trizolyuta
Instagram:@yuta208817
portoforio:https://nakamayuuta.sakura.ne.jp/