html5+css+js实现动画特效，人物动画

文件：

/**
* 小孩走路
* @param {[type]} container [description]
*/
function BoyWalk() {

var container = $("#content");
// 页面可视区域
var visualWidth = ();
var visualHeight = ();

// 获取数据
var getValue = function(className) {
var $elem = $('' + className + '');
// 走路的路线坐标
return {
height: $(),
top: $().top
};
}
// 路的Y轴
var pathY = function() {
var data = getValue('.a_background_middle');
return + / 2;
}();

var $boy = $("#boy");
var boyWidth = $();
var boyHeight = $();

// 设置下高度
$({
top: pathY - boyHeight + 25
})

// 暂停走路
function pauseWalk() {
$('pauseWalk');
}

// 恢复走路
function restoreWalk() {
$('pauseWalk');
}

// css3的动作变化
function slowWalk() {
$('slowWalk');
}

// 用transition做运动
function stratRun(options, runTime) {
var dfdPlay = $.Deferred();
// 恢复走路
restoreWalk();
// 运动的属性
$(
options,
runTime,
'linear',
function() {
(); // 动画完成
});
return dfdPlay;
}

// 开始走路
function walkRun(time, dist, disY) {
time = time || 3000;
// 脚动作
slowWalk();
// 开始走路
var d1 = stratRun({
'left': dist + 'px',
'top': disY ? disY : undefined
}, time);
return d1;
}

// 计算移动距离
function calculateDist(direction, proportion) {
return (direction == "x" ?
visualWidth : visualHeight) * proportion;
}

return {
// 开始走路
walkTo: function(time, proportionX, proportionY) {
var distX = calculateDist('x', proportionX)
var distY = calculateDist('y', proportionY)
return walkRun(time, distX, distY);
},
// 停止走路
stopWalk: function() {
pauseWalk();
},
setColoer:function(value){
$('background-color',value)
}
}
}

代码：

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>七夕主题</title>
<link rel='stylesheet' href='/down/' />
<link rel='stylesheet' href='/down/' />
<link rel='stylesheet' href='/down/' />
<link rel='stylesheet' href='/down/' />
<script type="text/javascript" src="/down/"></script>
<script type="text/javascript" src="/down/"></script>
<script type="text/javascript" src="/down/"></script>

</head>

<body>
<div id='content'>
<ul class='content-wrap'>

<li>

<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_botton"></div>
</div>

<div class="cloudArea">
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
</div>

<div ></div>
</li>

<li>

<div class="b_background"></div>
<div class="b_background_preload"></div>

<div class="shop">
<div class="door">
<div class="door-left"></div>
<div class="door-right"></div>
</div>

<div class="lamp"></div>
</div>

<div class="bird"></div>
</li>

<li>

<div class="c_background">
<div class="c_background_top"></div>
<div class="c_background_middle"></div>
<div class="c_background_botton"></div>
</div>

<div class="girl"></div>
<div class="bridge-bottom">
<div class="water">
<div class="water_1"></div>
<div class="water_2"></div>
<div class="water_3"></div>
<div class="water_4"></div>
</div>
</div>

<ul class="stars">
<li class="stars1"></li>
<li class="stars2"></li>
<li class="stars3"></li>
<li class="stars4"></li>
<li class="stars5"></li>
<li class="stars6"></li>
</ul>

<div class="logo"></div>
</li>
</ul>

<div ></div>

<div class="charector"></div>
</div>
</body>

</html>

代码：

/*背景图*/

.a_background {
width: 100%;
height: 100%;
position: absolute;
}

.a_background_top{
width: 100%;
height: 71.6%;
background-image: url("/");
background-size: 100% 100%;
}

.a_background_middle{
width: 100%;
height: 13.1%;
background-image: url("/");
background-size: 100% 100%;
}

.a_background_botton{
width: 100%;
height: 15.3%;
background-image: url("/");
background-size: 100% 100%;
}

代码：

/*背景图*/

.b_background {
width: 100%;
height: 100%;
background-image: url("/");
background-size: 100% 100%;
position: absolute;
}

.b_background_preload {
background: url("/") no-repeat -9999px -9999px;
}

.lamp-bright {
background-image: url("/");
}

/*商店*/

.shop {
width: 39.5%;
height: 35.5%;
position: absolute;
left: 29%;
top: 36.5%;
}

.door {
position: absolute;
width: 32%;
height: 100%;
top: 32%;
height: 68%;
overflow: hidden;
left: 58.5%;
}

.door-left,
.door-right {
width: 50%;
height: 100%;
position: absolute;
}

.door-left {
left: 0%;
background: url(/);
background-size: 100% 100%;
}

.door-right {
left: 50%;
background: url(/);
background-size: 100% 100%;
}

/*鸟*/

.bird {
min-width: 91px;
min-height: 71px;
top: 10%;
position: absolute;
z-index: 10;
right: -91px;
background: url(/) -182px 0px no-repeat;
}
.birdFly {
-webkit-animation-name: bird-slow;
-webkit-animation-duration: 400ms;
-webkit-animation-timing-function: step-start;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: bird-slow;
-moz-animation-duration: 400ms;
-moz-animation-timing-function: step-start;
-moz-animation-iteration-count: infinite;
}

/*鸟慢飞*/
@-webkit-keyframes bird-slow {
0% {
background-position: -182px 0px;
}
50% {
background-position: 0px 0px;
}
75% {
background-position: -91px 0px;
}
100% {
background-position: -182px 0px;
}
}

@-moz-keyframes bird-slow {
0% {
background-position: -182px 0px;
}
50% {
background-position: 0px 0px;
}
75% {
background-position: -91px 0px;
}
100% {
background-position: -182px 0px;
}
}

代码如下;

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<link rel='stylesheet' href='' />
<link rel='stylesheet' href='' />
<script src="/jquery/1.9.1/"></script>
<script type="text/javascript" src=""></script>
</head>
<style type="text/css">
.charector {
width: 151px;
height: 291px;
left: 6%;
top: 55%;
position: absolute;
background: url(/) -0px -291px no-repeat;
}
</style>

<body>
<div id='content'>
<ul class='content-wrap'>
<li>
<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_botton"></div>
</div>
</li>
<li> 页面2 </li>
<li> 页面3 </li>
</ul>
<div class="charector"></div>
</div>
<script type="text/javascript">
var swipe = Swipe($("#content"));

var $boy = $("#boy");

// 设置一下缩放比例与基点位置
var proportion = $(document).width() / 1440;
// 设置元素缩放
$({
transform: 'scale(' + proportion + ')'
});

// 获取数据
var getValue = function(className) {
var $elem = $('' + className + '');
// 走路的路线坐标
return {
height: $(),
top: $().top
};
}

// 路的中间到顶部的距离
var pathY = function() {
var data = getValue('.a_background_middle');
return + / 2;
}();

// 获取人物元素布局尺寸
var boyHeight = $();
var boyWidth = $();
// 计算下缩放后的元素与实际尺寸的一个距离
var boyInsideLeft = (boyWidth - (boyWidth*proportion))/2;
var boyInsideTop = (boyHeight - (boyHeight*proportion))/2;

// 修正小男孩的正确位置
// 中间路的垂直距离 - 人物原始的垂直距离 - 人物缩放后的垂直距离
$({
top: pathY - (boyHeight * proportion) - boyInsideTop
});
</script>
</body>

</html>

代码如下：

// 动画结束事件
var animationEnd = (function() {
var explorer = ;
if (~('WebKit')) {
return 'webkitAnimationEnd';
}
return 'animationend';
})();

///
//灯动画 //
///
var lamp = {
elem: $('.b_background'),
bright: function() {
('lamp-bright');
},
dark: function() {
('lamp-bright');
}
};

var container = $("#content");
var swipe = Swipe(container);
visualWidth = ();
visualHeight = ();

// 页面滚动到指定的位置
function scrollTo(time, proportionX) {
var distX = visualWidth * proportionX;
(distX, time);
}

// 获取数据
var getValue = function(className) {
var $elem = $('' + className + '');
//走路的路线坐标
return {
height: $(),
top: $().top
};
};

// 桥的Y轴
var bridgeY = function() {
var data = getValue('.c_background_middle');
return ;
}();

//小女孩 //

var girl = {
elem: $('.girl'),
getHeight: function() {
return ();
},
setOffset: function() {
({
left: visualWidth / 2,
top: bridgeY - ()
});
}
};

// 修正小女孩位置
();

// 用来临时调整页面
(visualWidth * 2, 0);

function doorAction(left, right, time) {
var $door = $('.door');
var doorLeft = $('.door-left');
var doorRight = $('.door-right');
var defer = $.Deferred();
var count = 2;
// 等待开门完成
var complete = function() {
if (count == 1) {
();
return;
}
count--;
}
({
'left': left
}, time, complete);
({
'left': right
}, time, complete);
return defer;
}

// 开门
function openDoor() {
return doorAction('-50%', '100%', 2000);
}

// 关门
function shutDoor() {
return doorAction('0%', '50%', 2000);
}

/**
* 小孩走路
* @param {[type]} container [description]
*/
function BoyWalk() {

var container = $("#content");
// 页面可视区域
var visualWidth = ();
var visualHeight = ();

// 获取数据
var getValue = function(className) {
var $elem = $('' + className + '');
// 走路的路线坐标
return {
height: $(),
top: $().top
};
};
// 路的Y轴
var pathY = function() {
var data = getValue('.a_background_middle');
return + / 2;
}();

var $boy = $("#boy");
var boyWidth = $();
var boyHeight = $();

// 设置下高度
$({
top: pathY - boyHeight + 25
});

// 暂停走路
function pauseWalk() {
$('pauseWalk');
}

// 恢复走路
function restoreWalk() {
$('pauseWalk');
}

// css3的动作变化
function slowWalk() {
$('slowWalk');
}

// 用transition做运动
function stratRun(options, runTime) {
var dfdPlay = $.Deferred();
// 恢复走路
restoreWalk();
// 运动的属性
$(
options,
runTime,
'linear',
function() {
(); // 动画完成
});
return dfdPlay;
}

// 开始走路
function walkRun(time, dist, disY) {
time = time || 3000;
// 脚动作
slowWalk();
// 开始走路
var d1 = stratRun({
'left': dist + 'px',
'top': disY ? disY : undefined
}, time);
return d1;
}

// 走进商店
function walkToShop(runTime) {
var defer = $.Deferred();
var doorObj = $('.door');
// 门的坐标
var offsetDoor = ();
var doorOffsetLeft = ;
var doorOffsetTop = ;
// 小孩当前的坐标
var posBoy = $();
var boyPoxLeft = ;
var boyPoxTop = ;

// 中间位置
var boyMiddle = $() / 2;
var doorMiddle = () / 2;
var doorTopMiddle = () / 2;

// 当前需要移动的坐标
instanceX = (doorOffsetLeft + doorMiddle) - (boyPoxLeft + boyMiddle);

// Y的坐标
// top = 人物底部的top - 门中见的top值
instanceY = boyPoxTop + boyHeight - doorOffsetTop + (doorTopMiddle);

// 开始走路
var walkPlay = stratRun({
transform: 'translateX(' + instanceX + 'px),translateY(-' + instanceY + 'px),scale(0.5,0.5)',
opacity: 0.1
}, 2000);
// 走路完毕
(function() {
$({
opacity: 0
});
();
});
return defer;
}

// 走出店
function walkOutShop(runTime) {
var defer = $.Deferred();
restoreWalk();
// 开始走路
var walkPlay = stratRun({
transform: 'translateX(' + instanceX + 'px),translateY(0),scale(1,1)',
opacity: 1
}, runTime);
// 走路完毕
(function() {
();
});
return defer;
}

// 计算移动距离
function calculateDist(direction, proportion) {
return (direction == "x" ?
visualWidth : visualHeight) * proportion;
}

return {
// 开始走路
walkTo: function(time, proportionX, proportionY) {
var distX = calculateDist('x', proportionX);
var distY = calculateDist('y', proportionY);
return walkRun(time, distX, distY);
},
// 走进商店
toShop: function() {
return (null, arguments);
},
// 走出商店
outShop: function() {
return (null, arguments);
},
// 停止走路
stopWalk: function() {
pauseWalk();
},
setColoer: function(value) {
$('background-color', value)
},
// 获取男孩的宽度
getWidth: function() {
return $();
},
// 复位初始状态
resetOriginal: function() {
();
// 恢复图片
$('slowWalk slowFlolerWalk').addClass('boyOriginal');
},
// 转身动作
rotate: function(callback) {
restoreWalk();
$('boy-rotate');
// 监听转身完毕
if (callback) {
$(animationEnd, function() {
callback();
$(this).off();
});
}
},
// 取花
talkFlower: function() {
$('slowFlolerWalk');
}
}
}

代码如下：

* {
padding: 0;
margin: 0;
}

ol,
ul,
li {
list-style-type: none;
}
/*主体部分*/

#content {
width: 100%;
height: 100%;
/*top: 20%;*/
overflow: hidden;
position: absolute;
}

.content-wrap {
position: relative;
}

.content-wrap > li {
background: #CAE1FF;
color: red;
float: left;
overflow: hidden;
position: relative;
}

li:nth-child(2) {
background: #9BCD9B;
}

li:nth-child(3) {
background: yellow;
}

a {
position: absolute;
top: 50%;
left: 40%;
}

代码如下：：

/
//页面滑动 //
/

/**
* [Swipe description]
* @param {[type]} container [页面容器节点]
* @param {[type]} options [参数]
*/
function Swipe(container) {
// 获取第一个子节点
var element = (":first");
var swipe = {};

// li页面数量
var slides = (">");

// 获取容器尺寸
var width = ();
var height = ();

// 设置li页面总宽度
({
width: ( * width) + 'px',
height: height + 'px'
});

// 设置每一个页面li的宽度
$.each(slides, function(index) {
var slide = (index); // 获取到每一个li元素
({
width: width + 'px',
height: height + 'px'
});
});

// 监控完成与移动
= function(x, speed) {
// 执行动画移动
({
'transition-timing-function' : 'linear',
'transition-duration' : speed + 'ms',
'transform' : 'translate3d(-' + x + 'px,0px,0px)'
});
return this;
};

return swipe;
}

秒客网

html5+css+js实现动画特效，人物动画

相关文章