css3 - google design 效果?
問題描述
https://design.google.com/art...
想問下他點每一個頁面後除了背景字跟物件會fadeInUp出現往下移之後每個區塊的圖也會fadeInUp(手機也會)這該怎麼做呢?
問題解答
回答1:<link rel='stylesheet' href='http://m.baoyu77737.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'>內容標題</h5> <p>內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題</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://m.baoyu77737.com/wenda/js/jquery-migrate-1.2.1.min.js'></script><script type='text/javascript' src='http://m.baoyu77737.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; 即代表手機端也支持滾動動畫特效。
相關文章:
1. Docker for Mac 創建的dnsmasq容器連不上/不工作的問題2. css3 - 圖片等比例縮放3. html - css3中多列高度 統一4. javascript - 使用angular 的ui-sref 中出現了中文參數,點擊跳轉后瀏覽器的地址欄里出現轉義后的%AE....%a%45. css3 - 如何將網頁CSS背景圖高斯模糊且全屏顯示6. javascript - 一個賦值運算的問題7. css3 - animation屬性,safari瀏覽器不支持相關效果8. javascript - 求賜教:網易郵箱Web端模擬登錄看信的加密參數_ntes_nnid、_ntes_nuid9. css - jq有無現成函數改變rotateX/Y的deg10. javascript - QWebEngineView 如何爬 angular 的動態數據?
