MovieCrop Example

ブロック要素の背景位置でアニメーションをさせるライブラリです。ActionScriptのMovieClipライクにコントロールが出来ます。

by mach3ss

HTML

<div id="container">
        <h1>MovieCrop Example</h1>
        <div class="items">
            <div class="item">
                <p>
                    ブロック要素の背景位置でアニメーションをさせるライブラリです。<br />
                    ActionScriptのMovieClipライクにコントロールが出来ます。
                </p>
            </div>
            <div class="item">
                <h2>Just Play</h2>
                <div class="demo">
                    <div id="demo-loading" class="loading"></div>
                </div>
                <p>シンプルに再生するだけの例。</p>
                <code data-src="loading"></code>
                <script type="text/javascript" data-id="loading">
                    $("#demo-loading").moviePlay({frames:12, fps:12});
                </script>
            </div>
            <div class="item">
                <h2>Play / Reverse / Stop / Rewind</h2>
                <div class="demo">
                    <div id="demo-control" class="graph"></div>
                    <p>
                        <input type="button" id="button-play-graph" value="PLAY" />
                        <input type="button" id="button-reverse-graph" value="REVERSE" />
                        <input type="button" id="button-stop-graph" value="STOP" />
                        <input type="button" id="button-rewind-graph" value="REWIND" />
                    </p>
                </div>
                <p>再生・逆再生・ストップ・巻き戻しのコントロールをする。</p>
                <code></code>
                <script type="text/javascript">
                    (function(){
                        var g = $("#demo-control").movieInit({frames:11});
                        $("#button-play-graph").on("click", function(){ g.moviePlay(); });
                        $("#button-reverse-graph").on("click", function(){ g.movieReverse(); });
                        $("#button-stop-graph").on("click", function(){ g.movieStop(); });
                        $("#button-rewind-graph").on("click", function(){ g.movieRewind(); });
                    }());
     ...

CSS

body {
    margin:0;
    padding:0;
    font-size:81.2%;
    background-color:#eee;
}
#container {
    width:480px;
    margin:0 auto;
    padding-bottom:50px;
    background-color:#fff;
}
h1 {
    background-color:#345;
    color:#fff;
    margin:0 1px;
    padding:1em;
}
h2 {
    border-left:20px solid #456;
    padding-left:1em;
    margin-left:-20px;
    color:#456;
}
code {
    display:block;
    white-space:pre;
    padding:1em;
    margin:20px 0;
    border-radius:5px;
    background-color:#ddd;
    font-size:1em;
    box-shadow:inset 0px 0px 5px #789;
}
.item {
    margin:40px 20px;
}
.demo {
    margin:30px 0;
}
.row {
    overflow:hidden;
}
.col {
    float:left;
    margin-right:20px;
}
.loading {
    width:32px;
    height:32px;
    background:url(https://github.com/mach3/js-moviecrop/raw/master/example/images/loading.png) 0 0 no-repeat;
}
.graph {
    width:32px;
    height:32px;
    background:url(https://github.com/mach3/js-moviecrop/raw/master/example/images/graph.png) 0 0 no-repeat;
}
.circle {
    width:32px;
    height:32px;
    background:url(https://github.com/mach3/js-moviecrop/raw/master/example/images/circle.png) 0 0 no-repeat;
}

JavaScript

/*
 * MovieCrop.js
 *
 * @author mach3
 * @license MIT License
 * @version 0.9
 * @require jQuery 1.7+
 */
(function(b,c){var a=function(e,d){this.init(e,d)};b.extend(a.prototype,{type:"MovieCrop",option:{fps:20,frames:20,repeat:true,direction:"vertical"},ele:null,ms:0,frame:1,timer:null,init:function(e,d){this.option=b.extend({},this.option,d);this.ele=b(e);this.ms=Math.floor(1000/this.option.fps);this.setFrame(1);return this},setPos:function(d,e){if(this.ele.css("background-position-x")){this.ele.css({"background-position-x":d,"background-position-y":e})}else{this.ele.css("background-position",d+"px "+e+"px")}return this},getPos:function(){var d=this.ele.css("background-position").match(/([\-\d]+?)px\s([\-\d]+?)px/);return{x:parseInt(d[1],10),y:parseInt(d[2],10)}},setFrame:function(f){var e,d,g;this.frame=f;e=this.frame-1;d=0;g=0;if(this.frame!==1){if(this.option.direction==="vertical"){g=-(e*this.ele.height())}else{d=-(e*this.ele.width())}}this.setPos(d,g);return this},nextFrame:function(){if(this.frame+1<=this.option.frames){this.setFrame(this.frame+1)}else{if(this.option.repeat){this.setFrame(1)}else{return false}}return this},prevFrame:function(){if(this.frame-1){this.setFrame(this.frame-1)}else{if(this.option.repeat){this.setFrame(this.option.frames)}else{return false}}return this},run:function(d,g){var e,f;g=b.isFunction(g)?g:function(){};f=d?"prevFrame":"nextFrame";clearTimeout(this.timer);e=function(){var h=this;if(this[f]()){this.timer=setTimeout(function(){e.call(h)},h.ms)}else{g()}};e.call(this)},play:function(d){this.run(false,d);return this},reverse:function(d){this.run(true,d);return this},stop:function(){clearTimeout(this.timer);return this},rewind:function(){this.setFrame(1);return this}});window.MovieCrop=a;b.extend(b,{initMovieCrop:function(f,d){var g,e;g=b(f);e="movie-crop";if(!g.data(e)){g.data(e,new a(f,d))}return g.data(e)}});b.fn.extend({movieInit:function(d){this.each(function(){b.initMovieCrop(this,d)});return...