前回「フルスクリーンナビゲーションを作る。(シンプルバージョン)」という記事を書きました。
今回はスプリットレイアウトバージョンのフルスクリーンナビゲーションを作って行きたいと思います。こんな感じになりました。
スプリットレイアウトバージョンのフルスクリーンナビゲーションは下記の記事で紹介してます。
今回はその中で特に下のサイトを参考にさせていただきました。
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秒遅らせて」というのが今回のギミックの肝で、これをやらないとフルスクリーンナビゲーションの中身が正常にアニメーションしませんのでご注意を！
まとめ
フルスクリーンナビゲーションのスプリットレイアウトバージョンを作ってみました。レスポンシブとも相性バッチリですし、一度できれば簡単に応用もできると思いますので、アニメーションやレイアウトを変えて色々試してみてくださいね。
RELATED ARTICLES
