網頁設計, 網頁資源

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

梅干2016/12/15
梅問題-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磨砂玻璃的模糊效果
[範例預覽] [範例下載]
UAG軍規iPhone防摔殼