マンネリ化におさらば。CODEPENで見つけたクセが強すぎるスライダー5選!

マンネリ化におさらば。CODEPENで見つけたクセが強すぎるスライダー5選!

こんにちは。自分のポートフォリオサイトを作ろうとしたら案件が入り、結局作れずにいる板川です。

さて、今回は箸休めのような記事です。

WebサイトでJavaScriptをよく使う箇所として代表的といっても過言ではないのが「スライダー」。
制作に慣れてくると「slick」や「Owl Carousel」「Felicity」といったjQeuryのスライダープラグインを使って、ある程度自分の中で「これを使っていれば問題ない」といった物がありますよね。いわゆるマンネリ化ってやつです。

今回、紹介するのはそんなマンネリ化を打破する、CODEPENで見つけた「クセが強い」スライダーを5つ紹介します。

Split Slick Slideshow

See the Pen Split Slick Slideshow by Fabio Ottaviani (@supah) on CodePen.

WebGL Distortion Slider

See the Pen WebGL Distortion Slider by Ash Thornton (@ashthornton) on CodePen.

PIXI Displacement Map Slider

See the Pen PIXI Displacement Map Slider by Ash Thornton (@ashthornton) on CodePen.

Smooth 3d perspective slider

See the Pen Smooth 3d perspective slider by Alex Nozdriukhin (@alexnoz) on CodePen.

Infinite draggable webgl slider.

See the Pen Infinite draggable webgl slider. by jesper landberg (@ReGGae) on CodePen.

まとめ

正直、今回紹介するスライダーを案件で使うタイミングがあるかどうか微妙ですが、こういったスライダーが作れると頭の隅に入れておくと良いかと思います。

板川

そのまま使うとアレですが、組み合わせるとそれなりに動きがすごいサイトができるよね。

ではでは。

この記事を書いた人

keishiro

こんにちは、板川恵司朗です。