CSS3 でクールなスライス画像カルーセル効果を実現

CSS3 でクールなスライス画像カルーセル効果を実現

今日は、CSS を使用してクールな画像カルーセル コンポーネントを作成する方法を学びます。その原理は、ラベル要素をクリックして背景画像とアニメーション効果を切り替えるだけです。中心となるのは、ラベルに関連付けられたラジオ ボタンを使用し、ユニバーサル兄弟セレクターを使用して各画像を見つけることです。

最終的に達成したい効果は次のとおりです。

カルーセルの構成

HTML は、ラジオ ボタンとラベル、4 つのパネルと各画像の「スライス」を含むコンテナー、およびタイトルの 3 つの主要部分で構成されます。 class="cr-bgimg" に設定されたコンテナーは、各画像を 4 つのパネルに分割し、背景画像は background-position 属性によって各パネル内の適切な位置に配置されます。したがって、最初のパネルには 4 つのスライスがあり、それぞれに背景となる画像が含まれ、コンテナーの左端に配置されます。 2 番目のパネルにも 4 つのスライスがあります。これは最初のパネルの右側にあり、画像の 2 番目のスライス部分を表示するために使用されます。

<セクションクラス="cr-container">            
    <!-- ラジオボタンとラベルタグ-->
    <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" チェック済み/>
    <label for="select-img-1" class="cr-label-img-1">1</label>
    <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
    <label for="select-img-2" class="cr-label-img-2">2</label>
    <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
    <label for="select-img-3" class="cr-label-img-3">3</label>
    <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
    <label for="select-img-4" class="cr-label-img-4">4</label>
    <div class="clr"></div>    
    <!-- パネル -->
    <div class="cr-bgimg">
        <div>
            <span>スライス 1 - 画像 1</span>
            <span>スライス 1 - 画像 2</span>
            <span>スライス 1 - 画像 3</span>
            <span>スライス 1 - 画像 4</span>
        </div>
        <div>
            <span>スライス 2 - 画像 1</span>
            スライス 2 - 画像 2
            <span>スライス 2 - 画像 3</span>
            スライス 2 - 画像 4
        </div>
        <div>
            <span>スライス 3 - 画像 1</span>
            <span>スライス 3 - 画像 2</span>
            スライス 3 - 画像 3
            <span>スライス 3 - 画像 4</span>
        </div>
        <div>
            <span>スライス 4 - 画像 1</span>
            スライス 4 - 画像 2
            スライス 4 - 画像 3
            スライス 4 - 画像 4
        </div>
    </div>
    <!-- タイトル -->
    <div class="cr-titles">
        <h3>
            セレンディピティ
            <span>あなたが夢見てきたこと</span>
        </h3>
        <h3>
            <span>アドベンチャー</span>
            楽しみが始まる場所
        </h3>
        <h3>
            <span>自然</span>
            忘れられない体験
        </h3>
        <h3>
            <span>静けさ</span>
            <span>静寂が自然に触れるとき</span>
        </h3>
    </div>
</セクション>

h3 要素には 2 つの span 要素が含まれており、1 つはメイン タイトルで、もう 1 つはサブタイトルです。

CS

簡潔にするために、この記事の CSS ではブラウザのプレフィックスは省略されていますが、取得するコードは完全です。

最初の目標は、ラベル要素をクリックしたときに対応するラジオ ボタンをトリガーすることです。方法は非常に簡単で、ラベル要素の for 属性値をラジオ ボタンの ID 値と一致させるだけです。

2 番目のステップでは、すべての背景画像を正しい位置に配置する必要があります。 3 番目のステップは、ラベルをクリックしたときに対応する画像スライスとタイトルを表示することです。

順を追って見ていきましょう。まず、一番外側のセクション要素のスタイルを設定し、薄い影の効果を与えます。

.cr-コンテナ{
    幅: 600ピクセル;
    高さ: 400px;
    位置: 相対的;
    マージン: 0 自動;
    境界線: 20px 実線 #fff;
    ボックスの影: 1px 1px 3px rgba(0,0,0,0.1);
}

後でユニバーサル兄弟セレクター「~」を使用して対応する画像スライスとタイトルを選択するため、すべてのラベル要素をコードの先頭に配置します。 z-index プロパティを設定してラベル要素が画像とテキストの上に表示されるようにし、margin-top プロパティを使用してラベル要素を全体の上境界線から 350 ピクセル離します。

.cr-コンテナラベル{
    フォントスタイル: 斜体;
    幅: 150ピクセル;
    高さ: 30px;
    カーソル: ポインタ;
    色: #fff;
    行の高さ: 32px;
    フォントサイズ: 24px;
    フロート:左;
    位置: 相対的;
    上マージン: 350px;
    zインデックス: 1000;
}

次に、ラベル要素を美しくするために小さな円を追加しましょう。疑似要素を作成し、テキストの中央に配置します。

.cr-コンテナラベル:before{
    コンテンツ:'';
    幅: 34px;
    高さ: 34px;
    背景: rgba(130,195,217,0.9);
    位置: 絶対;
    左: 50%;
    左マージン: -17px;
    境界線の半径: 50%;
    ボックスの影: 0px 0px 0px 4px rgba(255,255,255,0.3);
    zインデックス:-1;
}

パネル間に区切り線を作成するには、ラベル要素の別の疑似要素を使用し、グラデーションの背景を使用して画像の上端から下端まで拡張します。

.cr-コンテナラベル:after{
    幅: 1px;
    高さ: 400px;
    コンテンツ: '';
    背景: linear-gradient(上、rgba(255,255,255,0) 0%、rgba(255,255,255,1) 100%);
    位置: 絶対;
    下: -20px;
    右: 0px;
}

最後のパネルの右側には区切り線がないので、その幅を 0 に設定します。

.cr-コンテナラベル.cr-label-img-4:after{
    幅: 0px;
}

ラベル スタイルが完成したので、すべてのラジオ ボタンを非表示にすることができます。

.cr-コンテナ入力{
    表示: なし;
}

ラベル要素をクリックすると、対応するラジオ ボタンが選択されます。逆に、ユニバーサル兄弟セレクターを使用して、選択したボタンに対応するラベル要素を選択し、そのテキストの色を変更することもできます。

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
    色: #68abc2;
}

小さな円の色を変更したり、影の効果を追加したりすることもできます。

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
    背景: #fff;
    ボックスの影: 0px 0px 0px 4px rgba(104,171,194,0.6);
}

画像のコンテナーは幅全体を占め、絶対位置に配置されます。このコンテナーは、後で背景画像を現在選択されている画像に設定するために使用されます。デフォルトで表示される画像も必要なので、背景プロパティをいくつか追加しましょう。

.cr-bgimg{
    幅: 600ピクセル;
    高さ: 400px;
    位置: 絶対;
    左: 0px;
    上: 0px;
    zインデックス: 1;
    背景繰り返し: 繰り返しなし;
    背景位置: 0 0;
}

パネルが 4 つあるため、各パネルの幅は 150 ピクセル (600 を 4 で割った値) になります。パネルは並んで表示されるように左にフロートするように設定されており、スライド時にスライスが出てくるのを防ぎたいので、オーバーフロー部分は非表示に設定されています。

.cr-bgimg div{
    幅: 150ピクセル;
    高さ: 100%;
    位置: 相対的;
    フロート: 左;
    オーバーフロー: 非表示;
    背景繰り返し: 繰り返しなし;
}

各スライスは絶対位置に設定されており、パネルの外側に表示したり非表示にしたりするために left:-150px に設定されています。

.cr-bgimg div span{
    位置: 絶対;
    幅: 100%;
    高さ: 100%;
    上: 0px;
    左: -150px;
    zインデックス: 2;
    テキストインデント: -9000px;
}

次に、コンテナと各スライスの背景画像を処理しましょう。

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
    背景画像: url(../images/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
    背景画像: url(../images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
    背景画像: url(../images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
    背景画像: url(../images/4.jpg);
}

また、異なるパネルに応じて、スライスの背景画像の配置を異なるものにする必要があります。

.cr-bgimg div:nth-child(1) span{
    背景位置: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
    背景位置: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
    背景位置: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
    背景位置: -450px 0px;
}

ラベルをクリックすると、すべてのスライスが右にスライドします。

.cr-container input:checked ~ .cr-bgimg div span{
    アニメーション: slideOut 0.6s easy-in-out;
}
@keyframes スライドアウト{
    0%{
        左: 0px;
    }
    100%{
        左: 150px;
    }
}

ただし、選択したラベル タグを除いて、対応する画像スライスは -150 ピクセルから 0 ピクセルまでスライドします。

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
    遷移: 左に 0.5 秒のイーズイン アウト。
    アニメーション: なし;
    左: 0px;
    zインデックス: 10;
}

最後に、h3 タグでメインとサブタイトルのスタイルを設定します。ラベル タグをクリックすると、対応するタイトルの透明度が 0 から 1 に変化します。

.cr-タイトル h3{
    位置: 絶対;
    幅: 100%;
    テキスト配置: 中央;
    上位: 50%;
    zインデックス: 10000;
    不透明度: 0;
    色: #fff;
    テキストシャドウ: 1px 1px 1px rgba(0,0,0,0.1);
    遷移: 不透明度 0.8 秒、イーズインアウト;
}
.cr-titles h3 span:nth-child(1){
    フォントファミリ: 'BebasNeueRegular'、'Arial Narrow'、Arial、サンセリフ;
    フォントサイズ: 70px;
    表示: ブロック;
    文字間隔: 7px;
}
.cr-titles h3 span:nth-child(2){
    文字間隔: 0px;
    表示: ブロック;
    背景: rgba(104,171,194,0.9);
    フォントサイズ: 14px;
    パディング: 10px;
    フォントスタイル: 斜体;
    フォント ファミリ: Cambria、Palatino、「Palatino Linotype」、「Palatino LT STD」、Georgia、serif;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){
    不透明度: 1;
}

それでおしまい!このようにしてスライスされたカルーセル効果が実現されます。もちろん、このエフェクトを通じて、次のようなスライス効果をさらに拡張することもできます。

効果2


効果3

効果4

要約する

以上が、CSS3 で実現したクールなスライス画像カルーセル効果についてのエディターによる紹介です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  チェックボックスとラジオボタンの配置を実装する方法

>>:  DOCTYPE 文書型宣言 (Web ページ愛好家必読)

推薦する

formData 形式タイプを使用してファイルをアップロードする Vue の例

Vue では、一般的にフロントエンドとバックエンドを分離したプロジェクトがあり、データ操作を実装する...

シームレスなトークンリフレッシュを実現する方法

目次1. 需要方法1方法2方法3 2. 実装3. 問題解決質問1: トークンの複数回の更新を防ぐ方法...

163 メールボックスログインボックスインタラクティブデザインの改善体験と共有

LOFTER のコンテストで、ログイン ボックスを再設計できると言及されているのを見ました。過去 2...

Linux 上でプライベート Git サーバーを構築するための詳細なチュートリアル

1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...

MySQL で 2 つのテーブルをクエリする場合の from と join の違いの概要

序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...

Ubuntuがネットワークに接続できない場合の解決策

仮想マシン内の Ubuntu がネットワークに接続できない場合の効果的な解決策: 1. Ubuntu...

MySQL 同時実行制御の原則に関する知識ポイント

Mysql は、高性能なデータ ストレージ サービスを提供する主流のオープン ソース リレーショナル...

すべてのブラウザとの完全な互換性を実現するために最適なプリセットを選択してください

各ブラウザの select タグのプロパティと各ブラウザのサポートが多少異なるため、各ブラウザでの選...

CentOS 6 ZLMediaKit のコンパイルとインストール分析

Centos6にZLMediaKitをインストールするZLMediaKit の作者は Ubuntu ...

html mailto(メール)の実用化について

ご存知のとおり、mailto は Web デザインと制作において非常に実用的な HTML タグです。...

CSS を使用して複数の方法で等高レイアウトを実装するサンプル コード

この記事で説明する等高レイアウトでは、純粋な CSS を使用して、要素の高さを手動で設定することなく...

ウェブサイトがhttpsを有効にした後のSSLのセキュリティ構成と検出

最近のウェブサイトでは SSL を有効にするのが標準となっています。ただし、SSL を設定した後も、...

MySQL エラー 1290 (HY000) の解決方法

私は長い間問題に取り組み、文法上の問題を何度も確認しました。しかし、後でネットで調べてみたら、突然理...

Centos7.2 で mysql5.7 データベースをインストールするための詳細な手順

サーバー上の mysql はバージョン 8.0.12 でインストールされており、ローカルのものはバー...