jQuery套件《Waypoints滾動套件》滾動式翻頁效果

梅問題-jQuery教學《Waypoints滾動套件》滾動式翻頁效果
  有在觀注樂兔米的朋友,應該會發現到,此次的改版中,除了加入了許多CSS3的動態特效外,還加入滾動特效,就是當滾到固定的區塊中,裡面的元素才會一一的顯示,與延遲載入有點雷同,其實這個效果只是利用了jQuery中的一個套件Waypoints滾動事件,該套件會自動的偵測,目前畫面所在的區塊位置,並依序的顯示所設定的特效,且這隻Waypoints套件用法也相當容易,只要指定好區塊後,立即就會依所需的顯示效果啦!至於要怎麼用,現在就一塊來看看吧!

jQuery Waypoints套件:
外掛元件:Waypoints
外掛版本:v2.0.3
套件網址:http://imakewebthings.com/waypoints/
※需載入jQuery1.8+以上

引用Jquery+jQuery Waypoints:
放在</body>上:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>

使用Waypoints:
在waypoints下,加入以下語法。
<script type="text/javascript">
$(document).ready(function() {
   $('物件的class或id名稱').waypoint(function(){
   加入特效的效果;
   },{位移量});
});
</script>

梅問題-jQuery教學《Waypoints滾動套件》滾動式翻頁效果
這時當畫面滑到顯示的範圍時,就會自動啟用所設定的效果啦!
梅問題-jQuery教學《Waypoints滾動套件》滾動式翻頁效果
[範例預覽] [範例下載]

相關文章

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

jQuery取得各裝置視窗實際顯示的寬度、高度

jQuery取得各裝置視窗實際顯示的寬度、高度

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQuery教學-RWD自適應導覽列多層級下拉選單

jQuery教學-RWD自適應導覽列多層級下拉選單





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 3 梅留言

  • 第3梅
    vivi 說道:

    不好意思~
    請問圖片出現的方式只有從中間淡出嗎?
    可不可以改成其他動畫效果呢?
    感謝~

  • 第2梅
    Wenxiang 說道:

    梅大大~ 請問這是大多整欄式網頁的慣用作法之一嗎 ?

    回應:
    這只是滾動效果,與欄位無關喔!!!什麼版型都可使用
  • 第1梅
    挨踢飯 說道:

    厲害!