06/29/16 | Mys2010 on Codepen

Memasang Kode Parallax-animated-air-balloon
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:  0px 0;
  position: fixed;
  top:-37px;
  width: 100%;
height:80px;
text-align: center;
font-size: 6px;
background: linear-gradient(270deg,#AA80FE,#660099, #809FFE, #B0E0E6, #809FFE,#660099, #AA80FE);
  border-bottom: 3px solid #24006B;  
-webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height:80px;
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 #222;
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, #000 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #000 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah #shadow;}
 .text-bawah {
  
}
.M2010-textshadow {  
   margin: 0 auto;
  text-align: center;
  color: #00248E;
  text-shadow: #00248E 10px 0px 30px, #00248E -10px 0px 30px, #00248E 0px 10px 30px, #00248E 10px 0px 30px, #00248E -10px 0px 30px, #00248E 0px 10px 30px,#00248E 0px -10px 30px;
  color: #eee;
  background:#eee;
  mix-blend-mode: screen;
}
#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:40px;
 -webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow {
  0% {
    text-shadow: 0 0 2px  #B0E0E6 , 
0 0 8px  #B0E0E6  , 0 0 10px  #B0E0E6 , 
0 0 20px  #B0E0E6 , 0 0 30px  #B0E0E6 , 
0 0 40px  #B0E0E6, 0 0 50px  #B0E0E6 , 
0 0 80px  #B0E0E6;
  }
  50% {
      text-shadow: 0 12px 7px #809FFE,
 0 5px 15px #809FFE, 0 0 50px #809FFE,
 0 -10px 2px #809FFE;
  }
 100% {
    text-shadow: 0 0 2px     #800080  , 
0 0 8px     #800080  , 0 0 10px     #800080  , 
0 0 20px     #800080  , 0 0 30px     #800080  , 
0 0 40px     #800080  , 0 0 50px     #800080  , 
0 0 80px     #800080  ;
  } 
}
/*end*/ 
 
.Liplop {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight: bold;
color: #000;
margin-top:-3px;
} 
.Liplop {
  -webkit-animation: fade-in 0.2s linear infinite alternate;
  -moz-animation: fade-in 0.2s linear infinite alternate;
  animation: fade-in 0.2s linear infinite alternate;
}
@-moz-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*end*/
 
M2010-text-bawah-shadow;}
 .text-bawah {
  position: absolute;
  right: 410px;
  bottom: -310px;  
font-size: 50px;
font-family: agency fb, sans-serif;
  text-transform: uppercase;
}
.text-bawah1 {
  position: absolute;
  left: 90px;
  bottom: 189px;
  text-align: left;
  text-transform: uppercase;}
.text-bawah2 {
  position: absolute;
  right: 90px;
  bottom: 189px;
  text-align: right;
  text-transform: uppercase;
}
.M2010-textshadow {  
margin: 0 auto;
text-align: center;
color: #FFF8DC;
text-shadow: #dad 10px 0px 30px, #033FFF -10px 0px 30px, #dad 0px 10px 30px, #dad 0px -10px 30px;
color: #eee;
background:#eee;
mix-blend-mode: screen;
}
/*end*/  
.moon {
  position: absolute;
   right: 100px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #eef;
  box-shadow: 0px 0px 38px 19px #bbd;
  opacity: 1;
  animation: moon 22s ease;
  animation-fill-mode: forwards;
  z-index: 4;
}

@keyframes moon {
  0% {
    transform: scale(2);
    top: 500px;
    box-shadow: 0px 0px 68px 19px #bbd;
  }
  100% {
    transform: scale(1);
    top: 290px;
    box-shadow: 0px 0px 38px 9px #bbd;
  }
}
/*end*/
html, body {
  margin-top: -50px;
  height: 80%
}
.parallax-sky {
  height: 880px;
  background: #007fd5;
  position: relative;
  overflow: hidden;
  -webkit-animation: parallax-sky_background 50s ease-out infinite;
  -moz-animation: parallax-sky_background 50s ease-out infinite;
  -o-animation: parallax-sky_background 50s ease-out infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}

@-webkit-keyframes parallax-sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}

@-moz-keyframes parallax-sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}

/*end*/
.balloontengah  {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrxKMQvRm0Zm6ZaoHSFSVQUqd0uCc_kbbnSmDh0EGFvGxrEE2DcmPkNfY3zFqa7Yx602qu3Hm-4i0kpG5yq1-EV_H1qMQMzmS8ebzZCR6krg3U16tQtpevyVQ6-pIBnrlcRNPZOa9FAV0/s1600/animated-ballon-M2010.gif);background-repeat:no-repeat;
  width: 328px;  height:310px; 
  position:absolute;
  left:35%;top:70%;  -webkit-transform: translate(-50%,-50%);  transform: translate(-50%,-50%);
}
.balloontengah-position {
animation: catchup  80s ease-in-out infinite;  
position: absolute;
bottom: 200px;
left: 50%;
margin-left: -10px;
}
 
@keyframes catchup {
0% {left: 10%}
10% {left: 85%}
100% {left: 10%}
}

@keyframes balloon-tengah {  
0% {background-position: -12px -10px; } 
100% {background-position: -1950px -10px; } 
}
/*end*/  
body div#balloon_holder {
 position: absolute;
 left: -30%;
 bottom: 60px;
 z-index: 6;

 -webkit-animation: M-2010_balloon 240s linear infinite;
 -moz-animation: M-2010_balloon 240s linear infinite;
 -ms-animation: M-2010_balloon 240s linear infinite;
 -o-animation: M-2010_balloon 240s linear infinite;
 animation: M-2010_balloon 240s linear infinite;
}
@-moz-keyframes M-2010_balloon {
 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;
 }
}
/*end*/ 
 html, body {
  margin-top: -140px;
  height: 98%
}
.animated {
  width: 100%;
  min-height: 700px;
  position: relative;
  top: 0;
  left: 0;
  background-color: #222; 
}

.pagar-1 {
   -webkit-animation: parallax_bg linear  0s infinite both;
           animation: parallax_bg linear  0s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUJDeuykhgugpIdq-XgiXmHQdQ3Z8Oyr7B_32KZMfuvGW_Km0ecJrkji04OWn7TNJ2GFz_X-zncR51G6L7jhkkdlE0vaHiHdCsgtPTzfZBukmGbE2oWiYuGVALg95WGuIPsTsH-B4CK8u/s1600/Pagar-M2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
   bottom:31px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 235px; 
}

.bg-1 {
   -webkit-animation: parallax_bg linear 0s infinite both;
           animation: parallax_bg linear 0s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8PN9HQB0F7u32jAhwWmj2GqGdffq9rIpwtRdq3Nm_sWFc4tVuN808eLiXBCaq-bS4E2CtFvrtVUu5Uzh9gdzk7hEb5eCS1lLvyiybAl_6scjQWc7TepeOXzYck4E05WsVOn_benfw5l4/s1600/kembang-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-67px;
  left: 0;
  width: 100%;
  height: 90%;
  background-size: auto  390px; 
}
.bg-2 {
  -webkit-animation: parallax_bg linear 0s infinite both;
          animation: parallax_bg linear 0s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwiVOpWMUoc0FFewRlX4_d9LzjJFq37pxD5KDv63Cjo9ssmklon4CY827gTI0_SigEUvO0NffZa96OagUeEjIEwQf45SXYUlTZFqK3pi4uuSgfpzLcEJrhPLLWgKtpP7_VwHaeErE13KE/s1600/palm-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-67px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 300px;
}
.bg-3 {
  -webkit-animation: parallax_bg linear 55s infinite both;
          animation: parallax_bg linear 55s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8PN9HQB0F7u32jAhwWmj2GqGdffq9rIpwtRdq3Nm_sWFc4tVuN808eLiXBCaq-bS4E2CtFvrtVUu5Uzh9gdzk7hEb5eCS1lLvyiybAl_6scjQWc7TepeOXzYck4E05WsVOn_benfw5l4/s1600/kembang-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-67px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 258px;
}
.bg-4 {
  -webkit-animation: parallax_bg linear 75s infinite both;
          animation: parallax_bg linear 75s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8PN9HQB0F7u32jAhwWmj2GqGdffq9rIpwtRdq3Nm_sWFc4tVuN808eLiXBCaq-bS4E2CtFvrtVUu5Uzh9gdzk7hEb5eCS1lLvyiybAl_6scjQWc7TepeOXzYck4E05WsVOn_benfw5l4/s1600/kembang-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-67px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 268px;
}
.bg-5 {
  -webkit-animation: parallax_bg linear -95s infinite both;
          animation: parallax_bg linear -95s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGaeQr31AF25UaxtZqyLYT9PF6ymdD8FupBg7aPptZ7zYCkqdR2fsjooAnf00NHjjdI61pVq2vp-ynwgK8wuZPwviYtgKWfJjxdHNxo1PsMOo-pxE7AMQO7t1FpTBLNTctteC71TIZ3Fo/s1600/gedung-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-88px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 591px;
}
.bg-6 {
  -webkit-animation: parallax_bg linear -30s infinite both;
          animation: parallax_bg linear -30s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoZSy69tR1AYlyChHKItKiKHE21evJTdzta0At77R4mgp9vmSyBiuyL-hJNGs4dYdvf2RSnE_3W_v8TsrZ0gyK5pPTHFSC2jzyyjOZUOZTpZvYYlh-b_ThqK9futv1pMRQ4g_kaQ3YaRc/s1600/pohon-tiang-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:91px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 245px;
}
.bg-7 {
  -webkit-animation: parallax_bg linear 0s infinite both;
          animation: parallax_bg linear 0s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjavBdAzF5Dy-BDs3DWQVDIGj6GHrZMyMYk4r7Kj-zykC3L6LzzkTMqUTIu1SFHAc1VLDgdzkO2IkkhoQIuxL3z4Mg8nBnT3PAjIk1Xh3J8c48dzOR4MGfF8bv4eMAjJP73mQ9CJqYBH-E/s1600/Cemara-3-Mys2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:91px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto  198px;
}
@-webkit-keyframes parallax_bg {
  0% {
    background-position: 2765px 100%;
  }
  100% {
    background-position: 550px 100%;
  }
}
@keyframes parallax_bg {
  0% {
    background-position: 2765px 100%;
  }
  100% {
    background-position: 550px 100%;
  }
}
/*end*/
.balloon-1 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimCkg_W6-eKQ4MMYfjNCvi5SMUvspYUMrcgkVWscgdDyA-W-zspNoxsInWJpjf_oQJM6EZR-lzRwhyphenhyphen6z-5J-ghEIVmP-tyYr349e8Ip8DFV3UHgoXObSk76eA5EVvy3KDD3ADfOlAXbIw/s1600/Air-balloon-green-M2010.png) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 300px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 75px;
}
.balloon-2 {
  background: url(https://sites.google.com/site/usesitesto/file-code/ballon-blue-white-mys2010.png) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 450px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 35px;
}
.balloon-2a {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEzY-iDxPy92oKT9RK3Zsygv8bhKrSclqUAsMYKxhImbdRmjq_MNiQq771mVlMTRDpthsKmN8dAsmzJq5ErxvOMru47lmKs1bWt_w-_UaUh1-X2l2W7qrpJtrLPmc1gu8PHBjK9Q7JUAo/s1600/White-air-balloon-M2010.png) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 350px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 55px;
}
.balloon-3 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhlkRs_nCHerVBakvH64efjuUUYrXrb4bEpki5B4JjOb_OwQq9nSg5muw9kPV9W3rS8lTs6CfzXdKmhhz19H8q4nLmjV8aLqIQcuGOlLJcUiJJ_33sUmoyDQPQ1Tc3-Y2kDgO1KK22n0M/s1600/balloon4-m2010.png) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 170px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 75px;
}
.balloon-4 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsUmWVJNWGMkSb9GS4XzKxNJrWmBaj9Xjmgm3GCiHZfl2k-ay6nSPDBkTgD8741HqKDykqQCNewtJ3EM4NbadDYlQclKISC19SMKeHYR_WHg3E3SzKM0eSp9inEb-aQMCch09Zc0yZMJE/s1600/balloon-merah-m2010.png) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 170px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 75px;
}
.balloon-5 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsUmWVJNWGMkSb9GS4XzKxNJrWmBaj9Xjmgm3GCiHZfl2k-ay6nSPDBkTgD8741HqKDykqQCNewtJ3EM4NbadDYlQclKISC19SMKeHYR_WHg3E3SzKM0eSp9inEb-aQMCch09Zc0yZMJE/s1600/balloon-merah-m2010.png) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 400px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 55px;
}
.balloon-1 {
  -webkit-animation: parallax_balloon linear 150s infinite both;
          animation: parallax_balloon linear 150s infinite both;
}
.balloon-2 {
  -webkit-animation: parallax_balloon linear 115s infinite both;
          animation: parallax_balloon linear 115s infinite both;
}
.balloon-2a {
  -webkit-animation: parallax_balloon linear 100s infinite both;
          animation: parallax_balloon linear 100s infinite both;
}
.balloon-3 {
  -webkit-animation: parallax_balloon linear 35s infinite both;
          animation: parallax_balloon linear 35s infinite both;
}
.balloon-4 {
  -webkit-animation: parallax_balloon linear 75s infinite both;
          animation: parallax_balloon linear 75s infinite both;
}
.balloon-5 {
  -webkit-animation: parallax_balloon linear 55s infinite both;
          animation: parallax_balloon linear 55s infinite both;
}
@-webkit-keyframes parallax_balloon {
  0% {
    background-position: -300px 100%;
  }
  100% {
    background-position: 2000px 100%;
  }
}
@keyframes parallax_balloon {
  0% {
    background-position: -300px 100%;
  }
  100% {
    background-position: 2000px 100%;
  }
} 
</style>

<div class="animated">
<div class="parallax bg-6">
<div class="moon">
</div>
</div>
<div class="parallax balloon-5">
</div>
<div class="parallax balloon-4">
</div>
<div class="parallax bg-5">
</div>
<div class="parallax balloon-1">
</div>
<div class="parallax balloon-2">
</div>
<div class="parallax balloon-2a">
</div>
<div class="parallax balloon-3">
</div>
<div class="parallax bg-3">
</div>
<div class="parallax bg-7">
</div>
<div class="parallax bg-2">
</div>
<div class="parallax bg-4">
</div>
<div class="parallax-sky">
</div>
<div class="parallax bg-1">
</div>
<div class="parallax pagar-1">
</div>
<div class="balloontengah-position">
<div class="balloontengah">
<div id="balloon_holder">
<div id="balloon_go">
<div id="balloon_back">
</div>

<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTxZOWmkFKyvNbM2A4Qo5k9XByEnN0cVSAHEUB1oevSl36ffFpVC7GVNDq27gHV_t2FMhpnm_h7ULTDdm59Lw5h2Eju-akQQiw7HQvwJqP7Gblcz79ZsbmnSC1CgBGofAudDoHbWLUFtc/s1600/air-balloon-m2010.png"name="e902" border="0" width="90" height="100" /></a>
<div id="balloon_go">
<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPRjz8XkOhbBwV-5s7cN3pF27voRDzDmZuZvIpGhtk_g0tlcctQeuxUQ6AVnKyyHRPGHVg_f0KY7z8ITK8G1wi9GLqhd75fNhp1TSoojAnpSSoFc0dmsiP62KJhUXyG6xqwRM_FV-QT5M/s1600/Cibeber-Cimahi-M2010.png"name="e902" border="0" width=" 30" height=" 30" /></a>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010/pen/vKxvmd" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2017 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<div align="center" style="margin-top:5px">
<audio id="mys2010" src="https://sites.google.com/site/usesitesto/file/Die-Twinnies-%26-Junger-Egger-Dreigesang-Mys200.mp3"controls="controls"></audio></h2>
</a></div>

<header>
<a href="http://Link Title" target="_blank" title="Mari Belajar">
<h2>
<span style="color:#f00; font-size:11pt">
<div class="Liplop">
Myscript2010</div>
</a>
</h2>
</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>  
<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>

Animated code by. All Sources
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Animated air balloon

Category: Parallax animated air balloon

Mys2010 on Codepen

Parallax animated air balloon

POPULAR

Blog Archive