こんにちは。自分のポートフォリオサイトを作ろうとしたら案件が入り、結局作れずにいる板川です。
さて、今回は箸休めのような記事です。
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.
まとめ
正直、今回紹介するスライダーを案件で使うタイミングがあるかどうか微妙ですが、こういったスライダーが作れると頭の隅に入れておくと良いかと思います。
そのまま使うとアレですが、組み合わせるとそれなりに動きがすごいサイトができるよね。
ではでは。