前回「フルスクリーンナビゲーションを作る。(シンプルバージョン)」という記事を書きました。
今回はスプリットレイアウトバージョンのフルスクリーンナビゲーションを作って行きたいと思います。こんな感じになりました。
スプリットレイアウトバージョンのフルスクリーンナビゲーションは下記の記事で紹介してます。
今回はその中で特に下のサイトを参考にさせていただきました。
Contents
HTML
<div class="fullnav"> <div class="fullnav__nav transition10"> <nav class="gnav"> <ul class="gnav__menu"> <li class="gnav__menu__item transition10 delay05"><a href="">Top</a></li> <li class="gnav__menu__item transition10 delay06"><a href="">About</a></li> <li class="gnav__menu__item transition10 delay07"><a href="">Works</a></li> <li class="gnav__menu__item transition10 delay08"><a href="">Company</a></li> <li class="gnav__menu__item transition10 delay09"><a href="">Contact</a></li> </ul> </nav> </div><!--fullnav__nav--> <div class="fullnav__cnt transition10 delay01"> <div class="fullnav__cnt__inner"> <h3 class="fullnav__cnt__title transition10 delay07">Latest article</h3> <ul class="fullnav__cnt__menu"> <li class="fullnav__cnt__menu__item transition10 delay08"><a href="">article item1</a></li> <li class="fullnav__cnt__menu__item transition10 delay09"><a href="">article item2</a></li> <li class="fullnav__cnt__menu__item transition10 delay10"><a href="">article item3</a></li> <li class="fullnav__cnt__menu__item transition10 delay11"><a href="">article item4</a></li> </ul> </div><!--fullnav__cnt__inner--> </div><!--fullnav__cnt--> </div><!--fullnav-->
フルスクリーンナビゲーションの構成は、フルスクリーンナビゲーション全体をラップする「fullnav」、左側のグローバルナビゲーション部分「fullnav__nav」、右側のコンテンツ部分「fullnav__cnt」となっております。
続いてアニメーションする順番に解説していきます。
2行目
この後のCSSでも書きますが、今回、アニメーションのタイミングはクラス名でコントロールします。「transition10」は1秒かけてアニメーションさせるクラスです。
13行目
次に右側ボックス「fullnav__cnt」に「transition10」と合わせて「delay01」を付与しています。「delay◯◯」クラスはアニメーションを遅らせるクラスです。「delay◯◯」の数字の部分が遅らせる秒数になっています。「delay01」なら0.1秒遅れてアニメーションが始まると言った具合です。
5〜9行目
グローバルナビゲーションの各リストもそれぞれタイミングをずらしてアニメーションさせるので「delay05」〜「delay09」のクラスを付与しました。これで一番最初のリストが0.5秒遅れてアニメーションが始まり、以降、0.1秒ずつ遅れてアニメーションしていきます。
15〜20行目
こちらもグローバルナビゲーションと同じ要領でタイトルとその下の各リストに「delay07」〜「delay11」までのクラスを付与してタイミングをずらします。
CSS
CSSは長いので部分ごとに分けて解説します。
アニメーションのタイミング
/*transition & delay*/ .transition10{transition:all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);} .delay01{transition-delay: .1s;} .delay02{transition-delay: .2s;} .delay03{transition-delay: .3s;} .delay04{transition-delay: .4s;} .delay05{transition-delay: .5s;} .delay06{transition-delay: .6s;} .delay07{transition-delay: .7s;} .delay08{transition-delay: .8s;} .delay09{transition-delay: .9s;} .delay10{transition-delay: 1s;} .delay11{transition-delay: 1.1s;}
HTMLのところで書いたとおり、一度にアニメーションさせるのではなく、左右のボックスやナビゲーションのアイテムを1つずつを細かくタイミングをずらしてアニメーションさせるので、個別のクラスとして作成しておきます。
2行目
今回はすべてのアニメーションを1秒かけて行うので「transition10」クラスで指定します。「cubic-bezier」の数値は正直さっぱりわかりませんが、わからなくてもOK!とても便利なサイトがあります。
Ceaser – CSS Easing Animation Tool – Matthew Lein
上記サイトの「Easing」プルダウンでイージングを選択して「Effect」ボタンで実際の動きを確認できます。イメージに合うイージングを見つけたら、下にあるCSSコードの「cubic-bezier」の中の数値をコピペするだけです。
アニメーションで肝心なのは下記です。
- 何秒かけてアニメーションさせるか(デュレーション)
- 何秒遅れてアニメーションさせるか(ディレイ)
- どんなスピードでアニメーションさせるか(イージング)
特に「イージング」はガラリと印象が変わるのでせっかくアニメーションさせるならぜひ設定したいところです。
3〜13行目
「.delay01」〜「.delay11」を作り、「transition-delay」プロパティで0.1秒ずつタイミングを遅らせています。
/*fullnav*/ .fullnav{ display: none; height: 100%; left: 0; position: fixed; top: 0; width: 100%; }
全体をラップする「fullnav」は「position: fixed」にして高さ、幅をブラウザ100%にします。
/*fullnav__nav*/ .fullnav__nav{ align-items: center; background: #fff; display: flex; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 0; } /*gnav*/ .gnav{ margin: 0 auto; width: 40%; } .gnav__menu__item{ margin:20px 0; opacity: 0; transform: translateY(100px); } .gnav a{ color: #333; text-decoration: none; }
左側のナビゲーション部分です。
25・27行目
グローバルナビゲーション「gnav」をラップする「fullnav__nav」は「display: flex;」、「align-items: center;」にしてグローバルナビゲーションが縦位置のセンターに来るようにします。
30・33行目
アニメーションさせますので初期状態は「opacity: 0;」、「width: 0;」にしておきます。
42・43行目
同じく「gnav」の各リストもアニメーションさせますので「opacity: 0;」、「transform: translateY(100px);」で透明かつ下に移動しておきます。
/*fullnav__cnt*/ .fullnav__cnt{ align-items: center; background: #333; color: #fff; display: flex; height: 100%; left: 30%; opacity: 0; position: absolute; top: 0; width: 0; } .fullnav__cnt__inner{ margin: 0 auto; width: 80%; } .fullnav__cnt__title{ margin-bottom: 20px; opacity: 0; transform: translateY(100px); } .fullnav__cnt__menu{ list-style: none; } .fullnav__cnt__menu__item{ margin:20px 0; opacity: 0; transform: translateY(100px); } .fullnav__cnt__menu__item a{ color: #fff; }
こちらも左側とほとんど同じです。初期状態では透明かつ幅や位置をアニメーションさせたいだけ指定しておきます。
フルスクリーンナビゲーションが開いた状態
/*on fullnav__nav*/ .fullnav.on .fullnav__nav{ opacity: 1; width: 30%; } /*on gnav*/ .fullnav.on .gnav li{ opacity: 1; transform: translateY(0); } /*on fullnav__cnt*/ .fullnav.on .fullnav__cnt{ opacity: 1; width: 70%; } .fullnav.on .fullnav__cnt__title{ opacity: 1; transform: translateY(0); } .fullnav.on .fullnav__cnt__menu__item{ opacity: 1; transform: translateY(0); }
ハンバーガーメニューをクリックしたら「fullnav」にjQueryで「on」クラスを付与しますので、その状態のスタイルを指定していきます。やっていることは単純でそれぞれの要素を
- 透明からを戻す
- 位置、もしくは幅を戻す
これだけです。
jQuery
$('.menu').on('click',function(){ $(this).toggleClass('on'); if($('.fullnav').hasClass('on')){//fullnavが開いている時 $('.fullnav').removeClass('on').fadeOut(); } else{//fullnavが閉じている時 $('.fullnav').fadeIn(); setTimeout(function() { $(".fullnav").addClass("on"); }, 200); } });
前述のとおり、ハンバーガーメニュー「menu」をクリックしたタイミングが発火点なので、その中で処理を書いていきます。
3〜5行目
「if($(‘.fullnav’).hasClass(‘on’)){」でフルスクリーンナビゲーションが開いているか判別しています。
すでに開いている場合は「on」クラスを削除して、「fullnav」をフェードアウトさせます。
6〜10行目
まだ開いていない場合はまず「fullnav」をフェードインさせて、その後、「setTimeout」で0.2秒遅れて「on」クラスを付与しています。
この「0.2秒遅らせて」というのが今回のギミックの肝で、これをやらないとフルスクリーンナビゲーションの中身が正常にアニメーションしませんのでご注意を!
合わせて読みたい
まとめ
フルスクリーンナビゲーションのスプリットレイアウトバージョンを作ってみました。レスポンシブとも相性バッチリですし、一度できれば簡単に応用もできると思いますので、アニメーションやレイアウトを変えて色々試してみてくださいね。
それでは良いWEBデザイン日和を!Have a nice WEBDESIGNDAY!