jquery計數器動畫特效

listjjjclove發表於2024-11-28
jQuery動畫特效

這是一款jquery計數器動畫特效。該jquery計數器動畫特效使用bootstrap網格系統進行佈局，然後透過jQuery animate方法來製作炫酷的計數器動畫特效。

線上演示 下載

使用方法

在頁面中引入jquery，bootstrap.min.css和font-awsome.min.css檔案。

< link href="dist/bootstrap.min.css" rel="stylesheet">
< link href="dist/font-awsome.min.css" rel="stylesheet">
< script src="js/jquery.min.js">
HTML結構

計數器的HTML結構如下：

< div class="container">
    < div class="row">
        < div class="col-md-3 col-sm-6">
            < div class="counter">
                < div class="counter-content">
                    < i class="counter-icon fa fa-globe">
                    < span class="counter-value">75
                    < h3 class="title">Web Design
                
            
        
        < div class="col-md-3 col-sm-6">
            < div class="counter">
                < div class="counter-content">
                    < i class="counter-icon fa fa-rocket">
                    < span class="counter-value">100
                    < h3 class="title">Web Development
CSS樣式

為計數器新增下面的CSS樣式：

. counter {
    background :  #7a7fb6 ;
    text-align :  center ;
    position :  relative ;
}
. counter .counter-content{
    padding :  30px 20px 50px ;
    color :  #fff ;
    position :  relative ;
}
.counter:before,
.counter:after,
. counter .counter- content :before,
. counter .counter- content :after{
    content :  "" ;
    width :  20px ;
    height :  20px ;
    border-radius:  50% ;
    background :  #fff ;
    position :  absolute ;
    box-shadow:  inset 0 2px 2px #000 ;
    top :  15px ;
    left :  15px ;
}
.counter:after{
    left :  auto ;
    right :  15px ;
}
. counter .counter- content :before,
. counter .counter- content :after{
    box-shadow:  inset 0 -2px 2px #000 ;
    top :  auto ;
    bottom :  15px ;
}
. counter .counter- content :after{
    left :  auto ;
    bottom :  15px ;
    right :  15px ;
}
. counter .counter- icon {
    display : inline- block ;
    font-size :  40px ;
    margin-bottom :  15px ;
}
. counter .counter-value{
    display :  block ;
    font-size :  50px ;
    margin-bottom :  15px ;
}
. counter .title{
    font-size :  20px ;
    text-transform :  uppercase ;
    text-shadow :  3px 3px 2px rgba( 0 ,  0 ,  0 ,  0.71 );
}
@media only  screen and ( max-width :  990px ){
    . counter {  margin-bottom :  20px ; }
}
Javascript

在頁面DOM元素載入完畢之後，透過下面的方法來初始化該jquery計數器。

$( '.counter-value' ).each( function (){
    $( this ).prop( 'Counter' ,0).animate({
        Counter: $( this ).text()
    },{
        duration: 3500,
        easing:  'swing' ,
        step:  function (now){
            $( this ).text(Math.ceil(now));
        }
    });
});

相關文章