【Cocoon】ふわっとエントリーカード 【カスタマイズ】

Sponsored link

ふわっと押すエントリーカード

当ブログで使っている、ホバーするだけでふわっと押すエントリーカードのカスタマイズを紹介します。このデザイン、アニメがないとSANGO風らしいです(笑)。

アニメーションはJavascriptで実装されてると、何かと重い…んですよね。もう一つのブログで使っているテーマのエントリーカードを、このブログではCSSだけで実装したいと思ってやってみました。

CSSだけで作ったアニメーションは動作が軽い!

 

Sponsored link

CSSだけで実装

今回いじるのは、Cocoonの子テーマだけです。

まず外観→テーマエディターを選択。

編集するテーマはCocoon Child(子テーマ)であること確認して、CSSを打ち込みます。

 

コードはこちら。まずはコピペで実装してみてください。

/*entry card*/
.ect-vertical-card .entry-card-wrap {
margin-bottom: 24px;
}
.entry-card-wrap {
border:1px #d2d6d6;
box-shadow: 3px 3px 3px 3px #d2d6d6
}
.entry-card-wrap a {
transition: color .3s, background.3s, box-shadow .3s, transform .3s;
}
.entry-card-wrap:hover {
background: #fff;/*カードの色*/
box-shadow: 0 3px 0 #d2d6d6, 0 6px 0 rgba(0,0,0,.2);
transform: translateY(3px);
}
.entry-card-wrap a:active {
transition-duration: .1s;
}
.entry-card .cat-label{
display: none;
}
.eye-catch .cat-label {
border-radius: 5px;
}

 

ポイントとしては、まず.ect-vertical-card .entry-card-wrapのmargin-bottom(画像の赤い囲みの部分)を気持ち広めに取りましょう。

あまり近すぎるとそれぞれのエントリーカードが見づらいです。特にスマホで見たときはそう感じるかもしれませんね。サイトのエントリーカードの配列に合わせて、marginは調整するとよいでしょう。

いまモバイルフレンドリー(スマホやタブレットで操作しやすい、見やすいこと)になっているか?は、とても重要視されています

パソコンよりも小さな画面で見やすくなっていないと、Google Search Console(私はグーグルサチコ先生と呼んでいます笑)から、「このサイトはモバイルフレンドリーじゃありませんわよ」という警告が飛んでくることがあるので注意。

Sponsored link

フワッとする仕組み

下のカードにマウスカーソルを乗せて(ホバー)みてください。ほんのわずかな時間でフワ〜ンとバウンドします。この動きはフワッとさせがいがありますね!

Bound me!

transitionの連続でふわっとさせる

マウスをスッと乗っけて、フワッと押すアニメーション効果はこのコード、transitionとtransition-durationが重要。

こんな感じで、0コンマ数秒の連続で動きを設定。ホバーするとゆっくりと下に沈みこみ、マウスカーソルを離すと、ゆっくり元に戻るようになっています。

a:activeのtransition-durationでは、マウスでエントリーカードを押した時に少し早めに動くように設定しています。

カチッとした動きにしたいときは

それぞれのtransitionを下のように短くすると、カチカチッとした動きになります。

.entry-card-wrap a {
 transition: color .1s, background .1s, box-shadow .1s, transform .1s; 
}

ホバーしてみてください。

Bound me!

 

流行りのフラットデザインもいいですが、こうしたアニメーション効果をポイントで入れると、サイトデザインにメリハリが出ます。動く要素を取り入れると、サイトに個性が出て楽しいですよ!

タイトルとURLをコピーしました