js 網頁開發

Yahoo!滾動式廣告手法大公開!滾動出現,不滾時n秒自動消失

2017/03/07

梅問題-Yahoo!滾動式廣告手法大公開!滾動出現,不滾時n秒自動消失

  最近是否有發現到yahoo的聯播網廣告,當滾動畫想時,下方就出現廣告鈕,或是廣告BAR,當畫面靜止時,那廣告Banner就會自動的消失,直接使用者再度滾動畫時,則會再顯示出來,這樣的手法相當的特別,除了能吸引瀏覽者的觀注外,同時又能降低畫面的干擾,有別於以往都是採浮動式的固定廣告框,除了干擾閱讀外,也會相當的佔畫面。


  因此當梅干看到Yahoo此次的廣告展示手法時,立即吸引梅干的好奇,就隨手試寫看看,不知不覺中就已完成,而梅干也將作法分享出來,因此有需要的朋友,不妨也可參考看看囉!


Step1
首先,先在網頁中,新一個div並將名稱,命名為「popup」
[html]
<div class="popup">
……放置廣告內容
</div>
[/html]
Step2
接著再把CSS的樣式加入,而這邊只是簡單的底色設定,以及當滑鼠滾動時,加入了簡易的CSS3動畫語法。
[css]
.popup.active {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.popup {
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99999999999;
width: 100%;
height: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transform: translateY(100%);
transform: translateY(100%);
cursor: pointer;
}
[/css]
Step3
最後再加入下方的javascript控制碼,而下方的javascript碼中,主要使用了滾動事件與倒數屬性,因此各位只需修改closetime的關閉時間就可以了,而2000=2秒廣告banner會自動消失。
[javascript]
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var closetime = 2000;//不滾動時,2秒自動消失
var setTimeoutId = null;
var scrolling = false;
jQuery(function($) {
$(window).on(‘scroll’, function() {
scrolling = true;
if (!!setTimeoutId) {
clearTimeout(setTimeoutId);
}

setTimeoutId = setTimeout(function() {
scrolling = false;
}, closetime);
});

setInterval(function() {
$(‘.popup’)scrolling?’addClass’:’removeClass’;
}, 500);
});
</script>
[/javascript]


Step4
完成之後,畫面不滾動時,則保留原來的乾淨的畫面。
梅問題-Yahoo!滾動式廣告手法大公開!滾動出現,不滾時n秒自動消失
Step5
當滾動後,下方就會出現廣告Banner,直到畫面靜止2秒後,banner就會自動消失不見啦!有需要的朋友,就自行拿去使用吧!
梅問題-Yahoo!滾動式廣告手法大公開!滾動出現,不滾時n秒自動消失
[範例預覽]