实现思路
挥鞭式进入效果类似于PPT中的动画效果挥鞭式效果,主要思路是:首先会显示四个大小不同的文字,当第一个文字达到最大时,第五个文字进入,以此类推,按照一定时间,第一个文字会减小到设定的大小。
照旧,上代码:
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="cache-control" content="no-cache">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
<title>挥鞭式进入效果</title>
<link rel="stylesheet" href="scripts/swiper/css/swiper.min.css" />
<link href="css/common.css" rel="stylesheet" />
<link href="css/animate.css" rel="stylesheet" />
<link href="css/ui-font.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<style>
*{
padding: 0;
margin: 0;
}
html{
font-size: 100px;
}
body{
background: #4359aa;
padding: 0.5rem 0;
}
.text{
position: relative;
font-size: 0.22rem;
color: #ffffff;
line-height: 0.33rem;
text-align: center;
font-style: italic;
letter-spacing: 0.01rem;
visibility: hidden;
padding: 0.13rem 0;
}
</style>
</head>
<body>
<div class="text">财富大门期待您的开启!</div>
<script type="text/javascript" src="../plugins/lib/jquery/jquery-2.1.4.min.js" ></script>
<script type="text/javascript">
$(function(){
var whiplashTime = setTimeout(function(){
whiplash($(".text"),200,4);
},600);
})
/*
* 功能:挥鞭式进入效果
* param1:进入部分
* param2:效果执行时长
* param3: 初始化时显示的文字个数
* */
function whiplash(param1,param2,param3){
var paramText,
paramTextStr = '',
durTime=0;
paramText = param1.text();
for(var i=0; i<paramText.length; i++){
paramTextStr += '<span>' + paramText[i] + '</span>';
}
paramTextStr = '<div>' + paramTextStr + '</div>';
param1.html(paramTextStr);
param1.find("span").css({
"font-size":"0",
"visibility": "hidden"
});
for (var i=0; i<param3; i++) {
param1.find("span:eq("+i+")").css({"visibility": "visible"});
}
var setTime = setTimeout(function(){
param1.find("span").css({"visibility": "visible"});
},param2*1.5);
param1.find("span").each(function(index,item){
durTime += param2;
param1.find("span:eq("+index+")").animate(
{
"font-size":"0.3rem"
},
{
duration:durTime,
easing:"swing",
}
);
param1.find("span:eq("+index+")").animate(
{
"font-size":"0.23rem"
},
{
duration:durTime,
easing:"swing"
}
);
});
}
</script>
<body>
</html>