Javascript, 網頁設計

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

梅干 2017/03/08
梅問題-Yahoo!滾動式廣告手法大公開!滾動出現,不滾時n秒自動消失
  最近是否有發現到yahoo的聯播網廣告,當滾動畫想時,下方就出現廣告鈕,或是廣告BAR,當畫面靜止時,那廣告Banner就會自動的消失,直接使用者再度滾動畫時,則會再顯示出來,這樣的手法相當的特別,除了能吸引瀏覽者的觀注外,同時又能降低畫面的干擾,有別於以往都是採浮動式的固定廣告框,除了干擾閱讀外,也會相當的佔畫面。
  因此當梅干看到Yahoo此次的廣告展示手法時,立即吸引梅干的好奇,就隨手試寫看看,不知不覺中就已完成,而梅干也將作法分享出來,因此有需要的朋友,不妨也可參考看看囉!
Step1
首先,先在網頁中,新一個div並將名稱,命名為「popup」
<div class="popup">
  ......放置廣告內容
</div>

Step2
接著再把CSS的樣式加入,而這邊只是簡單的底色設定,以及當滑鼠滾動時,加入了簡易的CSS3動畫語法。
.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;
}

Step3
最後再加入下方的javascript控制碼,而下方的javascript碼中,主要使用了滾動事件與倒數屬性,因此各位只需修改closetime的關閉時間就可以了,而2000=2秒廣告banner會自動消失。
<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']('active');
      }, 500);
   });
</script>

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