07/09/16 | Mys2010 on Codepen

Memasang kode Image rotate with audio Untuk menerapkan kode tersebut Langkah awal
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 ini Get Blank Template
edit background warna sesuai keinginan dan 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;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPumO9s-bI-FeawJtUjdT3Vei9X8FyfjlrUeqNa6hjHLVUtfDWsL1Gy9Ew_mhem7GpepKZC6iBUP1bOXs6Lq7lRybGASe4eRyQtxTi7i52Vvrf3_i2BXiHr8GVc9K5lsuw_7y6TwcAGeQ/s1600/bg-black-M2010.png);
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: -5px;
  width: 100%;
text-align: center;
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.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;
font-size:  11px;
background:  #111;
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%, #fff 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 17px;
}

.layer {
  position: absolute;
  bottom: 0;
  -webkit-animation: 10s linear infinite alternate;
          animation: 10s linear infinite alternate;
}
.l1 {
  z-index: 1;
  -webkit-animation-name: l1;
          animation-name: l1;
}
.l2 {
  z-index: 2;
  -webkit-animation-name: l2;
          animation-name: l2;
}
.l3 {
  z-index: 3;
  -webkit-animation-name: l3;
          animation-name: l3;
}
@-webkit-keyframes l1 {
  100% {
    -webkit-transform: translate3d(-100px, 0, 0);
            transform: translate3d(-100px, 0, 0);
  }
}
@keyframes l1 {
  100% {
    -webkit-transform: translate3d(-100px, 0, 0);
            transform: translate3d(-100px, 0, 0);
  }
}
@-webkit-keyframes l2 {
  100% {
    -webkit-transform: translate3d(-200px, 0, 0);
            transform: translate3d(-200px, 0, 0);
  }
}
@keyframes l2 {
  100% {
    -webkit-transform: translate3d(-200px, 0, 0);
            transform: translate3d(-200px, 0, 0);
  }
}
@-webkit-keyframes l3 {
  100% {
    -webkit-transform: translate3d(-500px, 0, 0);
            transform: translate3d(-500px, 0, 0);
  }
}
@keyframes l3 {
  100% {
    -webkit-transform: translate3d(-500px, 0, 0);
            transform: translate3d(-500px, 0, 0);
  }
}
/* Lantern Layer */
.l3 {
  bottom: 0;
  width: 1000%;
  background: #182b3d;
}
.la {
  position: absolute;
  bottom:20px;
  width: 20px;
  height: 250px;
  background: #222;
  margin-right: 20px;
}
.la:before {
  top: 5px;
  left: -10px;
  width: 22px;
  height: 2px;
  background: #182b3d;
}
.la:after {
  bottom: 0;
  left: -2px;
  width: 6px;
  height: 12px;
  background: #182b3d;
}
.l {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 25px #fff, 0 0 50px #fff;
}
.l:nth-child(1) {
  left: -10px;
}
.l:nth-child(2) {
  right: -10px;
}
.la:nth-child(1) {
  left: 100px;
}
.la:nth-child(2) {
  left: 200px;
}
.la:nth-child(3) {
  left: 300px;
}
.la:nth-child(4) {
  left: 400px;
}
.la:nth-child(5) {
  left: 500px;
}
.la:nth-child(6) {
  left: 600px;
}
.la:nth-child(7) {
  left: 700px;
}
.la:nth-child(8) {
  left: 800px;
}
.la:nth-child(9) {
  left: 900px;
}
.la:nth-child(10) {
  left: 1000px;
}
.la:nth-child(11) {
  left: 1100px;
}
.la:nth-child(12) {
  left: 1200px;
}
.la:nth-child(13) {
  left: 1300px;
}
.la:nth-child(14) {
  left: 1400px;
}
.la:nth-child(15) {
  left: 1500px;
}
.la:nth-child(16) {
  left: 1600px;
}
.la:nth-child(17) {
  left: 1700px;
}
.la:nth-child(18) {
  left: 1800px;
}
.la:nth-child(19) {
  left: 1900px;
}
.la:nth-child(20) {
  left: 2000px;
}

.spongbob  
{  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmeKPROb3SkGl87VHOue4d6g0PqnP8MkNjBrlPNrCsfY4Qzpz1GyepU8Us1jVLGSGvKSbRFLY_7XMJrtu3rAMHP9r2sAA08qZRPmkSIqJO1hgcddvFjLBwT5_D_R7mIPCloGhj3uZ4zVo/s1600/Spongebob_dance-M2010.gif);background-repeat:no-repeat;
  width: 328px;  height:310px; 
  position:absolute;
  left:25%;top:79%;  -webkit-transform: translate(-50%,-50%);  transform: translate(-50%,-50%);
}
.spongbob-position {
animation: catchup  80s ease-in-out infinite;  
position: absolute;
bottom: 198px;
left: 50%;
margin-left: -160px;
}
/* Sprint, then slow */
@keyframes catchup {
0% {left: 10%}
10% {left: 85%}
100% {left: 10%}
}
/* step through frames horizontally */ 
@keyframes balloon-tengah {  
0% {background-position: -12px -10px; } 
100% {background-position: -1950px -10px; } 
}
</style>

<div class="spongbob-position">
<div class="spongbob">
</div>
</div>

<div class='lampu'>
<div class='layer l3'>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
<div class='la'>
<div class='l'>
</div>
<div class='l'>
</div>
</div>
</div>
</div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#222;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #1919B3; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#222;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" title="Mari Belajar"><span style="color: #1919B3; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN</a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/belajarakbar/music/spongebob-M2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>

<header>
<h2>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv0I0I3qUP2B3oAG4FNRzGiAWxud5v3YonDPj9DzFY2uL-Xs5n4anKcfYQdXvYSdHw1TnvrLHb2_E0TyjLcnLminZTaTiwjVol5SpW3rGnmFns0Ee1KiSVez8UbsU3Imt0bvckXcfexSo/s1600/Mari-belajar-M2010.gif"target="_blank"title="Mari Belajar"><span style="color: #333; font-size: 16px;">ANIMASI</h2>
</a>  
</div>
</header>

<ul class="mys2010-list">
<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>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<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>

Code by. All Sources
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Animated Spongebob

Category: Animated Spongebob

Mys2010 on Codepen

Animated Spongebob

POPULAR

Blog Archive