SHIDEN DESIGN BLOG

thumnail_20170608

ハンバーガーアイコンをクリックしてメニューが開く際のアニメーション色々

SponsorLink

 
 
 
ハンバーガーアイコン自体のアニメーションは、検索すればいくらでも出てくるのに、表示されるメニューのアニメーションってあまり紹介されてないですよね。
ってことで、オーソドックスなモノと、そこに少しアレンジを加えたモノを作ってまとめてみました。
 

 
 
 

HTMLとCSSの雛形

 
 
ナビゲーション全体のHTMLとCSSは基本的には全て同じですが、アニメーションの参考という部分にフォーカスしていますので、細かいレイアウトは好みで変更してください。
それでもアニメーションは機能するようにしていますし、メニューの数を増やしたり減らしたりしても大丈夫です。たぶん
 

 

 

 
 
 

スライドダウン

 
 
オーソドックスなやつ。
 

 

 
 
 

横からスライド

 
 
オーソドックスなやつ第二弾。
 

 

 
 
 

フェードイン

 
 
オーソドックスなやつ第三弾。
 

 

 
 
 

スライド応用 + メニューを真ん中から

 
 
一旦、別のレイヤーを表示した後、斜め下からスライドしてくるような挙動をみせる感じです。
メニューの中身は、クルッと遅れて表示されます。
 
雛形のHTMLにspanタグを追加し、CSSで必要な要素にtransform、clip-pathを追加していきます。
 

 

 

 

 
 
 

スライド応用2 + メニューをキラッと

 
 
端が斜めになったレイヤーがスライドしてきた後、メニューの中身が遅れてキラッて感じで表示されます。
 
雛形のHTMLにdate属性を使用して、CSSにも変更を加えていきます。
 

 

 

 

 
 
 

フェード + メニューをスライドアップ

 
 
メニューの中身が遅れて、フェードインしながらスライドアップしてきます。
HTMLとCSSは雛形のままでjsだけを少し変更しています。
 

 

 
 
 

最後に

 
 
 
クルッとかキラッとか擬音が多くてごめんなさい。自分の説明力の低さを痛感しました。
 
個人的にテンプレート化しようと思って作り始めたので、シンプルなモノばかりになっていますが、需要があれば使ってください。
 
 
 

SponsorLink

Related Articles