網頁開發 網頁設計

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

2016/12/14

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

  最近Apple推出的新款Macbook Pro終於開放線上訂購,第一時間梅干也到官網去湊個熱鬧,看看新款的硬體規格有那邊可自訂選購的,就在邊加的同時,發現到當頁面滾動到上方的選單列時,內容會變成那種磨砂玻璃的模糊效果,這效果比自訂選項還要更吸引梅干,所以就開始研究這個特效是如何製作的。


  本以為是用javascript的模糊語法,最後才發現到,原來這特效只是使用CSS3的模糊屬性而已,真的是太神奇的,所以梅干也花了點時間,將這效果與Boostrap的導覽列整合在一起,讓內容滾動時,也會呈現出模糊的磨砂效果,喜歡這效果的朋友,也一塊來看看囉!


Step1
首先在Bootstrap導覽列下方,加入div的標籤。
[html]
<nav class="navbar navbar-default df-nav navbar-fixed-top" role="navigation">
……
</nav>
<!– 加入這個DIV –>
<div class="blurViewport container">
<div class="content-wrap"></div>
</div>
[/html]
Step2
接著將要模糊的內容素材,放在content的div中。
[html]
<div class="container">
<div class="content">
<!– 顯示的內容 –>
</div>
</div>
[/html]
Step3
再將下方的CSS加入,並且由.df-nav可設定導覽列的顏色,而filter: blur中可設定模糊的強弱。
[css]
.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);
}
[/css]

Step4
最後再加入javascript,這樣就大功告成囉!
[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);
});
});
[/javascript]


Step4
這是filter: blur,5像素的效果。
梅問題-Bootstrap教學-Bootstrap導覽列加入iOS磨砂玻璃的模糊效果


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