ホームページやWEBアプリでよく見かけるアイコンや写真にマウスを乗せると大きさが拡大するアニメーションの作り方はとても簡単です。
アニメーションというとJavaScriptを使うのですが、今回紹介するのはCSSのみなのでゴリゴリのプログラマーでなくても実装することができますので紹介します。
また動画もあるので必要に応じて使ってください。
CSSで拡大、ズームアップを作る方法
まずはHTMLとCSSを以下のように想定します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container"></div>
</body>
</html>.container {
width: 100px;
height: 100px;
background-color: red;
}
赤いブロックがブラウザに表示されていますね。
こちらの赤いブロックを拡大するにはCSSで1行追加するだけです。
.container {
width: 100px;
height: 100px;
background-color: red;
/* ここを追記 */
transform: scale(5);
}
ブラウザをリロードすると赤いブロックの大きさが大きく変化していますね。
CSSのtransformプロパティを使うと色んな変化を作ることができて、値にscaleとすることで「拡大」を実現してくれます。
scaleには引数が必要で、「元の大きさを1とした拡大率」を数字で入れます。
今回はscale(5)としたので「5倍の大きさに拡大する」という意味になります。
scaleを使ってアニメーションを作る
scaleを使うことで拡大させることができました。
実際にはマウスを乗せたときにフワッと大きくなる、といったアニメーションで作られることが多いです。
こちらもCSSで実現できて先ほどのコードを以下のように修正します。
.container {
width: 100px;
height: 100px;
background-color: red;
transition: all 1s;
}
.container:hover {
transform: scale(5);
}ブラウザをリロードしただけでは何も変わっていなくて、マウスを乗せることで赤いブロックが拡大するようになりましたね。
「マウスを乗せたとき」というものは「セレクタ名：hover」とするだけでOKです。
最初のコードでtransform：scale(5)は「.container」の中に書いていましたが、「.container : hover」の中に移動させています。
さらに拡大させるスピードを遅らせることで「フワッと」が実現できます。
「.conainer」のなかにtransitionを追加しているためです。
transitionについては過去の記事でも解説しているのでご覧ください。
上記のコードでは「拡大の動きを1秒かけて行う」というものを書いています。
秒数はデザイン次第なので色んな秒数を試して一番適した秒数を指定するようにしましょう。