VK ボタンのカスタマイズ例 - マウスホバーでアイコンがアニメーション②

2022年4月25日(月)2022年4月27日(水) 対馬俊彦

対馬俊彦

faa-ring

faa-wrench

faa-horizontal

faa-vertical

faa-flash

faa-bounce

faa-spin

faa-float

faa-pulse

faa-shake

faa-tada

faa-passing

faa-burst

faa-falling

faa-rising

メモ faa-falling と faa-rising は本来の動作をしていないので、そのうちに原因を調べようかな。

→ fa-2xl の指定を削除すると本来の動作をする。Font Awesome 6 と相性が悪い部分があるみたいだ。2022.4.27

参考にしたサイト https://l-lin.github.io/font-awesome-animation/ (font-awesome-animation)

2022.4.27 備忘録

VK ボタンブロックの追加 CSS クラスを以下のように指定する。

faa-parent animated-hover

アイコン文字の前を以下のように指定する。faa-ring の部分がそれぞれ異なる

<i class="far fa-envelope fa-2xl faa-ring"></i>

アイコンが親要素の直下でなくてもスタイルが反映されるように font-awesome-animation.css を書き換えてある。

投稿者プロフィール

対馬俊彦魚沼情報サービス (新潟県南魚沼市)

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら