ハンバーガーアイコンに様々なアニメーションを実装できるスタイルシート「Hamburgers」!

2016/04/12

こんにちは。
今回はハンバーガーアイコンに様々なアニメーションを実装できるスタイルシート「Hamburgers」!です。

CSSのファイルを読み込んで、クラスを追加するだけで、ハンバーガーメニューにアニメーションを追加できるライブラリを紹介します。

ハンバーガーアイコンに様々なアニメーションを実装できるスタイルシート「Hamburgers」!

Hamburgers

hamburgers

 

「Hamburgers」をダウンロードしてみよう!

https://github.com/jonsuh/hamburgersにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

「Hamburgers」を設置してみよう!

hamburgers.cssをhead内に読み込みます。

 

html部分を記述します。

 

divだとこんな感じです。

 

追加したいアニメーションのクラスを付けます。

 

用意されているアニメーションのクラスは全18種類です。

hamburger–3dx
hamburger–3dx-r
hamburger–3dy
hamburger–3dy-r
hamburger–arrow
hamburger–arrow-r
hamburger–arrowalt
hamburger–arrowalt-r
hamburger–boring
hamburger–collapse
hamburger–collapse-r
hamburger–elastic
hamburger–elastic-r
hamburger–emphatic
hamburger–emphatic-r
hamburger–slider
hamburger–slider-r
hamburger–spin
hamburger–spin-r
hamburger–spring
hamburger–spring-r
hamburger–stand
hamburger–stand-r
hamburger–squeeze
hamburger–vortex
hamburger–vortex-r

 

現場のプロが教えるSEOの最新常識
現場のプロが教えるSEOの最新常識

 

いかがでしたか。これはいいですね。是非、どこかで使いたいですね。
以上でハンバーガーアイコンに様々なアニメーションを実装できるスタイルシート「Hamburgers」!でした。

Related Post

topへ戻る