<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>圣誕主題</title>
<link rel='stylesheet' href='common.css' />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
<link rel="stylesheet" type="text/css" href="pageB.css">
<script src="pageB.js"></script>
<script src="christmas.js"></script>
</head>
<body>
<section class="container">
<!-- 第一幅畫面 -->
<section class="page-a bg-adaptive">
</section>
<!-- 第二幅畫面 -->
<section class="page-b bg-adaptive">
<!-- 貓 -->
<figure class="cat"></figure>
<!-- 小女孩 -->
<figure class="girl"></figure>
<!-- 圣誕男孩 -->
<figure class="christmas-boy-head"></figure>
<figure class="christmas-boy boy-walk"> </figure>
</section>
<!-- 第三幅畫面 -->
<section class="page-c bg-adaptive">
</section>
</section>
<button>點擊執行</button>
<script type="text/javascript">
//rem設置
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
//寬與高度
document.body.style.height = clientWidth * (900 / 1440) + "px"
};
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</body>
</html>
/**
* 慕課網特制
* 圣誕主題效果
* @type {Object}
*/
/**
* 中間調用
*/
var Christmas = function() {
//頁面容器元素
var $pageB = $(".page-b");
//構建第二個場景頁面對象
new pageB($pageB);
};
$(function() {
$("button").on("click", function() {
//圣誕主題效果，開始
Christmas()
})
})
/**
* 第二副場景頁面
*
*/
function pageB(element, pageComplete) {
//女孩
var $girl = element.find(".girl");
var animationEnd = "animationend webkitAnimationEnd"
/**
* 小女孩動作
* @return {[type]} [description]
*/
var girlAction = {
//小女起立
standUp: function() {
var dfd = $.Deferred();
//起立
setTimeout(function(){
$girl.addClass("girl-standUp");
},200)
//拋書
setTimeout(function(){
$girl.addClass("girl-throwBook");
dfd.resolve()
},500)
return dfd;
},
//走路
walk: function(callback) {
//?
},
//停止走路
stopWalk: function() {
$girl.addClass("walk-stop")
.removeClass("girl-standUp")
.removeClass("girl-walk")
.removeClass("girl-throwBook")
.addClass("girl-stand")
},
//選擇3d
choose: function(callback) {
$girl.addClass("girl-choose")
.removeClass("walk-stop");
$girl.one(animationEnd, function() {
callback();
})
},
//淚奔
weepWalk: function(callback) {
$girl.addClass("girl-weep");
$girl.transition({
"left": "7rem"
}, 1000, "linear", function() {
$girl.addClass("walk-stop").removeClass("girl-weep")
callback();
})
},
//擁抱
hug: function() {
$girl.addClass("girl-hug").addClass("walk-run")
}
}
girlAction
.standUp()
.then(function() {
//女孩停止走路
return girlAction.stopWalk();
})
.then(function() {
//女孩走路
return girlAction.walk();
})
.then(function(){
//選擇
girlAction.choose(function() {
//繼續走路
girlAction.weepWalk(function() {
//擁抱
girlAction.hug();
})
})
})
}
*{
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.bg-adaptive {
background-size: 100% 100%;
}
.container .page-b {
width : 100%;
height : 100%;
background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png");
position: absolute;
z-index: 40;
}
/********************************************************
小女孩動作
**********************************************************/
/**
* 小女孩看書
*/
.girl {
width: 3.5rem;
height: 4.06rem;
position: absolute;
z-index: 10;
left: 1rem;
top: 3.2rem;
background: url(http://img1.sycdn.imooc.com//565d09e50001156273510407.png);
background-size: 2100% 100%;
}
/**
* 起身
*/
.girl-standUp {
left: 1.2rem;
-webkit-animation: standUp 200ms steps(3, start) forwards;
-moz-animation: standUp 200ms steps(3, start) forwards;
}
@-webkit-keyframes standUp {
0% {
background-position: 0% 100%;
}
100% {
background-position: -300% 100%;
top: 4rem;
}
}
@-moz-keyframes standUp {
0% {
background-position: 0% 100%;
}
100% {
background-position: -300% 100%;
top: 4rem;
}
}
/**
* 拋書動作
*/
.girl-throwBook {
top: 4rem;
left: 0.5rem;
-webkit-animation: throwBook 300ms steps(2, start) forwards;
-moz-animation: throwBook 300ms steps(2, start) forwards;
}
@-webkit-keyframes throwBook {
0% {
background-position: -300% 100%;
}
100% {
background-position: -500% 100%;
}
}
@-moz-keyframes throwBook {
0% {
background-position: -300% 100%;
}
100% {
background-position: -500% 100%;
}
}
/**
* 小女孩走路
*/
.girl-walk {
left: 1rem;
-webkit-animation: girlWalk 900ms steps(4, start) infinite;
-moz-animation: girlWalk 900ms steps(4, start) infinite;
}
@-webkit-keyframes girlWalk {
0% {
background-position: -500% 100%;
}
100% {
background-position: -900% 100%;
}
}
@-moz-keyframes girlWalk {
0% {
background-position: -500% 100%;
}
100% {
background-position: -900% 100%;
}
}
/**
* 站立動作
*/
.girl-stand {
top: 4rem;
background-position: -1000% 100%;
}
/**
* 小女孩選擇3d選擇
*/
.girl-choose {
-webkit-animation: girlChoose 2000ms steps(2, end) forwards;
-moz-animation: girlChoose 2000ms steps(2, end) forwards;
}
@-webkit-keyframes girlChoose {
0% {
background-position: -1000% 100%;
}
100% {
background-position: -1200% 100%;
}
}
@-moz-keyframes girlChoose {
0% {
background-position: -1000% 100%;
}
100% {
background-position: -1200% 100%;
}
}
/**
* 流淚奔跑
*/
.girl-weep {
-webkit-animation: girlWeep 450ms steps(4, end) forwards infinite;
-moz-animation: girlWeep 450ms steps(4, end) forwards infinite;
}
@-webkit-keyframes girlWeep {
0% {
background-position: -1300% 100%;
}
100% {
background-position: -1700% 100%;
}
}
@-moz-keyframes girlWeep {
0% {
background-position: -1300% 100%;
}
100% {
background-position: -1700% 100%;
}
}
/**
* 女孩擁抱
*/
.girl-hug {
-webkit-animation: girlHug 450ms steps(3, end) forwards;
-moz-animation: girlHug 450ms steps(3, end) forwards;
}
@-webkit-keyframes girlHug {
0% {
background-position: -1700% 100%;
}
100% {
left: 7.85rem;
background-position: -2000% 100%;
}
}
@-moz-keyframes girlHug {
0% {
background-position: -1700% 100%;
}
100% {
left: 7.85rem;
background-position: -2000% 100%;
}
}
