css3 - google design 效果?
问题描述
https://design.google.com/art...
想問下他點每一個頁面後除了背景字跟物件會fadeInUp出現往下移之後每個區塊的圖也會fadeInUp(手機也會)這該怎麼做呢?
问题解答
回答1:<link rel='stylesheet' href='https://www.haobala.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='https://www.haobala.com/wenda/js/jquery-migrate-1.2.1.min.js'></script><script type='text/javascript' src='https://www.haobala.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. node.js - 怎么在初始化的时候使得一个子组件不加载?2. 代码如下,java用BigDecimal四舍五入怎么还有问题呀?哪种方式是完全没有问题的?3. angular.js - 请教angularjs里html和js通信的问题4. 求解决方法:Parse error: syntax error, unexpected5. 新人做网站求帮助6. java - mybatis里的REGEXP7. Linux服务器下怎么把phpStudy卸载干净8. 请问连接文件怎么写9. 没太明天这样写的作用10. mysql - thinkphp5 在MAC电脑本地正常,部署LINUX服务器之后,模型不存在