CSSのアニメーションでエントリーカードの見栄えをよくしたいけど、どうコードを書けばいいか分からない...
こんな疑問を解決していきます。
・CSSでできる3つのアニメーションの実装方法
・各アニメーションの簡単なコード解説
ブログのトップページに移動したときにまず目に入ってくる記事一覧。
その各記事のエントリーカードにマウスカーソルを合わせた(ホバーした)ときにちょっとしたアニメーションが入ると、選択したことが分かりやすくなるし見栄えも良くなって一石二鳥ですよね。
今回はCSSのみでできるエントリーカードアニメーションの実装方法をご紹介していきます。
CSSでできる3つのアニメーションの実装方法
今回ご紹介するエントリーカードのCSSアニメーションは、有名なWordPressテーマの「JIN」「SANGO」「SWALLOW」を参考に作成しました。
- ふわっとエントリーカード(JIN/SANGO風)
- 文字のフェードイン付きエントリーカード(SWALLOW風)
- 拡大&半透明になるエントリーカード(JINのブログカード風)
また、今回は私が現在使用しているテーマの「Cocoon」だけではなく、幅広いテーマに汎用的に使えるCSSコードを紹介したかったため、疑似的に以下の要素をHTMLとCSSでコーディングして説明していきます(クオリティの低さに関してはご容赦ください笑)
.entry-card {
display: flex;
background: #e0efff;
width: 700px;
height: 210px;
padding: 10px;
}
.eye-catch {
width: 180px;
height: 180px;
}
.eye-catch img {
width: 100%;
height: 100%;
}
.title {
padding-left: 10px;
}
<div class="entry-card-0">
<div class="eye-catch-0">
<img src="...../seal.jpg" alt="">
</div>
<div class="title-0">タイトルタイトルタイトルタイトルタイトルタイトルタイトル</div>
</div>
ふわっとエントリーカード(JIN/SANGO風)
ホバーするとふわっと持ち上がるエントリーカードです。
.entry-card {
transition: .3s;
}
.entry-card:hover {
cursor: pointer;
transform: translateY(-5px);
box-shadow: 0 5px 10px rgba(0,0,0,.1);
}
:hover疑似クラスを付けたエントリーカード上にホバーしたとき、transformプロパティでエントリーカードを持ち上げ、box-shadowプロパティで薄い影を付けています。
また、transitionプロパティに.3s(0.3秒)を指定することによって、ふわっと持ち上がるようなアニメーションを実現しています。
文字のフェードイン付きエントリーカード(SWALLOW風)
ホバーするとアイキャッチ画像に「READ MORE」という文字が浮かび上がるエントリーカードです。
.eye-catch {
overflow: hidden;
position: relative;
}
.eye-catch::after{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "READ MORE";
font-family: sans-serif;
font-weight: bold;
font-size: 80%;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: .3s;
}
.entry-card:hover {
cursor: pointer;
}
.entry-card:hover .eye-catch::after{
opacity: 1;
font-size: 130%;
}
.entry-card-2 img {
transition: .3s;
}
.entry-card:hover .eye-catch img {
filter: blur(3px) brightness(60%);
transform: scale(1.1);
}
やや複雑ですが、重要な個所をピックアップして解説します。
2行目:overflowプロパティに「hidden」を指定し、アイキャッチ画像が拡大した際に外側にはみ出さないように制御
3行目:「.eye-catch::after」で「position: absolute;」を使用するため、その親要素である.eye-catchクラスに「position: relative;」の指定
7~11,17~19行目:「position: absolute;」で絶対配置をしつつ、フェードインする文字が上下左右中央揃えになるように「display: flex;」および各プロパティで指定
20行目:通常の表示は「opacity: 0;」で非表示となるように制御
29行目:ホバー時に「opacity: 1;」として文字をフェードイン表示
38,39行目:blurプロパティでアイキャッチ画像をぼかしつつ、transformプロパティで画像を拡大
以下の記事を参考に作成したので、詳細についてはこちらをご覧ください。
拡大&半透明になるエントリーカード(JINのブログカード風)
ホバーするとアイキャッチが少し拡大し、全体が半透明になるエントリーカードです。
こちらはエントリーカードではなく、JINのブログカードを参考にして作成しました。
.entry-card,
.eye-catch img {
transition: .3s;
}
.entry-card:hover {
cursor: pointer;
opacity: 0.7;
}
.entry-card:hover .eye-catch img {
transform: scale(1.1);
}
こちらも考え方は上2つと似たようなものです。
ホバー時にtransformプロパティでアイキャッチ画像を拡大し、opacityプロパティでエントリーカード全体に若干の透明感を与えて選択されていることが分かりやすいアニメーションになっています。
今回はCSSのみでできるエントリーカードアニメーションの実装方法をご紹介しました。
当ブログでは、これ以外にも様々なWordPressのカスタマイズ記事を書いていますので、そちらもぜひ参考にしてみてください。