雞西網站建設制作優化設計[SEO]
本頁定位
在線咨詢

Wow.js頁面滾動時讓元素動起來 V1.1.3

假裝紳士??9個月前624去下載A+A-

?? ? 軟件著作權歸作者所有;本站所有軟件均來源于網絡,僅供學習使用,請支持正版!

在瀏覽一些網站的時候,總是能遇到一些頁面元素隨著滾動而出現的動畫功能,引起了雞西網站開發的設計人員的興趣。有意把雞西網站制作的頁面也加上動畫功能,針對使用性,輕量性,進行了一番探索。

Wow.js,外國人的作品,專門針對頁面滾動時加載動畫而寫出的原生Javascript產物(不依賴Jquery),其動畫效果需配合Animate.css產生。以下是雞西網站設計在實際使用中整理的Wow.js實用性教程,如果有說錯的地方,歡迎各路大神不吝賜教。

wow.js效果演示

1、引入必要文件

[01]引入animate.css

<link rel="stylesheet"  href="animate.css" type="text/css" />

[02]引入wow.js

<script type="text/javascript" src="wow.js"></script>

[03]為wow.js加入初始化代碼

<script type="text/javascript">
    new WOW().init();
</script>

* 這兩個文件可以放在頁面源碼中的任何位置調用,wow.js不依賴于jquery。當然,還是要遵守一些前端潛規則^_^

2、配置wow.js

[01]如在制作網站時對項目需要個性化配置,可以將初始化代碼修改成以下內容,并根據相關說明詳細配置

<script type="text/javascript">
    var wow = new WOW({
        boxClass:     "wow",
        animateClass: "animated",
        offset:       0,
        mobile:       true,
        live:         true,
        callback:     function(box) {},
        scrollContainer: null
    });
    wow.init();
</script>
wow.js變量參數屬性說明
屬性/方法 類型 默認值 說明
boxClass 字符串 “wow” 需要執行動畫元素的 class
animateClass 字符串 “animated” 動畫庫的 class
offset 整數 0 距離可視區域多少開始執行動畫
mobile 布爾值 true 是否允許在移動設備上執行動畫
live 布爾值 true 頁面中異步加載的內容是否有效
callback 函數 function(box) 每次啟動動畫時都會觸發回調的函數,傳入的參數為正在運動的DOM節點
scrollContainer 字符串 null 可選擇滾動容器選擇器,不選擇使用窗口(body)

[02]在css下方js上方為元素添加class類名

需要添加動畫效果的元素必須為塊狀display:block或者行內塊狀display:inline-block,基本添加方法,如下所示:

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></section&gt;

詳解:類名前面的wow是每一個需要添加動畫的元素都要加的,slideInLeft就是說明動畫樣式。后面的data-wow-duration(動畫持續時間)、data-wow-delay(動畫延遲時間)、data-wow-offset(元素的位置露出后距離底部多少像素執行)和data-wow-iteration(動畫執行次數)這四個屬性可選可不選。

屬性 說明
data-wow-duration 動畫持續時間
data-wow-delay 動畫延遲時間
data-wow-offset 元素的位置出現后距離底部多少像素執行
data-wow-iteration 動畫執行次數

以下是Animate.css常用的動畫效果介紹,更多效果可前往Animate.css查看演示。

類名 說明
wow rollIn 從左到右、順時針滾動、透明度從100%變化至設定值
wow bounceIn 從原位置出現,由小變大超出設定值,再變小小于設定值,再回歸設定值、透明度從100%變化至設定值
wow bounceInUp 從下往上、竄上來以后會向上超出一部分然后彈回去、透明度為設定值不變
wow bounceInDown 從上往下、掉下來以后會向下超出一部分然后彈跳一下、透明度為設定值不變
wow bounceInLeft 從左往右、移過來以后會向右超出一部分然后往左彈一下、透明度為設定值不變
wow bounceInRight 從右往左、移過來以后會向左超出一部分然后往右彈一下、透明度為設定值不變
wow slideInUp 從下往上、上來后固定到設定位置、透明度為設定值不變(up是從下往上)(如果元素在最下面,會撐開盒子高度)
wow slideInDown 從上往下、上來后固定到設定位置、透明度為設定值不變
wow slideInLeft 從左往右、上來后固定到設定位置、透明度為設定值不變(left卻是從左往右)
wow slideInRight 從右往左、上來后固定到設定位置、透明度為設定值不變
wow lightSpeedIn 從右往左、頭部先向右傾斜,又向左傾斜,最后變為原來的形狀、透明度從100%變化至設定值
wow pulse 原位置放大一點點在縮小至原本大小、透明度為設定值不變(配合動畫執行次數屬性效果更佳)
wow flipInX 原位置后仰前栽、透明度從100%變化至設定值
wow flipInY 原位置左右旋動、透明度從100%變化至設定值
wow bounce 上下抖動、透明度為設定值不變(配合動畫執行次數和動畫持續時間屬性可以實現劇烈抖動亦或是慢慢抖)
wow shake 左右抖動、透明度為設定值不變(配合動畫執行次數和動畫持續時間屬性可以實現劇烈抖動亦或是慢慢抖)
wow swing 從右往左、頭部先向右傾斜,又向左傾斜,最后變為原來的形狀、透明度為設定值不變
wow bounceInU 原位置不變、直接從不顯示到顯示(無過過渡效果)
wow wobble 原位置不變、類似于一個人站在那左右晃頭、透明度為設定值不變

3、wow.js常見問題

為了寫這篇wow.js的說明文章,雞西做網站的設計人員專門測試了一下data-wow-offset和data-wow-iteration這兩個屬性,其中data-wow-offset=”數值”中的數值是動畫完成后元素距離顯示器底部的位置,而不是距離瀏覽器窗口底部的位置。


wow.js使用了querySelectorAll方法,IE低版本會報錯。為了達到更好的兼容,最好加一個瀏覽器及版本判斷。

<script src="wow.min.js"></script>

<script>
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
        new WOW().init();
    };
</script>

有的網站采用全屏滾動的fullpage插件與wow相結合的方法,實現的效果比較酷炫,我們完全可以仿寫。但是使用fullpage.js下wow.js無效失效沒動作問題出在fullpage隱藏了滾動條,將滾動條開啟即可,把scrollBar設置為true,代碼如下:

$('#fullpage').fullpage({
    scrollBar:true;
});

最后利用css將滾動條隱藏,將html添加overflow:hidden,代碼如下:

html{
    overflow:hidden;
}
資源下載

恭喜,此資源為免費資源,請先

文件版本:V1.1.3

文件大小:8.21KB

文件語言:JS代碼

更新日期:2019-04-04

系統要求:無

技術交流:QQ群 7717114

全部評論: 0
登錄沒有賬號 切換注冊

忘記密碼 ?

注冊已有賬號 切換登錄

15选5走势图开奖