フルスクリーンナビゲーションを作る。(スプリットレイアウトバージョン)

フルスクリーンナビゲーションを作る。(スプリットレイアウトバージ

前回「フルスクリーンナビゲーションを作る。(シンプルバージョン)」という記事を書きました。

今回はスプリットレイアウトバージョンのフルスクリーンナビゲーションを作って行きたいと思います。こんな感じになりました。

スプリットレイアウトバージョンのフルスクリーンナビゲーションは下記の記事で紹介してます。

今回はその中で特に下のサイトを参考にさせていただきました。

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!とても便利なサイトがあります。

上記サイトの「Easing」プルダウンでイージングを選択して「Effect」ボタンで実際の動きを確認できます。イメージに合うイージングを見つけたら、下にあるCSSコードの「cubic-bezier」の中の数値をコピペするだけです。

アニメーションで肝心なのは下記です。

  • 何秒かけてアニメーションさせるか(デュレーション)
  • 何秒遅れてアニメーションさせるか(ディレイ)
  • どんなスピードでアニメーションさせるか(イージング)

特に「イージング」はガラリと印象が変わるのでせっかくアニメーションさせるならぜひ設定したいところです。

3〜13行目

「.delay01」〜「.delay11」を作り、「transition-delay」プロパティで0.1秒ずつタイミングを遅らせています。

フルスクリーンナビゲーションの全体ラップ(fullnav)

/*fullnav*/
.fullnav{
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;    
}

全体をラップする「fullnav」は「position: fixed」にして高さ、幅をブラウザ100%にします。 

左側のボックス(fullnav__nav)

/*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*/
.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秒遅らせて」というのが今回のギミックの肝で、これをやらないとフルスクリーンナビゲーションの中身が正常にアニメーションしませんのでご注意を!

まとめ

フルスクリーンナビゲーションのスプリットレイアウトバージョンを作ってみました。レスポンシブとも相性バッチリですし、一度できれば簡単に応用もできると思いますので、アニメーションやレイアウトを変えて色々試してみてくださいね。

Category&Tag