css3 - google design 效果？

问题描述

问 题

https://design.google.com/art...

想問下
他點每一個頁面後
除了背景
字跟物件
會fadeInUp出現
往下移之後每個區塊的圖也會fadeInUp（手機也會）
這該怎麼做呢？

解决方案

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

<div class="wow slideInUp" data-wow-duration="1s">

<div class="card horizontal">
    <div class="card-image">
        <i class="ion ionicons ion-clock ion-4x blue-text"></i>
    </div>
    <div class="card-stacked">
        <div class="card-content">
            <h5 class="header st">内容标题</h5>
            <p>内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题</p>
        </div>
    </div>
</div>

</div>

<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="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/wow.js" ></script>
<script>

//页面滚动动画效果
var wow = new WOW({
  boxClass: 'wow',
  animateClass: 'animated',
  offset: 100,
  mobile: true,
  live: true
});
wow.init();

</script>

mobile:true; 即代表手机端也支持滚动动画特效。

这篇关于css3 - google design 效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！