Mys2010 on Codepen: Animated star trek | SEO Friendly Responsive Blogger Myscript2010s

Memasang Kode Animated star trek
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: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  4px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background: -moz-linear-gradient(top,  #151515 0%, #151515 100%);
  border-bottom: 3px solid #dad;  
}
/* 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;
color: #333;
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%, #444 50%, transparent 90%); 
}

.ball {
  z-index: 500;
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -50px;
  top: 50%;
  margin-left: -150px;
  left: 50%;
}
.Mys-2010 {
  position: absolute;
  top: 50%;
  left: 50%;
  left: 0;
  right: 0;
  margin: -22vh auto 0;
  z-index: 50;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO89UpztbCb-Fm8h5FKhV26Um2rH3qu9pTIrK6lKDrC2PSJpx04Uwz2s90OVTQjaIQoaTpbneGydofO75IpiwcKvFC674KuVyuRatIKwzRFNTFb-JnWqPbKPlI9mL4f69emifiaENAIbb6/s1600-r/black-logo-sule.png");
  width: 350vh;
  max-width: 300px;
  height: 350vh;
  max-height: 300px;
  box-shadow: inset 76px 0 80px 3px rgba(0, 0, 0, 0.69), inset -1px 0 50px 15px red, inset -1px 0 15px 2px white, 0 0 55px 10px #FF1000, 3px 0 10px 2px #FF1000, -3px 0 10px 2px rgba(96, 96, 159, 0.75);
  background-size: 602px;
  border-radius: 50%;
  position: relative;
  transform: scale(1.1) translateY(0px);
  animation-name: rotate, planet-zoom;
  animation-duration: 60s, 16.5s;
  animation-iteration-count: infinite, 1;
  animation-timing-function: linear, ease-out;
}
@keyframes rotate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 602px;
  }
}
@keyframes planet-zoom {
  0% {
    transform: scale(0) translateY(-100px);
  }
  51% {
    transform: scale(0) translateY(-100px);
  }
  52% {
    transform: scale(0.01) translateY(-100px);
  }
  100% {
    transform: scale(1.1) translateY(0px);
  }
}
.space {
  width: 100%;
  transform: scale(1.75) translateX(-300px);
  animation: space-zoom 16.5s 1 ease-out;
}

@keyframes space-zoom {
  0% {
    transform: scale(0.45) translateX(-250px);
    opacity: 0;
  }
  48% {
    transform: scale(0.45) translateX(-250px);
    opacity: 0;
  }
  49% {
    transform: scale(0.45) translateX(-250px);
    opacity: 1;
  }
  100% {
    transform: scale(1.75) translateX(-300px);
    opacity: 1;
  }
}
/*stars 2*/
canvas{
  position: absolute;
  min-width: 400px;
  min-height: 400px;
  width: 250%;
  height: 100%;

}

@keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-awan-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .hitam, .awan {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR7ro5RnI3ORQhUQzI-0OoQ5vm_BGnsKiwQEZr_Bb_xHDUclGozuFfeMswR-GSIYFG_tZkrqAHtcomJKEdTtgtIj28u-qHZ5m5vnfFZ2noGxLya1OfjcCphSJ-hzP96jYNU-nzq89b10I/s1600/stars-mys2010.png) repeat top center;
  z-index:0;
}

.hitam{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1uaGmJ_ROVn57ArVPv0uoqGJcR4bPHV4y0qR4gxnKiwudJxh0jiHnba6VnDnY1i-rZ5DiWWSgIFivpg1QrNgTqFA5X3CjwA-LQKdfxxOB-Hyj3IQwjSr_jadIMOSomMHk9RaU2W-tgS0/s1600/hitam-mys2010.png) repeat top center;
  z-index:1;

  -moz-animation:move-hitam-back 200s linear infinite;
  -ms-animation:move-hitam-back 200s linear infinite;
  -o-animation:move-hitam-back 200s linear infinite;
  -webkit-animation:move-hitam-back 200s linear infinite;
  animation:move-hitam-back 200s linear infinite;
}

.awan{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGFRpoZhieY2Gx_elVDKzm4KgYeG6g-3uT4g8rqZTURlRmdK2qGF6mpZIZ8Pfqio2uEJ2ZVhpvlzdygEFk_DTIq5DngtwOx_QSVdVq_yZfOfSHCZvkWCQ6GEpZgq_RGk8aU8-6Ht-ceg/s1600/clouds-mys2010.png) repeat top center;
    z-index:3;

  -moz-animation:move-awan-back 200s linear infinite;
  -ms-animation:move-awan-back 200s linear infinite;
  -o-animation:move-awan-back 200s linear infinite;
  -webkit-animation:move-awan-back 200s linear infinite;
  animation:move-awan-back 200s linear infinite;
}

body div#M-2010_holder {
 position: absolute;
 left: -30%;
 bottom: 60px;
 z-index: 6;

 -webkit-animation: launch_M-2010 240s linear infinite;
 -moz-animation: launch_M-2010 240s linear infinite;
 -ms-animation: launch_M-2010 240s linear infinite;
 -o-animation: launch_M-2010 240s linear infinite;
 animation: launch_M-2010 240s linear infinite;
}

@-moz-keyframes launch_M-2010 {
 25% {
   z-index: 6;
 }
 50% {
   left: 140%;
   bottom: 600px;
   z-index: 0;
 }
 55% {
   bottom: 680px;
 }
 75% {
   z-index: 0;
 }
 100% {
   left: -30%;
   z-index: 6;
   bottom: 100px;
 }}

.Flying-mys2010 {
 z-index: 600;
 cursor: pointer;
 -webkit-animation: Flying-mys2010 198s infinite linear;
 -moz-animation: Flying-mys2010 198s infinite linear;
 -ms-animation: Flying-mys2010 198s infinite linear;
 -o-animation: Flying-mys2010 198s infinite linear;
 animation: Flying-mys2010 188s infinite linear;
 bottom: 10%;
 left: 0%;
 position: absolute;
}
@keyframes Flying-mys2010 {
25% {
bottom: 105%;
left: 110%;
transform: rotateY(0deg);
}
26% {
transform: rotateY(180deg);
}
50% {
 bottom:60%;
 left: 0%;
 transform: rotateY(180deg);
}
51% {
 transform: rotateY(0deg);
}
75% {
 bottom:40%;
 left: 85%;
 transform: rotateY(0deg);}
76% {
 bottom:40%;
 left: 85%;
 transform: rotateY(180deg);
}
99% {
 transform: rotateY(180deg);}}

@keyframes float {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
  100% {
    transform:translateY(0);
  }
}</style>

<link href="https://sites.google.com/site/code6916/file/Logo-oval-Mys2010.css" rel="stylesheet" type="text/css">
<div class="stars">
<img class="Flying-mys2010" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiywzLPZE3EdhcAt6jASnA3peG7y6tOwQNLRRyUXMIQ_hhiQF50c8_Ru6CiP2UO8PCGjeSz9Mirj5iZ2AOoxoXz-t_TL4-CK18F0jBfxn97ZBl4gMCzCkwVB5W5O_jCg3MA09jpZDqk6AU/s1600/kapal-startrek-mys2010.png"name="e902" border="0" width="250" height="130" /></a>

<div id="M-2010_holder">
<div id="M-2010_back">
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic5voh00tj_10-coPCrqImHu94pDeV6OTOg8ON1NoaeYPs4dbpzx0NRtuEojY39AcBP9RoiDuMnY3ZnxFRZRVgIoaoXcwD71AM-B5ekjSQgOpZesrKnCR7iIzAUHEaPnwqhtzu5d6iNqs/s1600/animated-satellite-mys2010.gif" name="e902" border="0" width=" 45" height="45" /></a>
<div id="Logo-Mys2010">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEptwnKUzb7KgGv6ur4Ub8vN5Ea36BqiIutJkcqNYUl72FpsWFIaNpWIluJSanqp5W31tuADlBYKeji-tPWN0OS-MsoU93YK8Q03vDlvA0sbIJRf3Nb9WkUL4p5X-bsP0Qp1ErfkQuvhk/s1600/animasi-globe-mys2010.gif" name="e902" border="0" width=" 85" height="85" /></a>
</div>
</div>
<div id="Logo-Mys2010">
</div>
</div>
<div class="hitam">
</div>
<div class="awan">
</div>

<canvas id="stars-2"></canvas>
<div class="ball">
<div id="Logo-Mys2010">
 <div class="Mys-2010">

<img class="Flying-mys2010" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ahsfxesLCe0jniwKCgLDDQIIKWPzvfB_ri27rHcxxzW5a-gfK4XQeHBKKYDUSBkeFD-dINvb-2rAv_DbZ23k8KApPkov-stVDEe6BP7sUFW8ejYMUkJ-tNo4fbtWvpIgjHcxlCzBHTw/s1600/Eaglemoss-mys2010.png"name="e902" border="0" width="250" height="100" /></a>
</div>
</div>
</div>
</div>
<div class="ap" id="ap">
<div align="center">
<a href="https://Link Download"title="Myscript2010s"> 
<h2>
<span style="color: #000; font-size: 12px;">DOWNLOAD FULL CODE</2></a>
</div>
<header>
<h2>
<div align="center">
<div id="wrapper">
<audio id="mys2010" src="https://sites.google.com/site/code6916/lagu/startrek-mys2010.mp3" controls="controls"></audio></h2>
</div>
</header>

<ul class="mys2010-list"><link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>  <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 src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> <script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>              <script>
$(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mys2010PlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mys2010-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mys2010:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mys2010PlayNext(currentPlayer) {
    if ($('.mys2010-list li.current').length > 0) {
        var current_item = $('.mys2010-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mys2010-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
}
 
</script> <stars - 2> <script>
      var totalObjects = 1500;
var maxVelocity = 2;
var starSize = 1;
var twinkleFreq = 50000;
var shootingStarFreq = 500;
var shootingStarVelocity = 100;
var shootingStarSize = 1;

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            setInterval(callback, 75);
          };
})();

var canvas = document.getElementById('stars-2');
canvas.width = document.width || 1024;
canvas.height = document.height || 768;
var ctx = canvas.getContext("2d");

var stars = [];
var shootingStars = [];
this.init();

setInterval(update, 30);
requestAnimFrame(draw);

function init() {
  for(i=0;i<totalObjects;i++){
    stars.push(new Star());
  }
}

function draw() {
  requestAnimFrame(draw);
  ctx.clearRect(0,0,canvas.width,canvas.height);
   for(f=0;f<stars.length;f++)
   {
     stars[f].Update();
     stars[f].Draw();
   }
   for(f=0;f<shootingStars.length;f++)
   {
     shootingStars[f].Update();
     shootingStars[f].Draw();
   }
}

function update()
{
  if(Math.round((Math.random()*shootingStarFreq))==1){
    shootingStars.push(new ShootingStar());
  }
   for(f=0;f<shootingStars.length;f++)
   {
     if (shootingStars[f].X < -1000)
     {
       shootingStars.splice(f,1);
     }
   }
}
function Star(){
  this.X = Math.random()*canvas.width;
  this.Y = Math.random()*canvas.height;
  this.Velocity = (Math.random()*maxVelocity);
  this.Opacity = (((Math.random()*10)+1)*0.1);
  
  this.Update = function() {
    this.X -= this.Velocity;
    if(this.X<0){ ///reset
      this.X = canvas.width+1;
    }
  };
  
  this.Draw = function() {
    ctx.fillStyle = "rgba(255,255,255," + this.Opacity + ")";
    if(Math.round((Math.random()*twinkleFreq))==1){
      ctx.fillRect(this.X,this.Y,starSize+2,starSize+2);
    }
    else{
      ctx.fillRect(this.X,this.Y,starSize,starSize);
    }
  };
}

function ShootingStar() {
    this.X = 2000;
    this.Y = Math.random()*canvas.height;
    this.Length = 1000;
  
  this.Update = function(){
    this.X -= shootingStarVelocity;
  };
  
  this.Draw = function() {
    for (var i = 0; i < this.Length; i++){
      opacity = (0.8 - (0.001 * i));
      ctx.fillStyle = "rgba(255,255,255," + opacity + ")";
      ctx.fillRect(this.X+i,this.Y,shootingStarSize,shootingStarSize);
    }
  };
}       
    </script>

Hyperspace Code by Matt Popovich
Night sky with Stars Code by. Web Sonick

Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here  Animated star trek

Category: Animated star trek

Mys2010 on Codepen

Animated star trek

POPULAR

Blog Archive