在線客服

電話①:189 6508 9135(張先生)
電話②:134 0599 8886(何小姐)
電話③:0591-83489135

技術文章


網站頁面滾動時添加動畫效果CSS和WOW.JS


通過 WOW.js ,可以在向下滾動的過程中逐漸釋放這些動畫效果。

Animate動畫效果演示網址:http://www.241384.tw/t/animate/

下載WOW.js+Animate.css【本站下載

默認情況下,當你向下滾動頁面時,可以逐漸展示出 CSS 動畫。它一般使用 animate.css 的動畫效果。但是,您可以輕松設置成您喜歡的動畫庫。

優點:比其他 JavaScript 視覺插件更輕量級,像 Scrollorama (這個太重了,其實我們的需求都是非常簡單的)超簡單的安裝,與animate.css配合,只需幾行代碼即可。

網站頁面滾動時添加動畫效果CSS和WOW.JS

設置WOW.js

1、鏈接到CSS動畫庫

鏈接到 Animate.css(可以通過更改WOW.js設置鏈接到另一個CSS動畫庫)

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

2、鏈接并激活WOW.js

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

顯示CSS動畫

1、使元素易于顯示

將CSS類.wow添加到HTML元素:在用戶滾動顯示它之前,它將不可見。
(您可以在WOW設置中更改此CSS類,以避免名稱沖突。)

<div class="wow">
Content to Reveal Here
</div>

2、選擇動畫樣式

在Animate.css中選擇一種動畫樣式 ,然后將CSS類添加到HTML元素中

<div class="wow bounceInUp">
Content to Reveal Here
</div>

你完成了!

現在,當用戶滾動時,您的動畫將顯示出來。

高級選項

data-wow-duration:更改動畫的持續時間
data-wow-delay:動畫開始之前的延遲
data-wow-offset:啟動動畫的距離(與瀏覽器底部有關)
data-wow-iteration:動畫的次數重復

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

自定義設置

boxClass:類名,在用戶滾動時顯示隱藏的框。

animateClass:觸發CSS動畫的類名稱(animate.css庫默認為“ animated”)

offset:定義瀏覽器視口底部與隱藏框頂部之間的距離。
當用戶滾動并到達此距離時,隱藏的框會顯示出來。

mobile:在移動設備上打開/關閉WOW.js。

live:在頁面上同時檢查新的WOW元素。

wow = new WOW(
{
boxClass:     'wow',      // default
animateClass: 'animated', // default
offset:       0,          // default
mobile:       true,       // default
live:         true        // default
}
)
wow.init();



相關文章

首頁  電話  在線咨詢  頂部
(★^O^★)MG日日进财爆分打法 布鲁克林篮网球衣 闲来贵州麻将 宁夏11选5开奖结果查询 江西多乐彩11选5走势图 李逵劈鱼游戏 湖南快乐十分开奖结果 龙江麻将官方 亿客隆 北京快中彩k线图 贵阳捉鸡麻将技巧秘 做牌推倒胡胡牌规则 优游平台手机登录5.0 娱网棋牌大连打滚子游戏規则 1737金蟾捕鱼游戏中心 河南福彩22选5幸运之门 大众麻将官网