今回は背景をhoverすると「どこでもドア」みたいに窓が開いて景色が現れるアニメーションのレイアウトを実装しました。
overflow: hiddenやtransitionを使用しておりコードの解説を見ながら簡単にカスタマイズができます
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのエフェクトのコードはすべて完全オリジナルなのでコピペ大歓迎です。
この記事の目次
どこでもドアみたいに窓が開いて画像がぐわーっと現れるアニメーション
目次
1. どこでもドアみたいに窓が開いて美しい画像が現れるhoverアニメーション
下の画像のような3D画像になります
実際の動きはこちら
コードの確認
<div class="images">
<div class="image">
<img src="https://images.unsplash.com/photo-1513543806865-85e29a7c0352?ixlib=rb-1.2.1&auto=format&fit=crop&w=2775&q=80">
<span>Malta's Day</span>
</div>
<div class="image">
<img src="https://images.unsplash.com/photo-1551607117-21fa129a211d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1720&q=80">
<span>Malta's Evening</span>
</div>
</div>
.images {
display: flex;
width: 100%;
box-sizing: border-box;
height: 60vh;
margin:0 auto;
}
.image {
flex: 1;
/* 画像の配置を指定(指定しないと読み込みの際にサイズが崩れる) */
overflow: hidden;
/* 範囲からはみ出た要素を隠す指定 */
transition: .5s;
margin: 0 2%;
box-shadow: 0 20px 30px rgba(0,0,0,.1);
/* ボックスシャドウで奥行きをつける */
line-height: 0;
}
.image img {
width: 100%;
height: calc(100% - 100vh);
/* アニメーション前の背景の位置を指定 */
object-fit: cover;
/* 画像が伸縮せずに滑らかに表示されるように指定 */
transition: 2.0s;
/* アニメーションの開始から終了までの時間を指定 */
}
.image span {
background : linear-gradient(41deg, purple 25%, orange 50%, rgba(255, 107, 0, 0.48)) fixed;
/* グラデーションカラーを指定 */
font-weight: bold;
color: #fff;
font-size: 3.0vh;
display: block;
text-align: center;
height: 8vh;
line-height: 2.6;
border-top: 3px solid #fff;
}
/* hover後の画像スタイル指定 */
.image:hover > img {
width: 100%;
height: 100%;
}
ここがポイント!
- flexboxとmargin:0 auto;でど真ん中に設置
- overflow: hiddenで枠に収まらないサイズの要素は隠す
- box-shadowで奥行きをつけて立体感を演出
- background : linear-gradient() fixedでグラデーションの指定
- object-fit: coverで画像が伸縮せずに滑らかに表示されるように指定
- transitionで十分な時間を設定し滑らかなアニメーションを実現
- ボックス2つのレイアウトにすることで実際に使用する際のイメージが湧くよう演出
参考
そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!
完全無料で一人前のエンジニアになれるプログラミングスクールあります