CSS3アニメーションでつくるインターフェイス表現

第6回 画像をパネルに分けてアニメーションで切り替える

この記事を読むのに必要な時間:およそ 11.5 分

擬似要素::beforeと::afterで加えたデザイン

前掲コード1には擬似要素::before::afterで加えたデザインがあるので補っておく。円形のボタンの外枠と画像を4等分する縦線だ図2)⁠どちらも<label>要素に与えている。

図2 擬似要素::beforeと::afterで加えたボタンの丸い枠と画像の4等分線

図2 擬似要素::beforeと::afterで加えたボタンの丸い枠と画像の4等分線

::before擬似要素がボタンの丸い枠だ。border-radiusプロパティを50%に定めるとかたちが円になる。そのうえで,box-shadowプロパティにより外枠の太さと色を定めた(第3回のメニューバーに外枠を加える参照)⁠

.container label::before {
    content: '';
    width: 24px;
    height: 24px;
    background: rgba(135, 206, 235, 0.9);

    border-radius: 50%;
    box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.3);

}

::after擬似要素には縦線を定めた。色はlinear-gradient()関数で,下に向かって透明から白のグラデーションとした(第2回のメニューに角の丸みと影を加える参照)⁠

.container label:after {
    content: '';
    width: 1px;
    height: 267px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));

}

キャプションをクロスフェードさせる

前述のとおり,キャプションの要素class属性"img-title"と"img-caption")opacityプロパティで表示と非表示を切り替えた。したがって,つぎのようにtransitionプロパティさえ加えれば,滑らかにクロスフェードする。

.img-title, .img-caption {

    opacity: 0;

    transition: 0.8s ease-in-out;
}

さらに,どの画像が表示されているのかわかるように,クリックされたボタンの色も変えよう。つぎのようにして,選ばれた<label>要素の文字と,外枠::before擬似要素)の色を定めた。こちらはtransitionプロパティを加えていないので,クリックすればただちに切り替わる。

#select-img-1:checked ~ label.label-img-1,
#select-img-2:checked ~ label.label-img-2,
#select-img-3:checked ~ label.label-img-3,
#select-img-4:checked ~ label.label-img-4 {
    color: deepskyblue;
}
#select-img-1:checked ~ label.label-img-1::before,
#select-img-2:checked ~ label.label-img-2::before,
#select-img-3:checked ~ label.label-img-3::before,
#select-img-4:checked ~ label.label-img-4::before {
    background: white;
    box-shadow: 0px 0px 0px 4px rgba(0, 191, 255, 0.6);
}

これらの手を加えたCSSの定めが以下のコード2だ。クリックしたボタンの色と画像が切り替わるとともに,キャプションはクロスフェードする図3)⁠

図3 キャプションがクロスフェードしてボタンの色も切り替わる

図3 キャプションがクロスフェードしてボタンの色も切り替わる

コード2 クリックしたボタンの色と画像を切り替えてキャプションはクロスフェードさせる

body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    background: aliceblue;
}
.container {
    width: 400px;
    height: 267px;
    position: relative;
    margin: 0 auto;
    text-align: center;
    border: 15px solid white;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.container label {
    font-style: italic;
    width: 100px;
    height: 30px;
    cursor: pointer;
    color: white;
    line-height: 24px;
    font-size: 20px;
    float: left;
    position: relative;
    margin-top: 230px;
    z-index: 100;
}
.container label::before {
    content: '';
    width: 24px;
    height: 24px;
    background: rgba(135, 206, 235, 0.9);
    position: absolute;
    left: 50%;
    margin-left: -12px;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.3);
    z-index: -1;
}
.container label::after {
    content: '';
    width: 1px;
    height: 267px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    position: absolute;
    bottom: -20px;
    right: 0px;
}
#select-img-1:checked ~ label.label-img-1,
#select-img-2:checked ~ label.label-img-2,
#select-img-3:checked ~ label.label-img-3,
#select-img-4:checked ~ label.label-img-4 {
    color: deepskyblue;
}
#select-img-1:checked ~ label.label-img-1::before,
#select-img-2:checked ~ label.label-img-2::before,
#select-img-3:checked ~ label.label-img-3::before,
#select-img-4:checked ~ label.label-img-4::before {
    background: white;
    box-shadow: 0px 0px 0px 4px rgba(0, 191, 255, 0.6);
}
.container input {
    display: none;
}
.bg-img {
    width: 400px;
    height: 267px;
    position: absolute;
}
.bg-img div {
    width: 100px;
    height: 100%;
    position: relative;
    float: left;
    overflow: hidden;
}
#select-img-1:checked ~ .bg-img {
    background-image: url(images/image_001.png);
}
#select-img-2:checked ~ .bg-img {
    background-image: url(images/image_001.png);
}
#select-img-3:checked ~ .bg-img {
    background-image: url(images/image_001.png);
}
#select-img-4:checked ~ .bg-img {
    background-image: url(images/image_001.png);
}
.img-title, .img-caption {
    font-weight: normal;
    color: white;
    z-index: 100;
    position: absolute;
    width: 100%;
    left: 0px;
    opacity: 0;
    top: 90px;
    transition: 0.8s ease-in-out;
}
.img-title {
    left: 0px;
    font-family: "Oswald", sans-serif;
    font-size: 48px;
    letter-spacing: 3px;
}
.img-caption {
    margin-top: 100px;
    letter-spacing: 0px;
    background: rgba(130, 195, 217, 0.9);
    font-size: 14px;
    padding: 4px 0px;
    font-style: italic;
}
#select-img-1:checked ~ .img-titles h3:nth-child(1) span,
#select-img-2:checked ~ .img-titles h3:nth-child(2) span,
#select-img-3:checked ~ .img-titles h3:nth-child(3) span,
#select-img-4:checked ~ .img-titles h3:nth-child(4) span {
    opacity: 1;
}

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入