Cara Membuat Animasi Rotasi Map Dengan Javascript

Hai, jumpa lagi dengan saya, kali ini saya akan berbagi tutorial lagi mengenai Cara Membuat Animasi Rotasi Map Dengan Javascript, ingin tau seperti apa cara membuatnya ? ikuti langkah-langkah nya berikut ini.

Baik langsung saja, silahkan buka teks editornya terlebih dahulu, kemudian ketikan kode HTML berikut.

<div id="map"></div>
<div id="shadow"></div>

1 2	<div id="map"></div> <div id="shadow"></div>

Kemudian ketikan lagi untuk kode CSS berikut ini.

body {
	background:#333;
  height:100%;
  width:100%;
  overflow:hidden;
}
#map {
	animation: rotate 600s infinite linear;
	width:140%;
	height:400%;
	background:#000 url(http://www.loadinfo.net/main/download?spinner=4809&disposition=inline) 50% 50% no-repeat;
	position:absolute;
	left:-20%;
	top:-150%;
	z-index:0;
}
#map.done {
	background-size:100% auto;
}

#shadow {
  position:absolute;
  z-index:10;
  left:0;
  top:0;
	width:100%;
  height:100%;
  background: radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0,rgba(0,0,0,1) 90%);
  
  color:rgba(255,255,255,.5);
  font:bold 64px/128px Verdana,Tahoma;
  padding:0 40px;
  
  text-shadow:0 0 16px rgba(255,255,255,.3);
}

@keyframes rotate {
	0% {
		transform: rotate(0deg) scale(.8) translate3d(0,0,0);
	}
	50% {
		transform: rotate(180deg) scale(1.2) translate3d(0,0,0);
	}                                               
	100% {                                      
		transform: rotate(360deg) scale(.8) translate3d(0,0,0);
	}
}

body {

background:#333;

height:100%;

width:100%;

overflow:hidden;

}

#map {

animation: rotate 600s infinite linear;

width:140%;

height:400%;

background:#000 url(http://www.loadinfo.net/main/download?spinner=4809&disposition=inline) 50% 50% no-repeat;

position:absolute;

left:-20%;

top:-150%;

z-index:0;

}

#map.done {

background-size:100% auto;

}

#shadow {

position:absolute;

z-index:10;

left:0;

top:0;

width:100%;

height:100%;

background: radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0,rgba(0,0,0,1) 90%);

color:rgba(255,255,255,.5);

font:bold 64px/128px Verdana,Tahoma;

padding:0 40px;

text-shadow:0 0 16px rgba(255,255,255,.3);

}

@keyframes rotate {

0% {

transform: rotate(0deg) scale(.8) translate3d(0,0,0);

}

50% {

transform: rotate(180deg) scale(1.2) translate3d(0,0,0);

}

100% {

transform: rotate(360deg) scale(.8) translate3d(0,0,0);

}

Setelah itu, lanjutkan untuk kode Javascript berikut.

$.getJSON('https://freegeoip.net/json/',function(data){
  var img = new Image(),
      src = 'https://maps.google.com/maps/api/staticmap?center='+data.latitude+','+data.longitude+'&zoom=14&maptype=satellite&size=640x640&scale=2&sensor=false&format=jpeg';
  console.log(src);
  $(img).load(function(){
    $('#map')
      .addClass('done')
      .css({
    		'background-image':'url('+src+')'
    	});
  })
  img.src = src;
  $('#shadow').html(data.region_name); 
})

$.getJSON('https://freegeoip.net/json/',function(data){

var img = new Image(),

src = 'https://maps.google.com/maps/api/staticmap?center='+data.latitude+','+data.longitude+'&zoom=14&maptype=satellite&size=640x640&scale=2&sensor=false&format=jpeg';

console.log(src);

$(img).load(function(){

$('#map')

.addClass('done')

.css({

'background-image':'url('+src+')'

});

})

img.src = src;

$('#shadow').html(data.region_name);

})

Kalo sudah semua diketikan, kemudian disimpan dan jalankan dibrowser masing-masing, dan lihat hasilnya. Selesai

Nah itulah tadi tutorialÂ Cara Membuat Animasi Rotasi Map Dengan Javascript, semoga bermanfaat, sampai ketemu dilain kesempatan.

Selamat mencoba.

Facebook DUMET School

Categories