スライダーに連動させてアニメーションを実装したい時がよくあります。
特にwebサイトのキービジュアル等で使う機会も多いですよね。
この記事では、実際に使ってみたくなるような、主にタイトルやテキストと画像のアニメーション付きのスライダーを【Codepen】よりピックアップしてご紹介いたします。
Simple animated slider with Slick.js
スライダープラグインの【slick.js】を使用したスライドアニメーション。
シンプルな画像拡大エフェクトとテキストフェードインが使いやすそうです。
【IE11】でも動きます。(jQuery使用)
See the Pen Simple animated slider with Slick.js by Alexandre Buffet 😎 (@alexandrebuffet) on CodePen.light
Info Cards
カード形＋blur背景のスライドアニメーション。
気持ちいいイージング、アニメーションのリズム等、参考になる点が沢山あります。スライド内の要素が多いので、表示の順番も参考になりますね。
【IE11】未対応。(jQuery使用)
See the Pen Info Cards by Nathan Taylor (@nathantaylor) on CodePen.light
WebGL Distortion Slider
【three.js】【TweenMax.js】を使用したスライドアニメーションです。
WebGLならではのヌルッとした画像切り替えエフェクトが面白いですね。
【IE11】未対応。(three.js、TweenMax使用)
See the Pen WebGL Distortion Slider by Ash Thornton (@ashthornton) on CodePen.light
Fancy Slider
シンプルなスライドアニメーションですが、ナビゲーションにプログレスバーがあったり、アクセントの四角枠の仕組みだったりが他のスライドと違いがあり参考になります。
アクセントの四角枠以外【IE11】で動作します。
See the Pen Fancy Slider by Nikolay Talanov (@suez) on CodePen.light
Clean Slider With Curved Background
曲線の背景を使用したイージングが気持ちのいいスライドアニメーション。
テキストのフェードイン、フェードアウト背景のフワッとしたアニメーションと合っています。
【IE11】でも動きます。(jQuery使用)
See the Pen Clean Slider With Curved Background by Ruslan Pivovarov (@mrspok407) on CodePen.light
Responsive slider timeline with Swiper
シンプルですが、使い勝手の良さそうな年表スライドアニメーション。
ナビゲーションやシンプルなテキストアニメーションがいいですね。
【IE11】でも動きます。(swiper使用)
See the Pen Responsive slider timeline with Swiper by Bruno Carvalho (@bcarvalho) on CodePen.light
Velo Slider – with Borders
キービジュアルに使えそうなスライドアニメーション。
リンクボタンにマウスオーバーすると画像が全表示になるアニメーションがあります。
【IE11】でも動きます。(jQuery、velocity使用)
See the Pen Velo Slider – with Borders by Stephen Scaff (@StephenScaff) on CodePen.light
Slider with Ripple Effect v1.1
円形の切り替えエフェクトが面白いスライドアニメーション。
画像やテキストがスケールインな点も他と違い参考になります。
画像の色エフェクト以外、【IE11】でも動きます。
See the Pen Slider with Ripple Effect v1.1 by Pedro Castro (@pedrocastro) on CodePen.light
Infinite draggable webgl slider.
マウスドラッグで横スライドするwebGLを使用したスライドアニメーション。
【IE11】未対応。(three.js使用)
See the Pen Infinite draggable webgl slider. by jesper landberg (@ReGGae) on CodePen.light
Ghibli Slider
キャッチーなスライドアニメーション。フェードインやブロックインなど様々なアニメーションが組み合わせられているので参考になる点が多いです。
【IE11】未対応。(jQuery使用)
See the Pen Ghibli Slider by Adam Kuhn (@cobra_winfrey) on CodePen.light
SVG Mask Slider
シンプルなブロックアニメーションを使用したスライダー。
ブロックアニメーションを使い勝手がいいので参考になりますね。
【IE11】でも動きます。(jQUery、TweenMax使用)
See the Pen SVG Mask Slider by Valery Alikin (@AlikinVV) on CodePen.light
Portfolio Carousel with Synchronized Sliders
マウスドラッグとアニメーションが連動しているスライダー。
momentum-sliderというプラグインを使用したデモになっています。
【IE11】未対応。
See the Pen Portfolio Carousel with Synchronized Sliders by lmgonzalves (@lmgonzalves) on CodePen.light
Mask animation with GSAP & SVG
通常のスライドとは違う、テキストのマスクアニメーションです。
テキストのアニメーションが他とはタイプが違うので差別化できますね。
マスクアニメーションは【IE11】でも動きます。(jQuery、swiper、TweenMax使用)
See the Pen Mask animation with GSAP & SVG by Martí Fenosa (@martifenosa) on CodePen.light
Slider Transition (City Slider)
グリッドレイアウト風スライドアニメーション。
背景がグリッドで分かれてアニメーションして、最後にサイズが合うアニメーションがかっこいいですね。
【IE11】未対応。(TweenMax使用)
See the Pen Slider Transition (City Slider) by AndyMan (@Manoylov) on CodePen.light
Free Solo WebGL Displacement Slider
画像やテキストなど、随所に凝ったアニメーションがあるスライダーです。
webGLらしい背景画像切り替えのアニメーションがいいですね。
【IE11】未対応。(three.js、TweenMax、その他複数プラグイン使用)
See the Pen Free Solo WebGL Displacement Slider by Kasper De Bruyne (@kdbkapsere) on CodePen.light
まとめ
以上、今回はスライドとテキストや画像のアニメーションがセットになったスライダーをご紹介いたしました。
シンプルな作りのスライドアニメーションから、webGLやSVGを使用した凝った作りのスライドアニメーションまで沢山あります。
使用箇所やブラウザ保証に合わせてカッコいいスライドアニメーションを取り入れたいですね。
