CSS3 keyframes動畫實現彈跳效果

首先，“回到頂部”、“用戶反饋”這兩個按鈕是通過定位放在左下角上。

（1）“回到頂部”的按鈕只有當滾動條有出現下滑時才出現

（2）“用戶反饋”按鈕，用戶剛打開時會抖動一下，引起用戶的注意，然后才定住。

我的實現做法

首先，這兩個按鈕我都使用定位的方式定位在右下角適合的位置上。然后，

一、"回到頂部"

1、因為如果我們沒有滾動鼠標，“按鈕”沒有出現，所以，我首先是把按鈕隱藏起來的display：none，然后再通過js計算滾動后的高度

滾動后高度計算：scrollt = document.,documentElement.scrollTop+document.body.scrollTop

可視區高度：winH=$(window).height()

2、然后這兩個高度做比較，如果是大於，說明已經滾動了，“回到頂部”的按鈕可以顯示出來display:block

3、注意：

（1）主要窗口滾動，就觸發代碼$(window).scroll(fucntion(){})

 (2)兼容IE和chrome瀏覽器

document.documentElement.scrollTop+document.body.scrollTop

　　　　　　　　　　　　　　　　　　　　　　　　chrome(這個body獲取的IE/FF得到的值為0)

代碼：

//首頁回到頂部和反饋入口

$(function(){
    $(window).scroll(function(){                             //只要窗口滾動,就觸發下面代碼 
        var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //獲取滾動后的高度  document.body.scrollTop用來兼容chrome//console.log('滾動條的高度scrollTop1-'+scrollTop1+'-scrollTop2-'+scrollTop2);
        var winH = $(window).height();                       // 獲取可視區高度
        console.log('滾動后高度為'+'---'+scrollt);
        
        if( scrollt+winH >winH ){                                 //判斷滾動后高度超過0px,就顯示  
            $("#gotop").fadeIn(400);                         //淡出     
        }else{      
            $("#gotop").stop().fadeOut(400);                 //如果返回或者沒有超過,就淡入.必須加上stop()停止之前動畫,否則會出現閃動   
        }
    });
    $("#gotop").click(function(){                            //當點擊標簽的時候,使用animate在200毫秒的時間內,滾到頂部
            $("html,body").animate({scrollTop:"0px"},200);
    });
});

 

 

 

                         

 

 二、“用戶反饋”抖動

1、這個抖動的動畫效果是使用css3動畫做的、

代碼如下：

/* feedback的彈跳效果 */
.css3-notification {
    -webkit-animation: bounce 1800ms ease-out;
    -moz-animation: bounce 1800ms ease-out;
    -o-animation: bounce 1800ms ease-out;
    animation: bounce 1800ms ease-out;
}

/* Webkit, Chrome and Safari */

@-webkit-keyframes bounce {
  0% {
    -webkit-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
      -webkit-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
      -webkit-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
      -webkit-transform:translateY(-50%);
  }
  40% {
      -webkit-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
      -webkit-transform:translateY(-30%);
  }
  70% {
      -webkit-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
      -webkit-transform:translateY(-15%);
  }
  90% {
      -webkit-transform:translateY(0%);
      padding-bottom: 8px;
  }
  95% {
      -webkit-transform:translateY(-10%);
  }
  97% {
      -webkit-transform:translateY(0%);
      padding-bottom: 9px;
  }
  99% {
      -webkit-transform:translateY(-5%);
  }
  100% {
      -webkit-transform:translateY(0);
      padding-bottom: 9px;
    opacity: 1;
  }
}

/* Mozilla Firefox 15 below */
@-moz-keyframes bounce {
  0% {
    -moz-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
      -moz-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
      -moz-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
      -moz-transform:translateY(-50%);
  }
  40% {
      -moz-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
      -moz-transform:translateY(-30%);
  }
  70% {
      -moz-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
      -moz-transform:translateY(-15%);
  }
  90% {
      -moz-transform:translateY(0%);
      padding-bottom: 8px;
  }
  95% {
      -moz-transform:translateY(-10%);
  }
  97% {
      -moz-transform:translateY(0%);
      padding-bottom: 9px;
  }
  99% {
      -moz-transform:translateY(-5%);
  }
  100% {
      -moz-transform:translateY(0);
      padding-bottom: 9px;
    opacity: 1;
  }
}

/* Opera 12.0 */
@-o-keyframes bounce {
  0% {
    -o-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
      -o-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
      -o-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
      -o-transform:translateY(-50%);
  }
  40% {
      -o-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
      -o-transform:translateY(-30%);
  }
  70% {
      -o-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
      -o-transform:translateY(-15%);
  }
  90% {
      -o-transform:translateY(0%);
      padding-bottom: 8px;
  }
  95% {
      -o-transform:translateY(-10%);
  }
  97% {
      -o-transform:translateY(0%);
      padding-bottom: 9px;
  }
  99% {
      -o-transform:translateY(-5%);
  }
  100% {
      -o-transform:translateY(0);
      padding-bottom: 9px;
    opacity: 1;
  }
}

/* W3, Opera 12+, Firefox 16+ */
@keyframes bounce {
  0% {
    transform:translateY(-100%);
    opacity: 0;
  }
  5% {
      transform:translateY(-100%);
    opacity: 0;
  }
  15% {
      transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
      transform:translateY(-50%);
  }
  40% {
      transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
      transform:translateY(-30%);
  }
  70% {
      transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
      transform:translateY(-15%);
  }
  90% {
      transform:translateY(0%);
      padding-bottom: 8px;
  }
  95% {
      transform:translateY(-7%);
  }
  97% {
      transform:translateY(0%);
      padding-bottom: 9px;
  }
  99% {
      transform:translateY(-3%);
  }
  100% {
      transform:translateY(0);
      padding-bottom: 9px;
    opacity: 1;
  }
}

 

2、注意：

IE9+才支持

詳細見表

 

查看效果：http://www.ingdan.com/