JDX-01練習說明:網站設計整合

(六) Animate.css與Wow.js外掛結合

(1)#goTop

<div class="gotop"></div>

練習1:三角型向上

.gotop {
    width: 0; height: 0;
	border-bottom: 50px solid #5ca7ff;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    position:fixed; right: 30px; bottom: 30px;
    cursor: pointer;
}

練習2:心型加入

/*練習2:心型加入*/
.gotop {width: 50px; height: 50px; background: #db0851;
        position:fixed; right: 30px; bottom: 30px;
        transform: rotate(45deg); cursor: pointer;
        animation: heart 1s infinite;}

.gotop:before,.gotop:after{content: ''; width:100%; height: 100%; border-radius: 50%;
                            background: #db0851;position: absolute; }

.gotop:before { left: -50%; }
.gotop:after {  top: -50%; }

@keyframes heart{
    0%{ transform: scale(1) rotate(45deg); }
    50%{ transform: scale(1.1) rotate(45deg);}
    100%{ transform: scale(1) rotate(45deg);}
}

練習3:jQuery捲動置頂

$('.gotop').click(function(){
            $('html,body').animate({scrollTop:0},1000);
        });

練習5:animate.css結合


 

利用tada動畫,學習如何修改

.gotop { animation: tada 1s infinite;}

 

@keyframes tada {
  from {
      transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 45deg); }
      10%, 20% {   transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, 47deg);  }
      30%, 50%, 70%, 90% {  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 47deg); }
      40%, 60%, 80% {  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 43deg);  }

  to {
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 45deg);
  }
}

.tada {
  animation-name: tada;
}

(3) animate.css與wow.js結合

wow.js利用捲動觸發事件,與animate.css有趣的動畫結合,讓不會寫程式也會完成捲動動畫效果。

相關連結:wow.js CDNwow.js 官網

S1:加入相關連結

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>

S2:為元素加入捲動動畫方式

(1) 利用 元素【class=”wow animate.css動畫名稱”】

(2) wow.js 利用 【 data-*】加入變數值

data-wow-duration:更改動畫持續時間
data-wow-delay:動畫開始之前的延遲
data-wow-offset:開始動畫的距離(與瀏覽器底部相關)
data-wow-iteration:動畫的次數重複

<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>

S3加入javascript 程式

new WOW().init();

自定義配置javascript

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

配置值說明

屬性/方法 類型 默認值 說明
boxClass 字符串 ‘wow’ 需要執行動畫的元素的class
animateClass 字符串 ‘animated’ animation.css 動畫的class
offset 整數 0 距離可視區域多少開始執行動畫
mobile 布爾值 true 是否在移動設備上執行動畫
live 布爾值 true 異步加載的內容是否有效

 

其他連結:(1)連結(2)連結