みなさんごきげんよう。shinoです。今回もまた制作をしていて難しいなと思った部分を自分のより深い理解のために書いていきたいと思います。
早速ですがまずは表現したいものがこちらです。丸にカーソルが乗るとだんだん大きくなり、画像の表示される範囲が変わります。
要素自体の大きさが変わるのではなく、要素の見える範囲を変えるというのがポイントです。
うまく説明できないので下に動画を載せておきます。
動き
実際のコード
詳しい説明は下に書いてあります。
<!-- html, head は省略 -->
<body>
<div class="circle">
<p class="background-image">
<img src="halloween.png" alt="HappyHalloweenと書かれた画像">
</p>
</div>
</body>
img {
width: 100%;
}
.background-image {
width: 500px;
height: 500px;
}
.circle {
position: absolute;
top: 500px;
left: 500px;
clip-path: circle(20px at center);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.circle:hover {
animation-duration: 5s;
animation-name: big;
}
@keyframes big {
0% {
transform: translate(-50%, -50%);
clip-path: circle(20px at center);
}
100% {
transform: translate(-50%, -50%);
clip-path: circle(200px at center);
}
}
解説
はじめに丸にカーソルがhoverしたときに大きさを変えるアニメーションを実行したいので.circle:hoverにアニメーションの実行時間animation-durationとアニメーションの名前animation-nameを書きます。
.circle:hover {
animation-duration: 5s;
animation-name: big;
}
つぎに丸の大きさを変えるアニメーションのキーフレームを@keyframes bigで作り、アニメーション開始時(0%)とアニメーション終了時(100%)の状態を決めます。要素に対して clip-path で丸く切り抜く範囲を変えます。
切り抜く範囲が最初は小さく、そしてだんだん大きくなっていって欲しいので、0%にはclip-path: circle(20px at center)を、100%にはclip-path: circle(200px at center)を書きます。
@keyframes big {
0% {
transform: translate(-50%, -50%);
clip-path: circle(20px at center);
}
100% {
transform: translate(-50%, -50%);
clip-path: circle(200px at center);
}
}
ここで重要なのは 要素の大きさを変える ではなく 要素の見える範囲を変える ということです。
私は当初、transform: scale()で要素そのものの大きさを変えていたので、理想の動きを実現できませんでした。
*clip-pathを使うと要素を好きな形に切り抜くことができます。詳しい説明は下記を参照して下さい。
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path
というわけで終わりたいと思います。
参考になれば嬉しいです。