Bootstrap教學-Bootstrap導覽列加入iOS磨砂玻璃的模糊效果

梅問題-Bootstrap教學-Bootstrap導覽列加入iOS磨砂玻璃的模糊效果
  最近Apple推出的新款Macbook Pro終於開放線上訂購,第一時間梅干也到官網去湊個熱鬧,看看新款的硬體規格有那邊可自訂選購的,就在邊加的同時,發現到當頁面滾動到上方的選單列時,內容會變成那種磨砂玻璃的模糊效果,這效果比自訂選項還要更吸引梅干,所以就開始研究這個特效是如何製作的。
  本以為是用javascript的模糊語法,最後才發現到,原來這特效只是使用CSS3的模糊屬性而已,真的是太神奇的,所以梅干也花了點時間,將這效果與Boostrap的導覽列整合在一起,讓內容滾動時,也會呈現出模糊的磨砂效果,喜歡這效果的朋友,也一塊來看看囉!
Step1
首先在Bootstrap導覽列下方,加入div的標籤。
<nav class="navbar navbar-default df-nav navbar-fixed-top" role="navigation">
  ......
</nav>
<!-- 加入這個DIV -->
<div class="blurViewport container">
  <div class="content-wrap"></div>
</div>

Step2
接著將要模糊的內容素材,放在content的div中。
<div class="container">
  <div class="content">
    <!--  顯示的內容 -->
  </div>
</div> 

Step3
再將下方的CSS加入,並且由.df-nav可設定導覽列的顏色,而filter: blur中可設定模糊的強弱。
.content{
  padding-top: 70px;
}
/*導覽列的背景顏色*/
.df-nav{
  background: rgba(255,255,255,0.4);
}	
.blurViewport {
  position: fixed;
  background: #fff;
  height: 50px;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  z-index: 1029;
}
/*模糊的強弱與透明度*/
.blurViewport>.content-wrap .content {
  opacity: 0.7;
  -webkit-filter: blur(15px);
  filter: blur(15px);
}

Step4
最後再加入javascript,這樣就大功告成囉!
$(function(){
  var getblurContent = $(".content");
  var pagecopy = getblurContent.clone(true);
  var blurryContent = $(".blurViewport .content-wrap");
  var blurryContentViewport = $(".blurViewport");
      blurryContent.append(pagecopy);
  $(window).scroll(function(){
    blurryContentViewport.scrollTop(window.pageYOffset);
   });
});

Step4
這是filter: blur,5像素的效果。
梅問題-Bootstrap教學-Bootstrap導覽列加入iOS磨砂玻璃的模糊效果
Step5
這是filter: blur,10像素的效果,這效果是不是很酷呀!喜歡的朋友,也趕快動手試試看囉!
梅問題-Bootstrap教學-Bootstrap導覽列加入iOS磨砂玻璃的模糊效果
[範例預覽] [範例下載]

相關文章

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    路人甲 說道:

    梅干大,請問如果要做個單純磨砂玻璃效果的div要怎麼設定CSS呢,謝謝。

    回應:
    此範例已是純div與css設定,
    只是把它套用在bootstrap中而已

近期講座

2017 (二月講座)

2017 (一月講座)

更多講座