Advertisement

image-slider-collection

 

ウェブサイトでも使われることが多く、写真イメージをより魅力的に見せることができるイメージスライダー。ヒーローヘッダーとして利用されることも多く、イメージスライダーを効果的に利用することで、ウェブサイトを訪れたユーザーにより魅力的にコンテンツを見せることもできます。

 

今回は、ウェブサイト制作で利用したいイメージスライダーをまとめてご紹介します。どんな案件にも対応できる万能コードから、ユーザーをあっと驚かすインタラクティブなものまで幅広く揃えています。またHTMLコードはコピー&ペースト可能で、同時にカスタマイズもできてしまうので、今後のウェブ制作に役立ててみてはいかがでしょう。

 

 

css-text-effect-2017
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで
animation-principle-top
PhotoshopVIP編集部: 2015年3月30日に公開された記事を再度編集、追加しています。 フロントエンド・デザイナーやデベロッパーは

 

垂直型イメージスライダー

くるりと回転したり、スクリーン画面を真っ二つに分割したりと、縦方向へのアニメーション遷移を得意としたイメージスライダーを中心に。

 

Split Slick Slideshow

マウスカーソルの動きに合わせてスライドが変化し、スクリーン画面を分割したようなエフェクトが特長のイメージスライダー。

See the PburnsSplit Slick Slideshow by Fabio Ottaviani (@supah) on CodePen.

 

 

Split 3D Carousel

ぐるりと回転しながらコンテンツが切り替わるスライダーで、画面を二分割した スプリット(英: Suplit)レイアウトが採用されています。

See the Pen Split 3D Carousel by Paul Noble (@paulnoble) on CodePen.

 

 

Skewed One Page Scroll

こちらでは、画面を斜めに切り込んだレイアウトをうまく活用したスライダーで、各コンテンツごとに画面中央から切り替わるアニメーションも素敵。

See the Pen Skewed One Page Scroll by Nikolay Talanov (@suez) on CodePen.

 

 

Slideshow Prensentation

矢印キーを上下に動かすことで、コンテンツが切り替わる垂直型イメージスライダーで、同時に文字サイズも変更されるインタラクティブな見た目。

See the Pen Slideshow presentation by Keith Driessen (@enterthegrave) on CodePen.

 

 

Dual Slideshow

スライダーコンテンツの切り替えに合わせて、写真イメージを使ってマスキングした数字が表示されます。写真にマウスカーソルを合わせると、写真全体を確認することもできます。

See the Pen Dual Slideshow Demo by Jacob Davidson (@Reklino) on CodePen.

 

 

Wavescroll(Drag Background)

波形のような滑らかな動きをつかったイメージスライダー。

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.

 

 

Fullscreen Slice Hero Slider

写真全体をスライス状にして切り替え、見出しタイトルの表示にもアニメーションを加えるなど、マイクロインタラクションに工夫を凝らした作品。

See the Pen Fullscreen slice hero slider by Robert Borghesi (@dghez) on CodePen.

 

 

THREE Image Transition

紙吹雪が舞うように表現するイメージスライダー。写真が切り替わるときの色の混ざり具合がとても素敵なインタクラティブ作品。

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.

 

 

Popout Slider

「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.

 

 

Split-Screen Slideshow

コンテンツが切り替わるたびに、カーテン状にイメージ写真を変更し、ふわりと文字テキストが浮かび上がるエフェクト。

See the Pen Split-screen Slideshow by Sean Free (@seanfree) on CodePen.

 

 

Ken Burns Effect Only CSS3

じわりじわりと角度やスケールが変化する 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 Fadeshow

さまざまなウェブサイトでもよく見かけるテクニックのひとつ、フェードイン/アウトをCSSのみでスタイルした、お手軽に利用できるイメージスライダー。

See the Pen CSS Fadeshow by Alexander Erlandsson (@alexerlandsson) on CodePen.

 

 

Pure CSS – Simple Slider

See the Pen Pure CSS – Simple Slider by ari (@tari) on CodePen.

 

 

Material Design Image Slider

左側に用意されたサムネイルを拡大しながらコンテンツを表示する、マテリアルデザインの動きを取り入れたイメージスライダー。

See the Pen Material Design Shape Slider by Ettrics (@ettrics) on CodePen.

 

 

Tweenmax Slideshow

高機能で軽量のアニメーションライブラリ TweenMax を利用し、インタラクティブな動きを実現したイメージスライダーで、写真だけでなく文字テキストにも動きを追加しています。

See the Pen Tweenmax slideshow by Matheus Verissimo (@astrixsz) on CodePen.

 

 

Nautilus Slideshow

サイズの異なるグリッドに配置されたイメージ写真は、切り替わるたびにコロコロと配置が変わり、メインのコンテンツを強調する仕組みとなっています。

See the Pen Nautilus Slideshow by Nikolas Payne (@npayne) on CodePen.

 

 

Greensock Animated Slideshow

矢印キーでコンテンツを切り替えるたびに、コンテンツが水平方向にするりと変更され、文字テキストにも魅力的なアニメーションが追加されています。

See the Pen Greensock animated slideshow [wip] by Arden (@aderaaij) on CodePen.

 

 

Full Page Slideshow

ウェブサイトの画面スクリーンいっぱいに切り替わる、フルスクリーン型イメージスライダーは、何かと利用する機会も多く、シンプルに実装できて便利なアイテム。

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