cssでズームのアニメーション作る[サンプルはボタン、サムネ対応など]

f:id:media-gatch:20181201163714j:plain

どうもー・ω・ガッチ(@MediaGatch)です。

cssアニメーションシリーズとして、今回はズームのサンプルを作成しました。

cssでズームのアニメーションを作成したい。ホバーした時に、アニメーションするボタンを作成したい。サムネイルの画像をホバーさせた時にアニメーションさせたい。 こういった方へ使っていただけるサンプルかと思います。

ぜひ、サンプルを使ってcssの面白さに触れてもらえたらと思います。 WEB制作は8年ほどやっていて今では、サーバーの設定やプログラムなんかも作っていますが、最初はhtml/cssからのスタートでしたので、コピペでまず動かせる体験をしてもらえたらと思います。

ではでは、cssのズームアニメーションの作成方法とサンプルを紹介します。

記事の内容はこちら

cssのズームアニメーションを作るサンプル

cssでズームをさせる場合は、css3の transform を使用します。transformの詳しい内容はココでは割愛しますね。

transformは、「変形」という意味なので、分かりやすいかと思います。 僕の場合は、映画のトランスフォーマーでなんとなく覚えてます笑

では早速、cssのズームサンプルです。 全てマウスホバーで動作するようにしています。※スマホの場合は、タップすると動作します。

cssのズームアニメーション サンプル① ボタンのズーム

ボタン自体をズームするサンプルです。 シンプルなアニメーションなので、どのサイトでも使えるのではないかと思います。 影も少し落としているので、ホバー時に少し浮いたような見え方をします。

<div class="area-1">
  <button class="zoom-1">ボタンサンプル</button>
</div>
<style>
.zoom-1{
  display: block;
  width:240px;
  line-height: 40px;
  color:#fff;
  font-weight: bold;
  border-radius:6px;
  background-color: #07c;
  box-shadow:0 2px 10px #999;
  transition:all 0.2s ease-out;
}
.zoom-1:hover{
  transform: scale(1.05);
  box-shadow:0 5px 20px #999;  
}
</style>

cssのズームアニメーション サンプル② ボタンのテキストズーム

ボタン内のテキストをズームさせるアニメーションサンプルです。 こちらもシンプルなアニメーションとしているので、使いやすいのではないでしょうか。

ぜひ使ってみてください。

<div class="area-2">
  <button class="zoom-2">ボタンサンプル2</button>
</div>
<style>
.zoom-2{
  display: block;
  width:240px;
  line-height: 40px;
  color:#fff;
  font-weight: bold;
  font-size: 0.75rem;
  border-radius:6px;
  background-color: #07c;
  box-shadow:0 2px 10px #999;
  transition:all 0.2s ease-out;
}
.zoom-2:hover{
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}
</style>

cssのズームアニメーション サンプル③ サムネイルのズーム

一覧やWEBサイトトップでよく見かけるサムネイル画像がズームするサンプルです。 サンプルでは、htmlのimgタグをtransformしています。

すでにあるサイトにも対応可能で、2、3行cssを追加するだけでアニメーションのあるオシャレサイトへ変身させることができます。

<div class="area-3">
  <img class="zoom-3" src="./css-centering.jpg">
</div>
<style>
.area-3{
  overflow: hidden;
  width:128px;
  height: 128px;
}
.zoom-3{
  transition:all 0.2s ease-out;
  cursor: pointer;
}
.zoom-3:hover{
  transform: scale(1.1);
}
</style>

cssのズームアニメーション サンプル④ サムネイル背景のぼかしズーム

先ほどのサムネイルサンプルの背景画像(background-image)を使用したパターンのサンプルです。 追加でcssのぼかし(filterのblur)を使って画像を少しぼかすようにしています。

<div class="area-4">
  <div class="zoom-4"></div>
</div>
<style>
.area-4{
  overflow: hidden;
  width:256px;
  height:186px;
}
.zoom-4{
  width:100%;
  height:186px;
  background-image: url("./css-zoom.jpg");
  background-position: center;
  background-repeat: no-repeat;
  transition:all 0.2s ease-out;
  cursor: pointer;
}
.zoom-4:hover{
  transform: scale(1.2);
  filter: blur(2px);
}
</style>

cssのズームアニメーション サンプル⑤ サムネイルとテキスト

よりWEBサイトで使えるパターンサンプルです。 実際のサイトではサムネイル画像とテキストのセットで表示させることがほとんどかと思います。 htmlmoaタグを使ってリンクを意識した作りにしています。

ぜひ使ってみてください。

<div class="area-5">
  <a class="zoom-5" href="#">
    <div class="zoom-5-thumb"></div>
    <p class="zoom-5-text">サムネイルとテキストサンプル</p>
  </a>
</div>
<style>
.zoom-5{
  overflow: hidden;
  display: block;
  width:256px;
  text-align: center;
  text-decoration: none;
}
.zoom-5-thumb{
  width:100%;
  height:186px;
  background-image: url("./css-zoom.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size:100%;
  transition:all 0.2s ease-out;
}
.zoom-5:hover .zoom-5-thumb{
  background-size:110%;
  filter: blur(2px);
}
.zoom-5-text{
  padding:5px;
  color: #fff;
  background-color: rgba(0,0,0,0.5);
}
</style>

まとめ

cssのズームアニメションについて5つ紹介しましたが、どれもシンプルで使いやすいものを集めました。 コピぺで使ってみてもらえたらすごく嬉しいです。

ホバー時にアニメーションするボタンや、サムネイル画像のアニメーションなどは派手なアニメーションではないですが、できるようになるとちょっとしたプラスポイントになるかと思いますので、この機会にcssアニメーションに興味を持って覚えていってもらえたらと思います。

他にも何かこんなものを教えて欲しいなどありましたら、いつでもtwitterへ。 WEB製作8年の経験から何かお役に立てることがあるかと思いますので。

twitterはこちら → @MediaGatch