CSSのfilterプロパティを使ったメイン部分がぼけるサイドメニューの作り方

2015/05/25 tips

こんにちは、井畑です。
前々から好きでよく見ているデザインギャラリーサイトMUUUUU.ORGでサイドメニューがぬっと出てきてメイン部分の背景がぼやけるのかっこいいなーと思ったので、実装できるか挑戦してみました。

調べたところ、CSSのfilterを使うのがお手軽な感じだったので、それを採用しています。それではどうぞー!!

サイドメニューがぬっと出て来てぼやけるサイドメニューの作り方

順を追って説明します。まずは基本的なサイドメニューの作り方です。

まずは、サイドメニューを作る

今回はぼやけるのを確認しやすくするために、背景を写真にして作成しました。ねこねこ。右上の「menu」を押すとサイドメニューが現れます。

See the Pen 普通のメニュー by Tetsuya Ihata (@tihata) on CodePen.

サイドメニュー作成時のポイント

ポイントはメニューとメインの部分を入れ子にせず、互いに独立させたところです。

HTML

<!-- ▼メイン部分▼ -->
  <div class="back">
    ふくろのねこ
  </div>
<!-- ▲メイン部分▲ -->

<!-- ▼メニュー部分▼ -->
  <nav class="menu" id="theMenu">
    <div class="menu_wrap">
      <a href="#">Home</a>
      <a href="#">about</a>
      <a href="#">column</a>
      <a href="#">service</a>
      <a href="#">contact</a>
    </div>
    <div id="menuToggle"><i></i>menu</div>
  </nav>
<!-- ▲メニュー部分▲ -->

jQueryで#menuToggleをくりっくすると#theMenuにクラス名が付与されるようにします。そうすることで、cssのpositionが上書きされ、メニューが出現します。toggleClass便利ですー。

jQuery


  // #menuToggleをクリックすると#theMenuに.menu-openがつく
  $('#menuToggle').on('click', function() {
    $('#theMenu').toggleClass('menu-open');
  });

css


.menu {
  position: fixed;
  right: -120px; /* 最初効いているpositionの指定 */
  width: 180px;
  height: 100%;
  top: 0;
  text-align: left;
}

.menu.menu-open {
  right: 0; /* menuをクリックするとこっちが有効になる */
}

サイドメニューがぬっと出るアニメーションをつける

次にサイドメニューがぬっと出るようにアニメーションをつけます。

See the Pen ぬっと出るメニュー by Tetsuya Ihata (@tihata) on CodePen.

ぬっと出るアニメーションのポイント

cssの「transition」でアニメーションの挙動と変化の秒数を設定します。

css

.menu{
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease; /* アニメーションの挙動と変化秒数を設定 */
}

メニューボタンを押すと背景になるメイン部分がぼやけるようにする

いよいよ今日のメイン。ぼやける効果についてです。最初に述べた様にcssのfilterを使います。

See the Pen 背景がぼやけるサイドメニュー by Tetsuya Ihata (@tihata) on CodePen.

背景がぼやけるようにするポイント

先ほどのjQueryに追加で「menu」を押した時に、メイン部分の.backに.back-blurが付与されるように追記します。

jQuery

  $('#menuToggle').on('click', function() {
    $('#theMenu').toggleClass('menu-open');
    // #menuToggleをクリックすると.backに.back-blurがつく
    $('.back').toggleClass('back-blur');
  });

後は.back-blurにcssのfilterを適用させれば完成です。数値によってぼけ具合が変わってきます。

css

.back-blur {
  -webkit-filter: blur(3px); /*ぼかし*/
  filter: blur(3px); /*ぼかし*/
}

細かいとこですが、このままだとぼやけるメインの部分はアニメーションしないので、気になる方は.backと.back-blurにも「transition」を指定しましょう。

css

.menu,
.back,
.back-blur{
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

番外編：filterの他の効果もやってみた

面白そうだったのでfilterの他の効果も試してみました。汎用性の高いセピア色/白黒です。

セピア色になる

See the Pen 背景がセピアになるメニュー by Tetsuya Ihata (@tihata) on CodePen.

白黒になる

See the Pen 背景が白黒になるメニュー by Tetsuya Ihata (@tihata) on CodePen.

他にも彩度や色相の調整コントラストの調整/反転などもできますが、この辺りは背景の要素やサイトの雰囲気を選びそうですね。

最後に

意外と簡単に実装できてびっくりしました。
filterあまり意識したことなかったのですが、サイドメニューだけでなく、アイデア次第で面白い使い方出来そうですね。今回はDEMOだけだったので特に気にならなかったのですが、サイトの構造やぼやけさせる範囲によってはパフォーマンスにも影響がでるかもしれないのでその辺りは注意が必要かもです。

以上です。ばいばい。