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磨砂玻璃的模糊效果
[範例預覽] [範例下載]

相關文章

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟





回應本篇 »

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

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

共 2 梅留言

  • 第2梅
    Pei 說道:

    你好,

    我套用磨砂玻璃效果成功
    不過物件 hover 改變scale時,磨砂背景的物件不會跟著改變scale
    不知道有沒有解決方法 > <

    回應:
    由於磨砂是在下方多一層div,因此當上層若改變大小,也要同步讓下方的磨砂改變大小,
    才能達到一致的效果~
  • 第1梅
    路人甲 說道:

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

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

近期講座

近期講座

更多講座