Javascript

思わず使ってみたくなる【アニメーション付きスライダー】スニペットまとめ

スライダーに連動させてアニメーションを実装したい時がよくあります。
特に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を使用した凝った作りのスライドアニメーションまで沢山あります。

使用箇所やブラウザ保証に合わせてカッコいいスライドアニメーションを取り入れたいですね。