スライダーに連動させてアニメーションを実装したい時がよくあります。 特にwebサイトのキービジュアル等で使う機会も多いですよね。
この記事では、実際に使ってみたくなるような、主にタイトルやテキストと画像のアニメーション付きのスライダーを【Codepen】よりピックアップしてご紹介いたします。
Simple animated slider with Slick.js
スライダープラグインの【slick.js】を使用したスライドアニメーション。 シンプルな画像拡大エフェクトとテキストフェードインが使いやすそうです。
Info Cards
カード形＋blur背景のスライドアニメーション。 気持ちいいイージング、アニメーションのリズム等、参考になる点が沢山あります。スライド内の要素が多いので、表示の順番も参考になりますね。
WebGL Distortion Slider
【three.js】【TweenMax.js】を使用したスライドアニメーションです。 WebGLならではのヌルッとした画像切り替えエフェクトが面白いですね。
Fancy Slider
シンプルなスライドアニメーションですが、ナビゲーションにプログレスバーがあったり、アクセントの四角枠の仕組みだったりが他のスライドと違いがあり参考になります。
アクセントの四角枠以
Clean Slider With Curved Background
曲線の背景を使用したイージングが気持ちのいいスライドアニメーション。 テキストのフェードイン、フェードアウト背景のフワッとしたアニメーションと合っています。
Responsive slider timeline with Swiper
シンプルですが、使い勝手の良さそうな年表スライドアニメーション。 ナビゲーションやシンプルなテキストアニメーションがいいですね。
Velo Slider - with Borders
キービジュアルに使えそうなスライドアニメーション。 リンクボタンにマウスオーバーすると画像が全表示になるアニメーションがあります。
Slider with Ripple Effect v1.1
円形の切り替えエフェクトが面白いスライドアニメーション。 画像やテキストがスケールインな点も他と違い参考になります。
Infinite draggable webgl slider.
マウスドラッグで横スライドするwebGLを使用したスライドアニメーション。
Ghibli Slider
キャッチーなスライドアニメーション。フェードインやブロックインなど様々なアニメーションが組み合わせられているので参考になる点が多いです。
SVG Mask Slider
シンプルなブロックアニメーションを使用したスライダー。 ブロックアニメーションを使い勝手がいいので参考になりますね。
Portfolio Carousel with Synchronized Sliders
マウスドラッグとアニメーションが連動しているスライダー。 momentum-sliderというプラグインを使用したデモになっています。
Mask animation with GSAP & SVG
通常のスライドとは違う、テキストのマスクアニメーションです。 テキストのアニメーションが他とはタイプが違うので差別化できますね。
マスクアニメーション
Slider Transition (City Slider)
グリッドレイアウト風スライドアニメーション。 背景がグリッドで分かれてアニメーションして、最後にサイズが合うアニメーションがかっこいいですね。
Free Solo WebGL Displacement Slider
画像やテキストなど、随所に凝ったアニメーションがあるスライダーです。 webGLらしい背景画像切り替えのアニメーションがいいですね。
まとめ
以上、今回はスライドとテキストや画像のアニメーションがセットになったスライダーをご紹介いたしました。
シンプルな作りのスライドアニメーションから、webGLやSVGを使用した凝った作りのスライドアニメーションまで沢山あります。
使用箇所やブラウザ保証に合わせてカッコいいスライドアニメーションを取り入れたいですね。