Mys2010 on Codepen: Animated Ball | SEO Friendly Responsive Blogger Myscript2010s

Memasang Kode Animated Ball
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,  #666 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%); 
}

body {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXSHM686_IUUXjEdmJEMhtYKwiqYu1c-Ap-37iGuwiYH0sDzjHpc9C_AoSZ3hWrxThtcp-dLOK9FZ1as0SdxmvKYr-Sy5lnG5bg4e9xLD_pP6svv7c5q5cTfXVRed3lwjVaw-4bp9Ju-M/s1600/background-mys2010S.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

html,
M-2010 {
margin: 0;
padding: 0;
height: 100%;
}
.M-2010 {
  width: 200px;
  height: 200px;
  margin-left: -100px;
  position: absolute;
  bottom: 100px;
  z-index: 10;
}
@media screen and (max-width: 568px) {
  .M-2010 {
    bottom: 60px;
  }
}
.M-2010 .shadow-1 {
  width: 110%;
  position: absolute;
  z-index: -2;
  bottom: -20px;
  margin-left: -5%;
  height: 50px;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}
.M-2010 .shadow-2 {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIYKyFzeI1S__l3S6Pp3959JoJdIaCm1rknXiGHRCmcFPtMc__uLeebmjxxqUN6kPE6vQx6_xM2tmpp5bTB78A28ZZlMXhVnsaaTuHAYWUcPgPJrp9jzzLc6yJI9v25xbLQ59_ojI6U1s/s1600/shadow-mys2010.png");
  background-size: 100%;
  z-index: 2;
}
.M-2010 .roller {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP8KEJwNWFMR0ZwbOC1DqZEGYNd710Evee3BXNFrHVlKXzojAPlNoBMS3OBWXAaI_x4xk6c7DyzLTENMZBGCkwLXhy8Rmam_fzmTNXfO93I7XNaBvcstO2BG31CrcZvEng9B0TpZZt7fk/s1600/ball-mys2010.png");
  background-size: 100%;
}
.M-2010 .roller .front {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -40px 0 0 -40px;
  width: 80px;
  height: 80px;
  background-color: red;
}

@keyframes Logo-Mys2010-rotate {
  0% {
    left: calc(50% - 50px);
    -moz-box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
    -webkit-box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
    box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    left: calc(10% - 50px);
    z-index: 5;
    -moz-box-shadow: inset -20px 0px 20px 15px #f00;
    -webkit-box-shadow: inset -20px 0px 20px 15px #f00;
    box-shadow: inset -20px 0px 20px 15px #f00;
    -moz-transform: scale(0.75);
    -ms-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  50% {
    left: calc(50% - 50px);
    z-index: 5;
    -moz-box-shadow: inset 0 20px 40px 40px rgba(4,000,000, .4);
    -webkit-box-shadow: inset 0 20px 40px 40px rgba(4,000,000, .4);
    box-shadow: inset 0 20px 40px 40px rgba(4,000,000, .4);
    -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  60% {
    -moz-box-shadow: inset 0 20px 40px 80px #f00;
    -webkit-box-shadow: inset 0 20px 40px 80px #f00;
    box-shadow: inset 0 20px 40px 80px #f00;
  }
  75% {
    left: calc(90% - 50px);
    z-index: 5;
    -moz-box-shadow: inset 0 20px 40px 40px rgba(4,000,000, .4);
    -webkit-box-shadow: inset 0 20px 40px 40px rgba(4,000,000, .4);
    box-shadow: inset 0 20px 40px 40px rgba(4,000,000, .4);
    -moz-transform: scale(0.75);
    -ms-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  100% {
    left: calc(50% - 50px);
    z-index: 20;
    -moz-box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
    -webkit-box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
    box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

#Logo-Mys2010 {
  -webkit-animation: Logo-Mys2010-rotate 15s linear infinite;
  animation: Logo-Mys2010-rotate 45s linear infinite;
  background: url(https://sites.google.com/site/pelajaranku1/fileku/logo-mys2010.png) no-repeat 0 0 #ccc;
  background-size: 100px;
  height:  70px;
  left: calc(50% - 50px);
  position: absolute;
  top: calc(50% - 150px);
  width:  70px;
  z-index: 20;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
  -webkit-box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
  box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
}


.spin {
  margin-top: -107px;
  position: relative;
    left: -12px;

  animation-name: spin-run;
  animation-duration: 350ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  width: 100px;
}
 
.spin .wheel {
  height: 100px;
  width: 100px;
 background: rgba(4,000,000, .4);
  border-radius: 50%;
  overflow: hidden;
  animation-name: wheel-turn;
  animation-duration: 350ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.spin .wheel rotation {
  position: absolute;
  margin: 10%;
  width: 140px;
  height: 10px;
  border: 3px solid #fff;
  border-radius: 150%;
  transform-origin: 50px 50px;
  transform: rotate(360deg);
}
.spin .wheel rotation:nth-child(2) {
  transform: rotate(120deg);
}
.spin .wheel rotation:nth-child(3) {
  transform: rotate(240deg);
}
.spin .wheel:before {
  content: '';
  top: 10px;
  left: 50px;
  right: 10px;
  bottom: 10px;
  border-radius: 50%;
  border: 4px solid #fff;
  position: absolute;
}
.spin .wheel:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  box-shadow: inset -25px -25px 40px #000;
  animation-name: shadow-turn;
  animation-duration: 350ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin-run {
  0% {
    transform: rotate(0deg);
    top: 50%;
  }
  50% {
    top: 52%;
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
    top: 50%;
  }
}
@keyframes wheel-turn {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes shadow-turn {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.M2010-Alert {
  opacity: 1;
}
.is-hidden {
  opacity: 0;
}
.is-removed {
  display: none;
}

#message {
  margin: 0 auto;
  width: 60%;
  padding: 10px;
  background-color: rgba(4,000,000, .4);
font-size: 5em;
font-family: agency fb;
  text-align: center;
  font-weight: bold;

  margin-top: 150px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
  color: green;
</style>}

<div id="message">
</div>

<div id="Logo-Mys2010">
<div class="spin">
<rotation></rotation>
<rotation></rotation>
<rotation></rotation>
<div class="wheel">
<rotation></rotation>
<rotation></rotation>
<rotation></rotation>
</div>
</div>
</div>
<M-2010 translate="no" >
<div class="background">
<div class="M-2010">
<div class="shadow-1">
</div>
<div class="shadow-2">
</div>
<div class="roller">
</div>
</div>
</div>

<div class="ap" id="ap">
<div align="center">
<a href="https://sites.google.com/site/kodesite/svn/Animated-Ball-mys2010s.css"title="Myscript2010s"> 
<h2>
<span style="color: #000; font-size: 12px;">DOWNLOAD FULL CODE</2></a>  
</div>
<header> 
<body translate="no" ><div align="center" style="margin-top: -12px">
<audio id="mys2010" src="https://sites.google.com/site/pelajaranku1/mp3ku/bob-marley-Mys2010.mp3" controls="controls"></audio></div>
</header>

<script rel="stylesheet"src="https://sites.google.com/site/code6916/file/ball-mys2010s.js">
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<M2010-Alert> 
</script> 
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script> 
<script>
      $(document).ready(function() {
  var newX,
      currentX = 0,
      pageWidth = $(this).width(),
      ball = $('.M-2010'),
      roller = $('.roller'),      
      speed = 4,
      distance,
      acceleration,
      antennaPos,
      idleInterval,
      started = false;
  $(this).on('mousemove', function(x) {
    if (!started) {
       clearInterval(idleInterval);
      started = true;
    }
    newX = x.pageX;
  });

  $(document).on('touchmove', function(e) {
    if ("ontouchstart" in document.documentElement) {
      e = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
    }
    if (!started) {
       clearInterval(idleInterval);
      started = true;
    }
    newX = e.pageX;
  });
  var idleCount = 1;
  
  function idle() {
     newX = pageWidth/2;
    
   idleInterval =  setInterval(function(){
      idleCount += speed;
      newX = pageWidth/2 + (Math.cos(idleCount/100)*100);
    },10);
  }

  function movement() {
    if (currentX !== newX) {
      distance = newX - currentX;
      acceleration = Math.abs(distance) / 100;
      antennaPos = 2250 + Math.round(distance / 5) * 75;

      if (antennaPos <= 0) {
        antennaPos = 75;
      } else if (antennaPos >= 4500) {
        antennaPos = 4500;
      }

      if (currentX < newX) {
        currentX += speed * acceleration;
      } else {
        currentX -= speed * acceleration;
      }

      
      roller.css('transform', 'rotateZ(' + currentX / 2 + 'deg)');
      
      ball.css('transform', 'translateX(' + currentX + 'px)');
      

    } else {
      return;
    }
  }
 
  setInterval(movement, 10);
  idle();
});
     </script>

<M2010-Alert>
<script>
$(function () {
    showMessage('&clubs; WELCOME BACK &clubs; ');
});
function showMessage(s) {
    var m = $('#message');
    m.html(s);
    m.addClass('M2010-Alert ');
    setTimeout(function () {
        m.removeClass('M2010-Alert ');
        m.addClass('is-hidden');
        setTimeout(function () {
            m.addClass('is-removed');
        }, 6000);
    }, 3000);
}

</script>                          

<music> <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-f961f59a28ef4fd551736b43f94620b5.js"></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>

Star Wars code by. Michael Leonard
Load Text Alert Code by. Scott Dawson

Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here  Code Animated Ball

Category: Animated Ball

Mys2010 on Codepen

Animated Ball

POPULAR

Blog Archive