ウェブサイトでも使われることが多く、写真イメージをより魅力的に見せることができるイメージスライダー。ヒーローヘッダーとして利用されることも多く、イメージスライダーを効果的に利用することで、ウェブサイトを訪れたユーザーにより魅力的にコンテンツを見せることもできます。
今回は、ウェブサイト制作で利用したいイメージスライダーをまとめてご紹介します。どんな案件にも対応できる万能コードから、ユーザーをあっと驚かすインタラクティブなものまで幅広く揃えています。またHTMLコードはコピー&ペースト可能で、同時にカスタマイズもできてしまうので、今後のウェブ制作に役立ててみてはいかがでしょう。
垂直型イメージスライダー
くるりと回転したり、スクリーン画面を真っ二つに分割したりと、縦方向へのアニメーション遷移を得意としたイメージスライダーを中心に。
マウスカーソルの動きに合わせてスライドが変化し、スクリーン画面を分割したようなエフェクトが特長のイメージスライダー。
See the PburnsSplit Slick Slideshow by Fabio Ottaviani (@supah) on CodePen.
ぐるりと回転しながらコンテンツが切り替わるスライダーで、画面を二分割した スプリット（英: Suplit）レイアウトが採用されています。
See the Pen Split 3D Carousel by Paul Noble (@paulnoble) on CodePen.
こちらでは、画面を斜めに切り込んだレイアウトをうまく活用したスライダーで、各コンテンツごとに画面中央から切り替わるアニメーションも素敵。
See the Pen Skewed One Page Scroll by Nikolay Talanov (@suez) on CodePen.
矢印キーを上下に動かすことで、コンテンツが切り替わる垂直型イメージスライダーで、同時に文字サイズも変更されるインタラクティブな見た目。
See the Pen Slideshow presentation by Keith Driessen (@enterthegrave) on CodePen.
スライダーコンテンツの切り替えに合わせて、写真イメージを使ってマスキングした数字が表示されます。写真にマウスカーソルを合わせると、写真全体を確認することもできます。
See the Pen Dual Slideshow Demo by Jacob Davidson (@Reklino) on CodePen.
波形のような滑らかな動きをつかったイメージスライダー。
See the Pen Wavescroll (drag background) by Nikolay Talanov (@suez) on CodePen.
A Slideshow with a Blind Transitions
写真イメージをストライプ状に分割し、切り替わるたびにサイズが伸縮する jQueryで実現したイメージスライダー。
See the Pen A slideshow with a blinds transition by Stathis (@stathisg) on CodePen.
水平型イメージスライダー
従来から一般的に利用されることの多い、横方向へのアニメーション遷移を得意としたイメージスライダー用スニペットをまとめています。
Blend Mode Slider – Double Exposure
CSSのブレンドモードを活用し、グラフィックデザインとしても話題の多重露光エフェクトを再現してしまったスライダー。
See the Pen Blend Mode Slider – Double Exposure by Sullivan Nolan (@nolakat) on CodePen.
写真全体をスライス状にして切り替え、見出しタイトルの表示にもアニメーションを加えるなど、マイクロインタラクションに工夫を凝らした作品。
See the Pen Fullscreen slice hero slider by Robert Borghesi (@dghez) on CodePen.
紙吹雪が舞うように表現するイメージスライダー。写真が切り替わるときの色の混ざり具合がとても素敵なインタクラティブ作品。
See the Pen THREE Image Transition by Szenia Zadvornykh (@zadvorsky) on CodePen.
Responsive Parallax Drag-slider With Transparent Letters
文字テキストで写真をマスクし、背景にパラッラスクな動きを加え、立体感を見事に表現したスライダー。モバイル端末表示にも対応しています。
See the Pen Responsive Parallax Drag-slider With Transparent Letters by Ruslan Pivovarov (@mrspok407) on CodePen.
「NEXT」ボタンをクリックすると、背景からコンテンツがふわりと浮かび上がるエフェクト。
See the Pen Popout Slider by Nathan Taylor (@nathantaylor) on CodePen.
Image Slider with Masking Effect
マスクエフェクトを利用したイメージスライダー、シンプルですが利用する機会の多そうな作品のひとつ。
See the Pen Image Slider with Masking Effect by Bhakti Al Akbar (@balapa) on CodePen.
コンテンツが切り替わるたびに、カーテン状にイメージ写真を変更し、ふわりと文字テキストが浮かび上がるエフェクト。
See the Pen Split-screen Slideshow by Sean Free (@seanfree) on CodePen.
じわりじわりと角度やスケールが変化する Ken Burns エフェクトを、CSSのみで表現したイメージスライダー。
See the Pen Ken Burns effect CSS only by Dima (@dimaZubkov) on CodePen.
Ken Burns Effect Fullscreen without JavaScfript
上記スニペット同様に、CSSのみで表現できるスタイリング。
See the Pen Ken Burns Effect fullscreen without js by Nicola Pressi (@ibanez182) on CodePen.
Slick Slideshow with Blur Effect
イメージスライダーの背景部分に、表示しているイメージ写真にぼかしエフェクトを加え、壁紙デザインとして利用しているアイデア。
See the Pen Slick Slideshow with blur effect by Fabio Ottaviani (@supah) on CodePen.
さまざまなウェブサイトでもよく見かけるテクニックのひとつ、フェードイン/アウトをCSSのみでスタイルした、お手軽に利用できるイメージスライダー。
See the Pen CSS Fadeshow by Alexander Erlandsson (@alexerlandsson) on CodePen.
See the Pen Pure CSS – Simple Slider by ari (@tari) on CodePen.
左側に用意されたサムネイルを拡大しながらコンテンツを表示する、マテリアルデザインの動きを取り入れたイメージスライダー。
See the Pen Material Design Shape Slider by Ettrics (@ettrics) on CodePen.
高機能で軽量のアニメーションライブラリ TweenMax を利用し、インタラクティブな動きを実現したイメージスライダーで、写真だけでなく文字テキストにも動きを追加しています。
See the Pen Tweenmax slideshow by Matheus Verissimo (@astrixsz) on CodePen.
サイズの異なるグリッドに配置されたイメージ写真は、切り替わるたびにコロコロと配置が変わり、メインのコンテンツを強調する仕組みとなっています。
See the Pen Nautilus Slideshow by Nikolas Payne (@npayne) on CodePen.
矢印キーでコンテンツを切り替えるたびに、コンテンツが水平方向にするりと変更され、文字テキストにも魅力的なアニメーションが追加されています。
See the Pen Greensock animated slideshow [wip] by Arden (@aderaaij) on CodePen.
ウェブサイトの画面スクリーンいっぱいに切り替わる、フルスクリーン型イメージスライダーは、何かと利用する機会も多く、シンプルに実装できて便利なアイテム。
See the Pen Full Page Slideshow by webinyoureyes (@webinyoureyes) on CodePen.
よりシンプルに実装したいという方は、jQueryスライダー系ライブラリを利用しても良いでしょう。個人的には、レスポンシブ対応のjQueryスライダー系ライブラリ × 11選を参考にさせてもらっています。
サムネイル@ : Isometric People Set by Antikwar- CreativeMarket
参照元リンク : 12 CSS Slideshows – Free Frontend
