Move and scale image

by moob

HTML

<div id="custombg"></div>
<div id="door"></div>
<div id="controls">
    <a href="#" data-dir="up">↑</a>
    <a href="#" data-dir="right">→</a>
    <a href="#" data-dir="left">←</a>
    <a href="#" data-dir="down">↓</a>
    <a href="#" data-dir="in">+</a>
    <a href="#" data-dir="out">-</a>   
</div>

CSS

html, body { margin:0; padding:0;}
#custombg {
    display:block;
    position:absolute;
    background: url(http://placekitten.com/400/350) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  top:0; right:0; bottom:0; left:0;
  border:10px solid #333;
    margin:auto;
}
#door {
    display:block;
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    margin:auto;
    width:110px;
    height:250px;
    background-color:black;
}
#controls {
    display:block;
    position:absolute;
    top:0; left:0;
    background-color:pink;
    font-size:2em;
}

JavaScript

$(function(){
    var custombg = {
        bg : $("#custombg"),
        plus : "+=10",
        minus : "-=10",
        move : {
            'up' : function(){
                    console.log("up");
                    custombg.bg.css("top",custombg.minus);
                    custombg.bg.css("bottom",custombg.plus);
                },
            'down' : function(){
                    console.log("down");
                    custombg.bg.css("top",custombg.plus);
                    custombg.bg.css("bottom",custombg.minus);
                },
            'left' : function(){
                    console.log("left");
                    custombg.bg.css("left",custombg.minus);
                    custombg.bg.css("right",custombg.plus);
                },
            'right' : function(){
                    console.log("right");
                    custombg.bg.css("left",custombg.plus);
                    custombg.bg.css("right",custombg.minus)
                },
            'in' : function(){
                    console.log("in");
                    custombg.bg.css("top",custombg.minus);
                    custombg.bg.css("right",custombg.minus);
                    custombg.bg.css("bottom",custombg.minus);
                    custombg.bg.css("left",custombg.minus);            
                },
            'out' : function(){
                    console.log("out");
                    custombg.bg.css("top",custombg.plus);
                    custombg.bg.css("right",custombg.plus);
                    custombg.bg.css("bottom",custombg.plus);
                    custombg.bg.css("left",custombg.plus);
                }
        }
    }
    
    $("#controls").on("click","a",function(e){
        var d = $(this).data("dir");
        custombg.move[d].call();
        e.preventDefault();
    });
});