なるの備忘録

エンジニアリングそして営業ができるエンジニアに向けて、日々学んだことをアウトプットしていきます。

CSSのアニメーション機能を使って、扉から飛び出すように画像を表示させる

せっかく学習したのでCSS3のアニメーション機能を使って、扉から飛び出すような画像表示機能を作ってみます。

動作イメージ

最初は扉のような画像が表示されています。
f:id:narunaru7638:20190416230842p:plain

扉にカーソルを重ねると勢いよく扉が開きます。
f:id:narunaru7638:20190416230859p:plain

直後に勢いよく画像が飛び出してきます。
f:id:narunaru7638:20190416230905p:plain

カーソルを画像から離すと画像は小さくなり、扉は閉まります。
f:id:narunaru7638:20190416230930p:plain

論よりコード

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="main">
            <!--  疑似要素:after,:beforeを付けるためにimgタグをspanタグで囲う   -->
            <!--  imgタグのような閉じタグが無い要素は疑似要素が使えない  -->
            <span class="wrap-img"><img src="img/image.png" alt=""></span>
        </div>
    </body>    
</html>

CSS

#main{
    padding: 200px;
}
.wrap-img{
    display: block;
    width: 800px;
    height: 800px;
    position: relative;
    z-index: 0;
    visibility: middle;
    box-sizing: border-box;
    transition: all .3s;
}
/*疑似要素:before,:after*/
/*html上には無いが、要素の前後に要素があるようにできる*/
/*htmlを汚さずにデザインのための要素を付けることが可能*/
.wrap-img::before,
.wrap-img::after{   
    position: absolute;
    /* 画像より手前に表示するため   */
    z-index: 1;
    display: block;
    content: '';
    box-sizing: border-box;
    top: 0;
    /* 親要素の半分の大きさの扉のため*/
    width: 50%;
    height: 100%;
    background-color: rgba(208, 162, 67, 1);
    border: rgba(128, 0, 0, 1) 2px solid;
    box-sizing: border-box;
    /* 0.1秒待った後に0.3秒かけてwidthが変化する(扉が閉まる)   */
    transition: width .3s ease .1s;
}
/*左側の扉となる要素*/
.wrap-img::before{
    left: 0;
}
/*右側の扉となる要素*/
.wrap-img::after{
    right: 0;
}
.wrap-img:hover::before,
.wrap-img:hover::after{
    cursor: pointer;
    /*カーソルを重ねるとwidthを0にする(扉が開く)*/
    width: 0;
    /* 0秒待った後に0.3秒かけてwidthが変化する   */
    transition: width .3s ease 0s;
}
img{
    box-sizing: border-box;
    display: block;
}
img{
    /* カーソルを重ねていないときの画像は小さく   */
    transform: scale(0.8, 0.8);
    transform: all .1s;
}
img:hover{
    cursor: pointer;
    /*  カーソルを重ねると画像は大きくなる   */
    transform: scale(1.2, 1.2);
    transition: transform .2s ease .1s;
}

ポイントまとめ

・疑似要素:before,:afterを使うことで、htmlを汚さずにデザインのための要素を付けることが可能
・imgタグのような閉じタグが無い要素は疑似要素が使えない
・疑似要素のwidthを50%にし、positionを調整、z-indexで画像の手前に持ってくることで扉のように見せる
・扉にカーソルを重ねたらtransitionでwidthを0に変化させる(待ち時間や変化の早さを指定可能)
・扉が空いたら画像が飛び出てくるようにtransitionで画像の大きさが変化する早さを調整