Wordpress

シェアボタンをFABにする(継続的に動かす)【WordPress】【CSS】

  1. HOME >
  2. Wordpress >

シェアボタンをFABにする(継続的に動かす)【WordPress】【CSS】

シェアボタンをFABにする(継続的に動かす)

シェアアイコンをFABにする

  • シェアボタンにアクションをつけたい。
  • シェアボタンをフローティングアクションボタン(FAB)にする。

ココがポイント

結論:
CSSの「animation」を使用すると動きをつけられる。

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様は、シェアボタンを記事内に追加したい、画面スクロールに合わせて移動させたい。

そのように、Webページをレイアウトしたいそう思ったことはありませんか?

今回は、継続的にアクションをして目立つフローティングアクションボタン(FAB)に、シェアボタンをしてみようと思います。

 

1.「FAB」とは

「FAB」とは、フローティングアクションボタンの略であり、UIの上に浮く丸いアイコンのような形でデザインします。製品ストーリーの重要な部分を表現するためのツールとしてよく使われます。

もっと詳しく

FABは、CSSで簡単にデザインできるので、是非目立たせたいアイコンに使用してみてください。

 

2.継続的に動き続けるアニメーション

2.Pattern1_ホッピングするFAB

See the Pen
infinitePoping-animation
by 三好雄介 (@yusuke5028198)
on CodePen.

今回は、継続的にホッピングするアニメーションの名前「infinitePoping」で登録し、セレクタで選んだオブジェクトに「animation」プロパティを使って呼び出しています。値に「infinite」を使用すると継続的なアニメーションになります。
「/*アニメーションの登録*/」以降に、自作のアニメーションを記録すれば、思い通りのアニメーションにできます。

 

3.ポインターを合わせたら動くアニメーション

3.Pattern1_Y軸方向に回転してズームする

See the Pen
rotateY_scaleUP-animation
by 三好雄介 (@yusuke5028198)
on CodePen.

 

3.Pattern2_回転してアイコン変更、最後にPOP

See the Pen
rotateAndPop-animation
by 三好雄介 (@yusuke5028198)
on CodePen.

 

3.Pattern3_ズームアウトしてズームインする

See the Pen
scaleDownToUp-animation
by 三好雄介 (@yusuke5028198)
on CodePen.

 

もっと詳しく

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.