NEW ARTICLE
【FE風花雪月】ルナティックな青獅子学級8日目【ファイアーエムブレム】
  • 丸い円からアイコンが飛び出してくる、カッコいいメニューアイコン作ってみた。

丸い円からアイコンが飛び出してくる、カッコいいメニューアイコン作ってみた。

丸い円からアイコンが飛び出してくる、カッコいいメニューアイコン作ってみた。

丸い円があり、そこをhoverもしくはclickすると、
丸い円からさらに小さいアイコンが飛び出してくるというかっこいいメニューバーをcssだけで作ってみた。
正式名称は分からない。

目次

実際に実装してみる。

See the Pen cool menu by blue (@aoiBlue) on CodePen.0


正式名称がわからないので、まずは実際に実装してみた。
実装自体は、以前記事にした、
cssとradioボタンを使ってタブのような挙動を実装する。
で書いたinput要素を使ってcssでクリックイベントを取得し、
checkboxがクリックされると、アイコンが出てくるようにしているだけである。
しかし、アイコンが飛び出してきて少しカッコいい作りに出来た。(アイコンの種類が色々おかしいが)

transformを使って動きを付ける。

次に、transformを使って動きを付けてみた。

See the Pen cool menu by blue (@aoiBlue) on CodePen.0


クリックすると、くるくる回転しながらアイコンが下りてくるようになる。

transformプロパティとは、

transformプロパティは、要素に2D変形、または、3D変形を適用する際に使用

するものである。
要は画像を変形させるのに使うプロパティである。
画像のトリミングなどの際によく使われるのだが、
transitionプロパティと組み合わせることで、cssだけで動きを付けることが可能になる。
今回はrotateというプロパティを使って回転させてみた。
他にもtranslateX(x軸の移動)・translateY(y軸の移動)や、scale(画像を拡大)といった機能がある。

今回はpositionを使って位置を変化させているが、このtranslateを使って表示することも可能である。

他にもかっこいいメニューバーを作ってみる。

See the Pen variaus cool menus by blue (@aoiBlue) on CodePen.0


他にもいろいろ工夫して遊んでみた。
一個目は単純にそれぞれのアイコンごとにアニメーションのスピードをずらすことで、
順番に出てきているかのように見せかけている。
二個目はrotateの応用で、アイコンではなく、
「アイコンを設置した土台部分をrotateする」ことでくるくると回転しながらアイコンが出現するかのようにみせかけている。

まとめ

今回はcssを使ったカッコいい表示のメニューを実装してみた。
最近はよくcssを使っている気がする。(というか、そうするとcodepenを使えるので記事にしやすい)
業務的にはshellや形態素解析を最近はやっているので、
MacのPCを自宅に迎えられればその辺をまとめたい。

cygwinを入れてはいるのだが、正直macのデフォルトターミナルの方が優秀だと思う。
一番は変な方言なくコマンドが使えるlinux機。