132 7725 3377
聯(lián)系我們
了
解
紅
點(diǎn)
最
新
動(dòng)
態(tài)
和
行
業(yè)
資
訊
附件：http://www.lvpaiqingdao.com/upfile/2019/01/20190111133507_432.rar
在一些網(wǎng)頁上，當(dāng)你滾動(dòng)頁面的時(shí)候會(huì)看到各式各樣的元素動(dòng)畫效果，非常動(dòng)感。WOW.js 就是一款幫助你實(shí)現(xiàn)這種 CSS 動(dòng)畫效果的插件，很容易定制，你可以改變動(dòng)畫設(shè)置喜歡的風(fēng)格、延遲、長(zhǎng)度、偏移和迭代等。
1、引入文件
1 | <link rel="stylesheet" href="css/animate.min.css"> |
2、HTML
1 2 | <div class="wow slideInLeft"></div><div class="wow slideInRight"></div> |
可以加入 data-wow-duration（動(dòng)畫持續(xù)時(shí)間）和 data-wow-delay（動(dòng)畫延遲時(shí)間）屬性，如：
1 2 | <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div><div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div> |
3、JavaScript
1 | new WOW().init(); |
如果需要自定義配置，可如下使用：
1 2 3 4 5 6 7 8 | var wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true});wow.init(); |
配置
| 屬性/方法 | 類型 | 默認(rèn)值 | 說明 |
| boxClass | 字符串 | ‘wow’ | ‘wow’ 需要執(zhí)行動(dòng)畫的元素的 class |
| animateClass | 字符串 | ‘a(chǎn)nimated’ | ‘a(chǎn)nimated’animation.css 動(dòng)畫的 class |
| offset | 整數(shù) | 0 | 距離可視區(qū)域多少開始執(zhí)行動(dòng)畫 |
| mobile | 布爾值 | true | 是否在移動(dòng)設(shè)備上執(zhí)行動(dòng)畫 |
| live | 布爾值 | true | 異步加載的內(nèi)容是否有效 |
為您提供專業(yè)解決方案，歡迎來電咨詢！
132-7725-3377
微信在線咨詢
官方抖音號(hào)
官網(wǎng)小程序
數(shù)字品牌咨詢 / 商業(yè)模式創(chuàng)新咨詢 / 服務(wù)設(shè)計(jì)咨詢 / 互聯(lián)網(wǎng)產(chǎn)品咨詢
品牌營(yíng)銷年度服務(wù) / 產(chǎn)品增長(zhǎng)營(yíng)銷服務(wù) / 高端定制網(wǎng)站 / 創(chuàng)意H5定制
品牌電商方案 / SAAS電商 / APP定制開發(fā) / B2C電商方案 / 微信小程序
年度運(yùn)維托管服務(wù) / 高并發(fā)大流量運(yùn)維服務(wù) / 知識(shí)產(chǎn)權(quán)申請(qǐng)
COPYRIGHT ? 2017 湖北紅點(diǎn) | 軟件定制服務(wù)商 備案號(hào)：鄂ICP備17012943號(hào)-1 鄂公安網(wǎng)安備42050202000667號(hào) 地址：湖北省宜昌市中南路興發(fā)廣場(chǎng)B座1521
