プログラミング

プログラミング

CSSのみで作成されたカルーセル・スライダー10選!【前篇】

25,465 views

読了時間 : 約2分45秒

Web上では、JavaScriptベースの無料スライダープラグインたくさん見つけることができます。いずれもうまく動作し、すべての最新のブラウザをサポートしていますが、今日ではこれらの機能のほとんどを、CSSだけで複製することができます。

どのカルーセルも独自のスタイルを持っているため、作成するために決定版の「最良の方法」といえるものはありませんが、本記事ではCodePenから、カルーセルを自分で作る際のテンプレートとして使用できるオープンソースのスニペットを10個集めました。

いずれのデザインもスタイルと動作の範囲が異なりますが、すべてCSSコードだけで実行されます。

なお記事は前後篇に分かれています。

 

 

1.Netflix Show Carousel

このNetflixカルーセルは、各ビデオのホバー・トゥ・ズームのアニメーション効果(ホバーすると対象のサムネイルがズームアップされる)で非常にユニークです。カルーセルのリンクはどこにもありませんが、動画で簡単に埋め込むことができます。

このバージョンはCSSのみを使用しているので、ビデオモーダルウィンドウのようなダイナミックエフェクトを加えるのは難しいです。しかし、これを使って、Netflixスタイルのホバーアニメーションが機能するすべてのブラウザーでうまく機能するスライダーを作成することができます。

 

 

2.Annotated Linear Carousel(注釈つき線形カルーセル)

一部のカルーセルでは、注釈を使用して各スライドに字幕や余分なコンテキストを追加しています。HTML / CSSのコードのみで書かれたこのペンを複製すれば、この効果を再現することができます。

矢印や点といったナビゲーション要素がないので、全体がクリック/タッチでコントロールされます。

移動の際には小さなフェーディング効果があり、これもCSSによって制御されています。すべて非常に印象的で、シンプルなUIテンプレートとして素晴らしい作品です。

 

 

3.フェーディングカルーセル

矢印に伴われた小さなドットのナビゲーションを両サイドにもつ、かなりクリーンなフェーディングカルーセルUIです。CSSで作られた、ラジオボタンのように機能する矢印を通じて完全に制御されます。

フェーディング効果は、CSSを介して、カルーセル用のこのSassライブラリのミックスインで作動します

 

 

4.レスポンシブなスライドショー

CSSで制御される別のラジオボタンスライダで、いくつかのキャプションが追加されています。このペンは完全にレスポンシブで、最新のブラウザでも動作するはずです。

CSSはすべてSassで書かれており、さらなる機能にはBourbon mixinsライブラリを使っています。スライディングアニメーションは、コンテンツの移動方向に応じて左右どちらかににパンします。クールな効果で、驚くほど詳細なCSSコードのみで実行されます。

 

 

5.CSS3のテスティモニアルズ・スライダー

顧客による推薦の語は、ランディングページや会社のWebサイトで重要なものです。この推薦スライダーは簡単に実装でき、アニメーションには純粋なCSSを使用していて非常に軽量です。

これらの要素は、モダンかつシンプルなデザイン手法に従っています。あまりにも多くの色、質感、または余分なデザインはありません。
もう少し詳しく知りたいなら、開発者Sara Soueidanによる関連するペンをチェックしてください。もう少しコンパクトなものですが、デザイン的にはさらにセンスのよいものがあります。

 

 

▼後篇はこちら!

 

 

※本記事は、10 Free Pure CSS & Carousel Slidersを翻訳・再構成したものです。

 

 

▼こちらの記事もおすすめです!

 

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
利用可能店舗:メルカリ、コンビニ、ドラッグストア等

金額:※さらにメルペイスマート払で2000円分ポイント!
友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

 
【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

プロモーション コードを追加するで「JP20gd6nv7」を入れてください。
※プロモコードは日本国内でのみ利用可能
 
»当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

Uber

Uber

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

 

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き
 
»当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

おすすめ新着記事

おすすめタグ