橫幅 jQuery滑入滑出效果 - 強化網站的重點

基本的Blogger範本通常區分為文章主體(Article)和側欄工具(Aside Section)兩大部分; 這裡意指視覺上的兩個重點. 不過我也經常看見整個版面塞滿各種訊息、插件小工具、社群資訊、廣告的網站, 不知道網頁設計師的看法如何? 我倒是知道建地都有建蔽率的限制, 有時該體會留白的美感.
越多的重點可能形成無重點的盲視現象, 所以藉由banner slideshow, 或是彈出區域等方式將網站最主要推薦給讀者的部分顯示. 例如我覺得Blogger的分享按鍵擺在文章的結束位置雖然是正確的, 但對於不常接觸Blogger的讀者, 真的難以令他們注意到這個分享鍵.

以前有些網站會加上 "按讚後才能觀看" 的JavaScript, 如果我在Blogger也加個 "+1後才能顯示頁面" 的效果應該也很殺! 而且Google+1圖形要做得非常大!! 大到幾乎能遮住整個部落格的霸氣盡出!!!

白日夢過後回到本篇主題前, 台北李先生點播一首 Dream a little dream of me
要凸顯網站設計重點的方法百樣種, 今天介紹的是滑動區域的效果:
訪客閱覽頁面接近頁尾時, 喵的咧! 廣告卻忘記伸手相助點一下; Facebook的比讚大拇指也懶得舉起來... (其實是懶得再登入啦!) 此時站長很好心的、悄悄地舉牌告知, 滑出一塊重點區域吸引您的目光, 啊! 原來這個網站本周留言10次有好禮大相送~ (最好是有啦! >.<)
這樣說有點不明白, 先看個社群分享鈕安置在橫幅區域的實例:

使用Blogger的網友可以直接在 HTML/JavScript 模組裡操作; 不是Blogger範本的朋友請在CSS裡操作. 本篇僅示範在HTML/JavaScript操作的方法.
* Step 1. 這個效果會使用到jQuery與jQuery UI的組合, 已有使用該程式庫則省略此步驟. 尚未使用者, 加入以下程式碼.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

* Step 2. javascript的部分我整理好了, 加入即可. 因為Blogger的留言板以下會有些空檔, 所以將滑動效果的起點稍微拉高一點. 考慮每個人的元素值不同所以不做定位碼, 只有底頁固定距離.

<script src="http://sites.google.com/site/agogodream/SlideBox.js"></script>

* Step 3. 繼續將以下樣式加入:

<style>
#topper {
    display: none;
    position: fixed;
    z-index:999;
    left: 0px;
    right: 0px;
    top: -200px;
    height: 120px;
    width: 100%;
    background: rgba(0,0,0,.5);
    color: #fff;
    text-align: center;
    -webkit-box-shadow: 0px 3px 8px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 3px 8px 3px rgba(0, 0, 0, 0.3);
}

#topper #innerWrap {
    width: 100%;
    margin: -10px auto;
}

#topper #padding {
    padding: 10px;
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;   
}

#topper .box {
    width: 80px;
    height: 80px;
    float: left;
    margin: 5px;
    background: transparent;
    text-align: center;
}

#navbar {position:relative;z-index:1000;} // 您有保留Blogger navbar才需要此段
</style>

紅字的部分可能是您依據現況尺寸需要修改的數值.
height: 120px是整個黑底區域的高度. background: rgba(0,0,0,.5)底色請自行查閱rgba的數值. color: #fff文字色碼. width: 80px; height: 80px;無須更動, 只是個位置, 內容物超出容器不會被切掉, 只是方便放置內容時的位置參考.

* Step 4. 接續在style樣式後面加入此段. 這個部分的HTML就是您要推給網友看的內容, 或許是+1按鈕、或廣告頁(使用程式碼需要在CSS中改寫, 似乎不能放在HTML/JavaScript模組)、又或許放個問卷, 留言板等等.

<div id="topper">
    <div id="innerWrap">
    <div id="padding">
        <p>感謝您的分享 (不想廢話, 這一段也可以刪除)</p>
        <div class="falling box">A</div>
        <div class="falling box">B</div>
        <div class="falling box">C</div>
        。
        。
        。
    </div>
    </div>
</div>

其中紅字A、B、C...是內容物, 有十組就放十個 <div class="falling box">物件</div> (並排狀態). 只有單一物件就只留一組. 應該沒有其他重點忘記寫吧?

---

Author Summary

Subject : 橫幅 jQuery滑入滑出效果 - 強化網站的重點
Author : Unknown - Dream Talker Updated at: 6:31 AM
Votes : 100% - 5.0 - based on 2015
banner橫幅滑入滑出的jQuery效果,加上fadein fadeout淡出效果,將重要訊息推薦給訪客.

Unknown

5 Stars - Reviews