效果如下:当第一次出现在视野中时,震动一次
css3 模拟标牌震荡效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>css3 模拟标牌震荡效果</title>
<style type="text/css" media="screen">
.title{
width: 1082px;
height: 69px;
background: url(img/title-biaobai.png) center 90px no-repeat;
margin: 0 auto;
background-position: 0;
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/*一种震荡效果*/
@keyframes flipInX {
/*先翻转90度与电脑屏幕垂直*/
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(0px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
/*自然过渡落下到,负一边20度*/
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
/*自然过渡落下到,10度*/
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
/*自然过渡落下到,负一边5度*/
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
/*然后恢复正常与屏幕平行*/
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
</style>
</head>
<body>
<div style="height: 500px;">
</div>
<div class="title">
</div>
<div style="height: 500px;">
</div>
<div class="title">
</div>
<div style="height: 500px;">
</div>
<div class="title">
</div>
<div style="height: 500px;">
</div>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
//如果已经有元素满足动画条件,就在加载完毕,调用一次
initTitle();
//监听窗口滚动事件
$(window).scroll(initTitle);
});
function initTitle(){
//获取到滚动条距离浏览器顶部的距离
var top = $(document).scrollTop();
//获取到浏览器窗口当前的高度
var height = $(window).height();
//获取到当前class中包含title 的元素,这里获取到的是多个元素
var items = $(".title")
items.each(function(){
//先把this赋值给一个变量,
var m = $(this);
//获取到每个item距离顶端的距离
var itemTop = m.offset().top;
//这里加100是为了有更好的用户体验
//在控制台中打印
console.log(top+"---"+itemTop);
if(top > itemTop-height+100){
m.addClass('flipInX animated');
} else {
return false;//跳过不用走的
}
});
}
</script>
</body>
</html>