CSSのアニメーション機能を使って、扉から飛び出すように画像を表示させる
せっかく学習したのでCSS3のアニメーション機能を使って、扉から飛び出すような画像表示機能を作ってみます。
動作イメージ
最初は扉のような画像が表示されています。
扉にカーソルを重ねると勢いよく扉が開きます。
直後に勢いよく画像が飛び出してきます。
カーソルを画像から離すと画像は小さくなり、扉は閉まります。
論よりコード
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で画像の大きさが変化する早さを調整