Kembali Jika Tidak DitemukanKlik Pada Judul Map Animation with Orbital CSS
Showing posts with label Map Animation with Orbital CSS. Show all posts
Showing posts with label Map Animation with Orbital CSS. Show all posts

Map Animation with Orbital CSS

Memasang Kode Map Animation with Orbital CSS
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.
Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #000;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background: -moz-linear-gradient(top,  rgba(39,51,31,1) 0%, #111 100%);
  border-bottom: 3px solid #333;  
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, rgba(39,51,31,1) 50%, transparent 90%); 
}

.button {
background: #000;
display: block;
padding: 1.4em 1.7em;
font-size: .1em;
text-align: center;
}
.button:hover {
background: #fc7f1d;
}
.nav {
position: fixed;
z-index: 8;
bottom: 0;
left: 0;
}
.next {
background: rgba(0, 0, 0, 0.5);
padding: 2px;
text-align: center;
font-size: .6em;
float: left;
}
.next em {
display: block;
opacity: .5;
padding: 35px;
text-transform: uppercase;
letter-spacing: 2px;
}
.next img {
opacity: .8;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
.next:hover {
background: #000;
}
.next:hover img {
opacity: 1;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
}
.highlight {
position: fixed;
top: 200px;
left: 100px;
z-index: 5;
}
.highlight span {
content: ' ';
width: 1px;
display: block;
border-bottom: 2px solid yellow;
position: absolute;
top: 9px;
left: 19px;
height: 1px;
overflow: hidden;
transition: all .4s;
}
.highlight em {
display: block;
height: 24px;
width: 24px;
border-radius: 50%;
border: 2px solid yellow;
}
.featured-story .thumb {
display: block;
text-align: center;
position: relative;
}
.featured-story .thumb img {
width: 100%;
}
.featured-story .thumb:after {
content: '\f144';
font-family: 'FontAwesome';
display: block;
color: rgba(255, 255, 255, 0.7);
font-size: 2em;
position: absolute;
bottom: 20px;
left: 20px;
z-index: 2;
}
.featured-story .title {
position: relative;
margin: 11px;
z-index: 3;
float: right;
width: 283px;
color: green;
border: 4px solid #ff0;
transition: all .3s ease-in;
}
.featured-story h1 {
font-size: 2em;
margin: 40px 30px 10px;
}
.featured-story p {
font-size: .8em;
line-height: 1.4em;
margin: 0 30px 40px;
}
.bg {
position: fixed;
top: 0;
left: 10;
z-index: 1;
transition: all 2s ease-out;
}

.container {
left: -410px;
  position: relative;
  width: 540px;
  margin: -144px auto;
  text-align: center;
  height: 600px;
}
.planets div {
  display: inline-block;
  position: absolute;
  /*box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);*/
}
.ring {
  border: 1px dashed rgba(255, 255, 255, 0.5);   
  transform: rotate(0);    
  box-shadow: none;
} 
.one {
  width: 300px;
  height: 300px;
  border-radius: 200px;
  left: -110px;
  top: -110px;
}
.two {
  width: 52px;
  height: 52px;
  border-radius: 50px;
  background: #8edd6f;
  top: 16px;
  left: -132px;
  transform-origin: 26px 26px;
}
.two > .ring {
  width : 120px;
  height: 120px;
  border-radius: 120px;
  top: -35px;
  left: -35px;
}
.three {
  width: 30px;
  height: 30px;
  border-radius: 25px;
  background: #5be6ff;
  top: 25px;
  right: -122px;
  transform-origin: 15px 15px;  
}
.three > .ring {
  width : 77px;
  height: 77px;
  border-radius: 80px;
  top: -22px;
  left: -22px;
}
.four {
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background: #dda1f9;
  top: -18px;
  left: -18px;
  transform-origin: 8px 8px;
}
.five {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #b58579;
  top: -30px;
  left: -30px;
  transform-origin: 5px 5px; 
}
.six {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #7dfffd;
  top: -50px;
  left: -50px;
  transform-origin: 10px 10px; 
}
.seven {
  width: 30px;
  height: 30px;
  border-radius: 50px;
  background: #fff;
  top: -30px;
  left: -30px;
  transform-origin: 15px 15px; 
}
.slow > .ring {
  width : 117px;
  height: 117px;
  border-radius: 80px;
  top: -42px;
  left: -42px;
}
.fast > .ring {
  width : 152px;
  height: 152px;
  border-radius: 80px;
  top: -62px;
  left: -62px;
}
.sun {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  top: 170px;
  left: 240px;
  display: inline-block;
  position: absolute;
  box-shadow: 0 0 120px #f1da36, 0 0 60px #f2ad00, 0 0 10px #c96800, 0 0 200px #feff8f;
  background: radial-gradient(center, ellipse cover, #fcf3a1   
   0%,#f1da36 100%);
    box-shadow: 0 0 120px #f1da36, 0 0 60px #f2ad00, 0 0 10px #c96800, 0 0 200px #feff8f;
  background: -moz-radial-gradient(center, ellipse cover, #fcf3a1 0%, #f1da36 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fcf3a1), color-stop(100%,#f1da36)); 
  background: -webkit-radial-gradient(center, ellipse cover, #fcf3a1 0%,#f1da36 100%);
  background: -o-radial-gradient(center, ellipse cover, #fcf3a1 0%,#f1da36 100%); 
  background: -ms-radial-gradient(center, ellipse cover, #fcf3a1      0%,#f1da36 100%);
}
.sun {
  animation: spin 100s infinite linear; 
}  
.two {
  animation: spin 50s infinite linear; 
}
.three {
  animation: spin 70s infinite linear; 
}
.four {
  animation: spin 50s infinite linear; 
}
.slow {
  animation: spin 10s infinite linear; 
}
.fast {
  animation: spin 20s infinite linear; 
}

@keyframes spin {  
from {  
  transform: rotate(0deg);  
}  
to {  
  transform: rotate(360deg);  
   }  
}

#original-link, #load-song, #credits, #tested {
    position: absolute;
    font-size: 11px;
    margin: 402px
}
#original-link, #load-song div {
    text-decoration: underline;
    cursor: pointer
}
#load-song, #credits {
    text-align: right;
    right: 0
}
 #tested, #credits {
    bottom: 0
}</style> 

<div class="content">
<div class="highlight hide">
<span>&nbsp;</span>
<em>&nbsp;</em>
</div>
<div class="featured-story">
<div class="title hide">
<a class="thumb" href="#"><img src="" width="320" height="180" /></a>
<h1>
</h1>
<p>
</p>

<a class="button" href="https://www.google.com/maps/dir/-6.8851741,107.5182383/-6.8877379,107.5220618/@-8.1596713,62.1344764,19398036m/data=!3m1!1e3!4m2!4m1!3e2"target="_blank" title="Alamat"> <img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ0EWe5LMLUDEd3U1DnqR-iI6f8GeV1p6wiANLns4J4HBnfzbSWBTp1JZAa6TW870MGgilxyDzU1p1efAXrQJTnciBrN1LvSH6YQJTmgVmJRnsH127dWsWfkAPDynah53KzdiU64O1TIk/s1600-r/Globe_mys2010.gif" height="29" name="e902" width="28"></a>
</div>
</div>
<div class="bg">
<img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipeaqvjoLwbBLAnVTiUW_SCFT2Ph2oPhndR4rgIavJzUUCw9ZJd02AAzcZ1Hx0ftmqs9MbvO2uQ7545TNngXXhdQ6FkUHjsqicAmdk8HSAElpkhD-SCHskRAyMoshNR9DNsKRAbf4MwXs/s1600/saturnus-mys2010.gif" height="60" name="e902" width="60">
<img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYU9knzsUy_WTMbTqQtVoIqUYYPQGs6RJ79nbf7952L6gFmE8rlDZtquWBM6GsZd6giU2hOWA5PIvFc4M4eE8F7WKg_AwqqkLkZIdmngepseNRtAs-dV5o_d5cj5l_yHOgpvez1b5mYi0/s1600/yellowBlue-mys2010.gif" height="50" name="e902" width="50">

<img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZuJaMn1GXbftO5tAOmjD6m4dPb1LYrYEh-JJfsVCmad_9E47iO_GWIcab2_sHZPKy4cb0b0oi2767pqhNgr5tuTIggJ7YeUSxqf_L0NgvZHE8g21KOgVcifxWwfNgqzYkKFCnbvbRxQ/s1600/Satur-mys2010.gif" height="30" name="e902" width="40"> <img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-fqbdg_kxBByYAPobBRRsDkSwyFTm1MvJB_AvNTlXAQqgWCMhwQeIVn9mS4eXvMrUusdLZguZowHcT8-jFFAmTxjqc2P-Yt__SoauygX68FI-BqBUIH8WmrxgvZeg6dAxwB2Zusb2mk/s1600/speedRotate-mys2010s.gif" height="25" name="e902" width="25"><img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGKXy63avRSmVy0YO34O5u8DBwefJexrEC0GGPeKwr_yGMuVW5r1RjoRAgoHMSBM-5zCFgw-Ji-R6c5Wb9PtRkYh1JLNk6Af9giqcimZos6R2MlHz9CWFAVT4l7kMrX3KvxtIY_5e44bg/s1600/ring-mys2010.gif" height="45" name="e902" width="45">
</div>
</div>

<div id="credits">
SOURCE CODE &nbsp; &nbsp;<a href="http://codepen.io/willpaige/full/ImjGq" target="_blank" title="Will Paige"> <span style="color:#ff0">ORBITAL CSS  </a>&nbsp; &nbsp;  </font></a> <a href="http://codepen.io/kristenzirkler/pen/duarn" target="_blank" title="Kristen Zirkler"> <span style="color:#ff0"> &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp;&nbsp; &nbsp; MAP ANIMATION  </a>&nbsp; &nbsp; IN CODEPEN </font></a> 
</div>


<body>
<div class="bg">
</div>
<div class="container">
<div class="planets sun">
<img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJa5NbZusqT0gsWRociN5jpyX-0GXXNVSqh_MXkdzUuWOL8zRhOf9IbscMgexkUByAFz2uXfgf-7aV-2KhxK6GmmshgRK6jQ8KYsHm_Q1QNG103uzo1lT1rwk1m2dsUq9bNRYAWojVXos/s1600/GlobeAnimated-mys2010.gif" height="98" name="e902" width="98">
<div class="one ring">
</div>
<div class="two">

<div class="ring">
</div>
<div class="seven">
</div>
</div>

<div class="three">
<div class="ring">
</div>
<div class="four">
</div>
</div>

<div class="three slow">
<div class="ring">
</div>
<div class="five">
</div>
</div>

<div class="three fast">
<div class="ring">
</div>
<div class="six">
</div>
</div>
</div>
</div>

<div class="nav">
<a href="#" class="next" data-city="Cibeber Cimahi"><span><img src="https://cdn0.iconfinder.com/data/icons/interaction-flat-1/60/circle-arrow-repeat-exclamation-128.png" width="50" height="50" /><em>Myscript2010</em></span></a><a href="https://www.google.com/maps/dir/-6.8953737,107.5198196/Jl.+Raya+Cibeber,+Cibeber,+Cimahi+Sel.,+Kota+Cimahi,+Jawa+Barat,+Indonesia/@-12.8996916,149.5666948,19380799m/data=!3m1!1e3!4m8!4m7!1m0!1m5!1m1!1s0x2e68e5044118a5e1:0x644036447f9cf5a4!2m2!1d107.5194901!2d-6.8950008"target="_blank" title="Alamat"><span><img src="http://icons.iconarchive.com/icons/tatice/operating-systems/128/Globe-icon.png" width=" 35" height="35" /></span></a> Google Map</a>
</div>
</div>

<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id"target="_blank"title="Myscript2010s"> 
<h2>
<font size="2" color="white"face="vivaldi"> Myscript2010</font></2></a>  
</div>
<header> 
<a href="https://www.embed-map.com"target="_blank"title="Myscript2010s"><span style="color:white"><b>EMBED MAP</b>
</div>
</a> 
</header>


<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script>$(document).ready(function () {
    loadCity('cibeber-cimahi');
    $('.hide').removeClass('hide');
});
$('.next').click(function () {
    var cityAlias = $(this).data('city');
    loadCity(cityAlias);
});
function loadCity(cityAlias) {
    var cityID, cityName, cityXCoord, cityYCoord, cityBlurb;
    switch (cityAlias) {
    case 'cibeber-cimahi':
        cityID = 6;
        cityName = 'Cibeber Cimahi';
        cityXCoord = 391;
        cityYCoord = 342;
        cityBlurb = 'These directions are for planning purposes only. You may find that construction projects, traffic, weather, or other events may cause conditions to differ from the map results, ';    
    }
    cityXCoord = cityXCoord - 100;
    cityYCoord = cityYCoord - 200;
    $('.title').hide();
    $('.highlight span').width(1);
    $('.bg').css({
        top: '-' + cityYCoord + 'px',
        left: '-' + cityXCoord + 'px'
    });
    $('.title').fadeTo(1000, 0.2, function () {
        $('.thumb img').attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVTviz2VBJVM3paiubzp5E8wCDW3s_6VNIAv8d2UhXeXkqLyJCSQKol2hyIaJnv5edZLZOVAINI5LdgiXDVR0Ks6Hb3T038HboqEVng0VpF-IS3k4OJuoO-2pDUXuFTySiVcqPQlQxH8/s1600/jl2-mys2010.png' + cityID);
        $('.featured-story h1').text(cityName);
        $('.featured-story p').text('These directions are for planning purposes only. You may find that construction projects, traffic, weather, or other events may cause conditions to differ from the map results,  ');
        var contentWidth = $('.content').width();
        $('.highlight span').width(contentWidth - 455);
        $('.title').fadeTo('1000', 1);
    });
}
 
</script>
Orbital Css Code by. Will Paige
Map Animation Code by. Kristen Zirkler
Design code is edited by. Mys2010 In Codepen
DEMOSHOW
If you want to directly copy and paste you canDownload Here Map Animations orbital

Category:
Subscribe to: Posts (Atom)