css3 - google design 效果?
問題描述
https://design.google.com/art...
想問下他點(diǎn)每一個頁面後除了背景字跟物件會fadeInUp出現(xiàn)往下移之後每個區(qū)塊的圖也會fadeInUp(手機(jī)也會)這該怎麼做呢?
問題解答
回答1:<link rel='stylesheet' href='http://www.intensediesel.com/wenda/css/animate.css' />
<p data-wow-duration='1s'>
<p class='card horizontal'> <p class='card-image'><i class='ion ionicons ion-clock ion-4x blue-text'></i> </p> <p class='card-stacked'><p class='card-content'> <h5 class='header st'>內(nèi)容標(biāo)題</h5> <p>內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題</p></p> </p></p>
</p>
<script type='text/javascript' src='http://code.jquery.com/jquery...<script>window.jQuery || document.write(’<script src='js/jquery.min.js'></script>’)</script><script type='text/javascript' src='http://www.intensediesel.com/wenda/js/jquery-migrate-1.2.1.min.js'></script><script type='text/javascript' src='http://www.intensediesel.com/wenda/js/wow.js' ></script><script>
//頁面滾動動畫效果var wow = new WOW({ boxClass: ’wow’, animateClass: ’animated’, offset: 100, mobile: true, live: true});wow.init();
</script>
mobile:true; 即代表手機(jī)端也支持滾動動畫特效。
相關(guān)文章:
1. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.2. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題3. 刷新頁面出現(xiàn)彈框4. javascript - 編程,算法的問題5. javascript - 怎么看網(wǎng)站用了什么技術(shù)框架?6. mysql - 用PHPEXCEL將excel文件導(dǎo)入數(shù)據(jù)庫數(shù)據(jù)5000+條,本地數(shù)據(jù)庫正常,線上只導(dǎo)入15條,沒有報錯,哪里的問題?7. javascript - 請教空白文本節(jié)點(diǎn)的問題8. PC 手機(jī)兼容的 編輯器9. 關(guān)于Android權(quán)限的獲取問題,大家遇到過這樣的情況嘛?10. css - 關(guān)于border-image
