JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<div id="map">
    <img src="http://images.wikia.com/dragonage/images/8/80/ThedasMap.jpg" alt="map" class="worldmap"/>
</div>

CSS

#map, .worldmap, #map:after {
    position: absolute;
    top: 0; left: 0;
}
#map {
    right: 0; bottom: 0;
    background: #ddd;
    overflow: hidden;
    -webkit-perspective: 600px;
}
.worldmap {
    
}

.worldmap.animated {
   
}

JavaScript

var Map, $win, $doc;

$win = $(window);
$doc = $(document);
    
Map = function(){
    this.$map = null;
    this.$container = null;
    
    this.containerWidth = null;
    this.containerHeight = null;
    
    this.mapY = null; // |
    this.mapX = null; // -
    
    this.centerY = null;
    this.centerX = null;
    
    this.timerHelper = null;
};

Map.prototype.init = function($container,$map){
    this.$map = $map;
    this.$container = $container;
};

Map.prototype.mesureContainer = function(){
    this.containerWidth = this.$container.width();
    this.containerHeight = this.$container.height();    
};

Map.prototype.getContainerCenterPosition = function(){
    this.centerX = Math.ceil( this.containerWidth / 2);
    this.centerY = Math.ceil( this.containerHeight / 2);
};

Map.prototype.goToPosition = function(position,z){ //array y x
    this.$map.css({"transform": "translate3d(" + position[1] + "px, " + position[0] + "px,"+ (z || 0) +"px)" });
};

Map.prototype.animateToPosition = function(position,speed,easing,z){ //array y x 
    var self = this;
    this.$map.css("transition", "-webkit-transform " + (speed || 300) + "ms " + (easing || "linear"));
    
    clearTimeout(this.timerHelper);
    this.timerHelper = setTimeout(function(){
        self.goToPosition(position,z);
    },10)
    
};

Map.prototype.setLocation = function(locationName,position){

};

// init

var M = new Map();

M.init( $("#map"),$(".worldmap").eq(0) );

//build an image preloader
M.goToPosition([-120,-250]);
setTimeout(function(){
    M.animateToPosition([-1200,-2502],3000,"ease-in-out");
},2000);
setTimeout(function(){
    M.animateToPosition([-3000,-5502],3000,"ease-in-out",-1500);
},6000);
setTimeout(function(){
    M.animateToPosition([-4300,-202],3000,"ease-in-out");
},12000);