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 つはサブタイトルです。

簡潔にするために、この記事の 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 ページ愛好家必読)