圣诞雪橇，H5+JS+CSS3 实现圣诞情缘教程-慕课网

index.html christmas.js pageA.js common.css pageA.css

<!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="pageA.css">
    <script src="pageA.js"></script>
    <script src="christmas.js"></script>
</head>
 
<body>
    <section class="container">
        <!-- 第一幅画面 -->
        <section class="page-a bg-adaptive">
            <!-- 男孩 -->
            <div class="chs-boy chs-boy-deer"></div>
        </section>
        <!-- 第二幅画面 -->
        <section class="page-b bg-adaptive">
        </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 $pageA = $(".page-a");
 
    //构建第一个场景页面对象
    new pageA($pageA);
};   
 
$(function() {
    $("button").click(function(){
        //圣诞主题效果，开始
        Christmas()
    })
})

/**
 * 第一副场景页面
 * @param  {[type]} argument [description]
 * @return {[type]}          [description]
 */
function pageA (element) {
    //根元素
	this.$root = element;
	//小男孩
	this.$boy = element.find(".chs-boy");
	//运行动画
	this.run();
}
 
/**
 * 运行下一个动画
 * @return {Function} [description]
 */
pageA.prototype.next = function(options) {
    var dfd = $.Deferred();
    this.$boy.transition(options.style, options.time, "linear",function() {
        dfd.resolve()
    });
    return dfd;
}
 
 
/**
 * 停止走路
 * @return {[type]} [description]
 */
pageA.prototype.stopWalk = function(){
    this.$boy.removeClass("chs-boy-deer")
}
 
 
/**
 * 路径
 * @return {[type]} [description]
 */
pageA.prototype.run = function(callback){
    var that = this;
    var next = function() {
        return this.next.apply(this, arguments)
    }.bind(this)
 
    next({
        "time": 10000,
        "style": {
            "top": "4rem",
            "right": "16rem",
            "scale": "1.2"
        }
    })
    .then(function() {
       return next({
            "time":500,
            "style": {
               "rotateY" : "-180",
               "scale": "1.5"
            }
        })
    })    
    //?
    .then(function(){
        that.stopWalk();
    })  
 
}

*{
    margin: 0;
    padding: 0;
}
 
 
.container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
 
.bg-adaptive {
    background-size: 100% 100%;
}

/**
 * 背景布置
 */
.container .page-a {
    width  : 100%;
    height : 100%;
    background-image: url("http://img1.sycdn.imooc.com//565d07770001790814410901.png");
    position: absolute;
    z-index: 5;
}
 
 
/**
 * 圣诞男孩
 */
 
.chs-boy {
    width           : 5rem;
    height          : 1.5rem;
    position        : absolute;
    z-index         : 3;
    top             : .1rem;
    right           : -3rem;
    transform       : scale(0.1);
    background      : url(http://img.mukewang.com/565d07490001365329660269.png) -300% -100%;
    background-size : 400% 100%;
}
 
/**
 * 男孩走路动作
 */
 
.chs-boy-deer {
    -webkit-animation:chsBoyDeer 0.75s steps(3,end) infinite;
    -moz-animation:chsBoyDeer 0.75s steps(3,end) infinite;
}
 
@-webkit-keyframes chsBoyDeer {
    0% {
        background-position: -0% 100%;
    }
    100% {
        background-position: -300% 100%;
    }
}
@-moz-keyframes chsBoyDeer {
    0% {
        background-position: -0% 100%;
    }
    100% {
        background-position: -300% 100%;
    }
}
 
 
/**
 * 人物停止
 */
 
.boy-stop-animate {
    -webkit-animation-play-state: paused;
}

圣诞雪橇

任务