08/02/16 | Mys2010 on Codepen

Memasang Kode Falling in Love
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 {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 50%, #B20000 0%, #12127D 100%);
}
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:-12px;
  width: 100%;
text-align: center;
font-size:  6px;
background: -moz-linear-gradient(top, #B20000 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
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%, #B20000 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:28px;
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
   background: #12127D;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}

 @import url(https://fonts.googleapis.com/css?family=Dancing+Script:400,700);
body {
 position: absolute;
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 font-family: 'Dancing Script', cursive;
}
html {
 background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.6));
 background-color: #E94E77;

 height: 100%;
 width: 100%;
 overflow: hidden;
 touch-action: none;
 content-zooming: none;
}
canvas {
 width: 100%;
 height: 100%;
 position: absolute;
 cursor: none;
  top:0;bottom;0;left:0;right:0;
}
#opening_screen {position:absolute;overflow:hidden;width:100%;height:100%;margin:0;z-index:500;background:rgba(245,11,229,0.15);cursor:pointer;}.-
.Absolute-Center {
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}
h3 {
 height: 60px;
 color: #fff;
 letter-spacing: 10px;
 line-height: normal;
 text-align: center;
 z-index: 300;
 padding-bottom: 10%;
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 font-size: 4em;
 font-size: 4.5vw;
 font-family: 'Dancing Script', cursive;
 text-shadow: 0px 3px 0px #b2a98f,  0px 14px 10px rgba(0,0,0,0.15),  0px 24px 2px rgba(0,0,0,0.1),  0px 34px 30px rgba(0,0,0,0.1);
}
.hidden {
 display: none
}
.animated {
 visibility: visible !important;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
 -webkit-animation-duration: 3s;
 animation-duration: 3s;
 -webkit-backface-visibility: visible !important;
 backface-visibility: visible !important;
}
/* PULL SOFT */
.pullSoftIn {
 -webkit-animation-name: pullSoftIn;
 animation-name: pullSoftIn;
}
@-webkit-keyframes pullSoftIn {
 from {
 -webkit-transform: scale(.9);
 opacity: 0;
}
}
@keyframes pullSoftIn {
 from {
 transform: scale(.9);
 opacity: 0;
}
}
.pullSoftOut {
 -webkit-animation-name: pullSoftOut;
 animation-name: pullSoftOut;
}
@-webkit-keyframes pullSoftOut {
 to {
 -webkit-transform: scale(.9);
 opacity: 0;
}
}
@keyframes pullSoftOut {
 to {
 transform: scale(.9);
 opacity: 0;
}
}
.pushSoftIn {
 -webkit-animation-name: pushSoftIn;
 animation-name: pushSoftIn;
}
@-webkit-keyframes pushSoftIn {
 from {
 -webkit-transform: scale(1.1);
 opacity: 0;
}
}
@keyframes pushSoftIn {
 from {
 transform: scale(1.1);
 opacity: 0;
}
}
.pushSoftOut {
 -webkit-animation-name: pushSoftOut;
 animation-name: pushSoftOut;
}
@-webkit-keyframes pushSoftOut {
 to {
 -webkit-transform: scale(1.1);
 opacity: 0;
}
}
@keyframes pushSoftOut {
 to {
 transform: scale(1.1);
 opacity: 0;
}
}
/* ====================================================================== *
     Animation 
 * ====================================================================== */

.spinning {
 -webkit-animation: spinaround 8s infinite linear;
 animation: spinaround 8s infinite linear;
}
 @-webkit-keyframes spinaround {
 to {
-webkit-transform:rotateY(360deg)
}
}
@keyframes spinaround {
 to {
transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
}
}
/* ROTATE EDGE IN */
.roEdgeUpIn {
 -webkit-animation-name: roEdgeUpIn;
 animation-name: roEdgeUpIn;
 -webkit-animation-duration: 5s;
 animation-duration: 5s;
 -webkit-animation-delay: 1s;
 animation-delay: 1s;
}
@-webkit-keyframes roEdgeUpIn {
 0% {
 opacity: 0;
 -webkit-transform-origin: 50% 0;
 -webkit-transform: perspective(1200px) rotateX(-90deg);
}
 100% {
 -webkit-transform-origin: 50% 0;
 -webkit-transform: perspective(1200px);
}
}
@keyframes roEdgeUpIn {
 0% {
 opacity: 0;
 transform-origin: 50% 0;
 transform: perspective(1200px) rotateX(-90deg);
}
 100% {
 transform-origin: 50% 0;
 transform: perspective(1200px);
}
}
.roEdgeUpOut {
 -webkit-animation-name: roEdgeUpOut;
 animation-name: roEdgeUpOut;
 -webkit-animation-duration: 5s;
 animation-duration: 3s;
}
@-webkit-keyframes roEdgeUpOut {
 0% {
 -webkit-transform-origin: 50% 0;
 -webkit-transform: perspective(1200px);
}
 100% {
 opacity: 0;
 -webkit-transform-origin: 50% 0;
 -webkit-transform: perspective(1200px) rotateX(-90deg);
}
}
@keyframes roEdgeUpOut {
 0% {
 transform-origin: 50% 0;
 transform: perspective(1200px);
}
 100% {
 opacity: 0;
 transform-origin: 50% 0;
 transform: perspective(1200px) rotateX(-90deg);
}
}
.roTwistUpOut {
 -webkit-animation-name: roTwistUpOut;
 animation-name: roTwistUpOut;
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
@-webkit-keyframes roTwistUpOut {
 0% {
 opacity: 1;
 -webkit-transform-origin: 50% 50% -800px;
 -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform-origin: 50% 50% -800px;
 -webkit-transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(1080deg) scale(0);
}
}
@keyframes roTwistUpOut {
 0% {
 opacity: 1;
 transform-origin: 50% 50% -800px;
 transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
}
 100% {
 opacity: 0;
 transform-origin: 50% 50% -800px;
 transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(1080deg) scale(0);
}
}
/* ROTATE TWIST IN */
.roTwistLeftIn {
 -webkit-animation-name: roTwistLeftIn;
 animation-name: roTwistLeftIn;
 -webkit-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
@-webkit-keyframes roTwistLeftIn {
 0% {
 opacity: 0;
 -webkit-transform-origin: 50% 50% -400px;
 -webkit-transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(1080deg) scale(0);
}
 100% {
 opacity: 1;
 -webkit-transform-origin: 50% 50% -400px;
 -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
}
}
@keyframes roTwistLeftIn {
 0% {
 opacity: 0;
 transform-origin: 50% 50% -400px;
 transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(1080deg) scale(0);
}
 100% {
 opacity: 1;
 transform-origin: 50% 50% -400px;
 transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
}
}
.roTwistRightIn {
 -webkit-animation-name: roTwistRightIn;
 animation-name: roTwistRightIn;
 -webkit-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
.fadeIn {
 -webkit-animation-name: fadeIn;
 animation-name: fadeIn;
 -webkit-animation-duration: 7s;
 animation-duration: 7s;
}
@-webkit-keyframes fadeIn {
 from {
opacity: 0;
}
}
@keyframes fadeIn {
 from {
opacity: 0;
}
}
.fadeOut {
 -webkit-animation-name: fadeOut;
 animation-name: fadeOut;
 -webkit-animation-duration: 7s;
 animation-duration: 7s;
}
@-webkit-keyframes fadeOut {
 to {
opacity: 0;
}
}
@keyframes fadeOut {
 to {
opacity: 0;
}
}
.player_container {position:absolute;top:5%;right:5%;font-weight:bold;text-align:center;letter-spacing:2px;z-index:500;}
p.track {
letter-spacing:2px;
font-weight:bold;
  color: #ffffff;
}
p.track span {
  color: #999999;
}
.container {margin:50px;}
button {
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: all 0.2s ease 0;
  transition: all 0.2s ease 0;
}
button[data-am-button^="large"] {
  width: 60px;
  height: 60px;
  margin: 0 5px;
}
button[data-am-button^="large"] i {
  font-size: 25px;
}
button[data-am-button^="small"] {
  width: 40px;
  height: 40px;
}
button[data-am-button^="small"] i {
  font-size: 14px;
}
button:hover {
  color: #999999;
  border-color: #999999;
}
button:focus {
  outline: none;
}
#progress-bar {
  width: 100%;
  background-color: #c20315;
  height: 5px;
  position: relative;
  margin: 1em 0;
}
#progress-bar #progress {
  background-color: blue;
  height: 5px;
  position: absolute;
  left: 0;
  -webkit-transition: width 2.5s linear 0;
  transition: width 2.5s linear 0;
}
/* ===================================================*
    
     ."".    ."",       
     |  |   /  /
     |  |  /  /
     |  | /  /
     |  |/  ;-._ 
     }  ` _/  / ;
     |  /` ) /  /             PEACE and LOVE
     | /  /_/\_/\
     |/  /      |           Mark in New Orleans
     (  ' \ '-  |
      \    `.  /           Background by. M-2010
       |      |
       |      |

 
 
/* ===================================================*
    </style>

<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" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
 <audio id="player" preload="auto">
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/elvispresleyfallinginlove).mp3">
  </source></h2>
</a></div>
</div>

<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/08/falling-in-love.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<div id="opening_screen" class="animated">
<h3 class="spinning">YOUR TEXT</h3>
</div>

<!-- Lyrics -->
<section id="peace">   
  <!-- FIRST VERSE -->  
  <h3 id="wisemensay" class="lyrics animated hidden">Wise men say</h3>
  <h3 id="onlyfools1" class="lyrics animated hidden">Only fools rush in</h3>
  <h3 id="canthelp1" class="lyrics animated hidden">But I can't help </h3>
  <h3 id="fallinginlove1" class="lyrics animated hidden">Falling in love</h3>
  <h3 id="withyou1" class="lyrics animated hidden">With you</h2>
  <h3 id="shallistay" class="lyrics animated hidden">Shall I stay</h3>
  <h3 id="beasin" class="lyrics animated hidden">Would it be a sin</h3>
  <h3 id="ificanthelp" class="lyrics animated hidden">If I can't help</h3>
  <h3 id="fallinginlove2" class="lyrics animated hidden">Falling in love</h3>
  <h3 id="withyou2" class="lyrics animated hidden">With you</h3>  
  <!-- SECOND VERSE -->
  
  <h3 id="likeariver1" class="lyrics animated hidden">Like a river flows</h3>
  <h3 id="tothesea1" class="lyrics animated hidden">Surely to the sea</h3>
  <h3 id="darlingitgoes1" class="lyrics animated hidden">Darling so it goes</h3>
  <h3 id="somethings1" class="lyrics animated hidden">Some things</h2>
  <h3 id="meanttobe1" class="lyrics animated hidden">Are meant to be</h3>
  <h3 id="takemyhand1" class="lyrics animated hidden">Take my hand</h3>
  <h3 id="wholelife1" class="lyrics animated hidden">Take my whole life too</h3>
  <h3 id="foricanthelp1" class="lyrics animated hidden">For I can't help </h3>
  <h3 id="fallinginlove3" class="lyrics animated hidden">Falling in love </h3>
  <h3 id="withyou3" class="lyrics animated hidden">With you</h3>
  
  <!-- THIRD VERSE -->  
  <h3 id="likeariver2" class="lyrics animated hidden">Like a river flows</h3>
  <h3 id="tothesea2" class="lyrics animated hidden">Surely to the sea</h3>
  <h3 id="darlingitgoes2" class="lyrics animated hidden">Darling so it goes</h3>
  <h3 id="somethings2" class="lyrics animated hidden">Some things</h3>
  <h3 id="meanttobe2" class="lyrics animated hidden">Are meant to be</h3>
  <h3 id="takemyhand2" class="lyrics animated hidden">Take my hand</h3>
  <h3 id="wholelife2" class="lyrics animated hidden">Take my whole life too</h3>
  <h3 id="foricanthelp2" class="lyrics animated hidden">For I can't help </h3>
  <h3 id="fallinginlove4" class="lyrics animated hidden">Falling in love </h3>
  <h3 id="withyou4" class="lyrics animated hidden">With you</h2>
  <h3 id="foricanthelp3" class="lyrics animated hidden">For I can't help </h3>
  <h3 id="fallinginlove5" class="lyrics animated hidden">Falling in love </h3>
  <h3 id="withyou5" class="lyrics animated hidden">With you</h2>
  <h3 id="bemine" class="lyrics animated hidden">Happy Valentines Day</h3>
</section>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js">
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<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>
//  BEGIN CANVAS HEARTS  --- Animated hearts inspired and  forked from Gerard Ferrandez -  http://codepen.io/ge1doot/pen/OypQdy
// I simply changed the background color and graphic to a heart.   Gerard is amazing.
var myPen = {};
(function() {
 'use strict';
 // main loop
 this.run = function() {
  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  this.ctx.drawImage(this.img, this.pointer.x - 100, this.pointer.y - 100, 200, 200);
  for (var i = 0; i < this.N; i++) {
   this.particles[i].run();}}
 // particles class
 var Particle = function(pen, size) {
  this.pX = (pen.canvas.width * 0.5) + (Math.random() * 200) - 100;
  this.pY = -size - Math.random() * 200;
  this.vX = 0;
  this.vY = Math.random();
  this.size = size;
  this.img = pen.img;
  this.pointer = pen.pointer;
  this.canvas = pen.canvas;
  this.ctx = pen.ctx;}
 Particle.prototype.run = function() {
  this.pY += this.vY;
  this.pX += this.vX;
  this.vY += 0.1;
  if (this.pY > this.canvas.height) {
   this.pY = -this.size;
   this.pX = (this.canvas.width * 0.5) + (Math.random() * 200) - 100;
   this.vY = 0;
   this.vX = 0;}
  var dx = this.pX - this.pointer.x,
   dy = this.pY - this.pointer.y,
   r = (100 + this.size * 0.5),
   d = dx * dx + dy * dy;
  if (d < r * r) {
   d = Math.sqrt(d);
   dx /= d;
   dy /= d;
   d = (r - d) * 1.1;
   dx *= d;
   dy *= d;
   this.pX += dx;
   this.pY += dy;
   this.vX = 0.5 * dx + ((this.pX >= this.pointer.x) ? 2 : -2);
   this.vY = 0.5 * dy;}
  this.ctx.drawImage(this.img, this.pX - this.size * 0.5, this.pY - this.size * 0.5, this.size, this.size);}
 // canvas
 this.canvas = {
  elem: document.createElement('canvas'),
  resize: function() {
   this.width = this.elem.width = this.elem.offsetWidth;
   this.height = this.elem.height = this.elem.offsetHeight;},
  init: function() {
   var ctx = this.elem.getContext('2d');
   document.body.appendChild(this.elem);
   window.addEventListener('resize', this.resize.bind(this), false);
   this.resize();
   return ctx;}};
 this.ctx = this.canvas.init();
 // pointer
 this.pointer = (function(canvas) {
  var pointer = {
   x: canvas.width / 2,
   y: canvas.height / 2,
   pointer: function(e) {
    var touchMode = e.targetTouches,
     pointer;
    if (touchMode) {
     e.preventDefault();
     pointer = touchMode[0];
    } else pointer = e;
    this.x = pointer.clientX;
    this.y = pointer.clientY;},};
  window.addEventListener('mousemove', function(e) {
   this.pointer(e);
  }.bind(pointer), false);
  canvas.elem.addEventListener('touchmove', function(e) {
   this.pointer(e);
  }.bind(pointer), false);
  return pointer;
 }(this.canvas));
 // init
 this.particles = [];
 this.N = 800;
 this.img = new Image();
 this.img.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/heart_codepen.png';
 for (var i = 0; i < this.N; i++) {
  this.particles[i] = new Particle(this, 35);}
 // request animation loop
 var myPen = this;
 (function run() {
  requestAnimationFrame(run);
  myPen.run();})();
}).apply(myPen);
// END CANVAS HEARTS
// BEGIN AUDIOO PLAYER
$(function() {
 var audio = $("audio")[0];
 $('#opening_screen').on('click', function() {
  $('#opening_screen').addClass('roEdgeUpOut');
  $('.player_container').toggleClass('hidden roEdgeUpIn');
  //Play/pause the track
  if (audio.paused == false) {
   audio.pause();
   $('#btn-play-pause').children('i').removeClass('fa-pause');
   $('#btn-play-pause').children('i').addClass('fa-play');
  } else {
   audio.play();
   $('#btn-play-pause').children('i').removeClass('fa-play');
   $('#btn-play-pause').children('i').addClass('fa-pause');}});
 $('#btn-play-pause').on('click', function() {
  //Play/pause the track
  if (audio.paused == false) {
   audio.pause();
   $(this).children('i').removeClass('fa-pause');
   $(this).children('i').addClass('fa-play');
  } else {
   audio.play();
   $(this).children('i').removeClass('fa-play');
   $(this).children('i').addClass('fa-pause');}});
 $('#btn-stop').on('click', function() {
  //Stop the track
  audio.pause();
  audio.currentTime = 0;
  $('#btn-play-pause').children('i').removeClass('fa-pause');
  $('#btn-play-pause').children('i').addClass('fa-play'); });
 $('#btn-mute').on('click', function() {
  //Mutes/unmutes the sound
  if (audio.volume != 0) {
   audio.volume = 0;
   $(this).children('i').removeClass('fa-volume-off');
   $(this).children('i').addClass('fa-volume-up');
  } else {
   audio.volume = 1;
   $(this).children('i').removeClass('fa-volume-up');
   $(this).children('i').addClass('fa-volume-off');}});
 function updateProgress() {
  //Updates the progress bar
  var progress = document.getElementById("progress");
  var value = 0;
  if (audio.currentTime > 0) {
   value = Math.floor((100 / audio.duration) * audio.currentTime);}
  progress.style.width = value + "%";}
 //Progress Bar event listener
 audio.addEventListener("timeupdate", updateProgress, false);});
// END AUDIOO PLAYER
// BEGIN AUDIO SYNCHING
// Using jQuery to add event listener to the audio element and toggle classes based on the current time in seconds.   If anyone knows a way to change the default timing in Adobe to display seconds and/or mili-seconds, please let me know.  It's simple math, but cuttinng and pasting time markers would  be so easy.
var audioElement = document.getElementById('player');
var lastTime = 0;
audioElement.addEventListener('timeupdate', function(e) {
 var nowTime = this.currentTime;
 //Check if just passed the 1.4 second time mark.
 if (nowTime > 1 && lastTime < 5){
  $("#peace h2").siblings().addClass('hidden').removeClass('pushSoftOut');
  $("#heart").addClass('hidden').removeClass('pushSoftIn');}
 // Wise Mwn Say
 if (nowTime > 7.5 && lastTime < 7.5) {
  $('#wisemensay').toggleClass('pushSoftIn hidden');}
 // Only fools rush in
 if (nowTime > 14 && lastTime < 14) {
  $('#onlyfools1').toggleClass('pushSoftIn hidden');
  $('#wisemensay').toggleClass('pushSoftIn pushSoftOut');}
 // But I can't help
 if (nowTime > 21 && lastTime < 21) {
  $('#canthelp1').toggleClass('pushSoftIn hidden');
  $('#onlyfools1').toggleClass('pushSoftIn pushSoftOut');}
 // Falling in love
 if (nowTime > 27 && lastTime < 27) {
  $('#fallinginlove1').toggleClass('pushSoftIn hidden');
  $('#canthelp1').toggleClass('pushSoftIn pushSoftOut');}
 // With you
 if (nowTime > 30 && lastTime < 30) {
  $('#withyou1').toggleClass('pushSoftIn hidden');
  $('#fallinginlove1').toggleClass('pushSoftIn pushSoftOut');}
 // Shall I Stay
 if (nowTime > 37 && lastTime < 37) {
  $('#shallistay').toggleClass('pushSoftIn hidden');
  $('#withyou1').toggleClass('pushSoftIn pushSoftOut');}
 // Would it be a sin
 if (nowTime > 43 && lastTime < 43) {
  $('#beasin').toggleClass('pushSoftIn hidden');
  $('#shallistay').toggleClass('pushSoftIn pushSoftOut');}
 // If I can't help
 if (nowTime > 50 && lastTime < 50) {
  $('#ificanthelp').toggleClass('pushSoftIn hidden');
  $('#beasin').toggleClass('pushSoftIn pushSoftOut');}
 //  Falling in Love - 2
 if (nowTime > 56 && lastTime < 56) {
  $('#fallinginlove2').toggleClass('pushSoftIn hidden');
  $('#ificanthelp').toggleClass('pushSoftIn pushSoftOut');}
 // With You - 2
 if (nowTime > 59 && lastTime < 59) {
  $('#withyou2').toggleClass('pushSoftIn hidden');
  $('#fallinginlove2').toggleClass('pushSoftIn pushSoftOut');}
 // Like a river flows
 if (nowTime > 65 && lastTime < 65) {
  $('#likeariver1').toggleClass('pushSoftIn hidden');
  $('#withyou2').toggleClass('pushSoftIn pushSoftOut');}
 // Surely to the sea
 if (nowTime > 69 && lastTime < 69) {
  $('#tothesea1').toggleClass('pushSoftIn hidden');
  $('#likeariver1').toggleClass('pushSoftIn pushSoftOut');}
 // Darling so it goes
 if (nowTime > 72 && lastTime < 72) {
  $('#darlingitgoes1').toggleClass('pushSoftIn hidden');
  $('#tothesea1').toggleClass('pushSoftIn pushSoftOut');}
 // Some things
 if (nowTime > 75 && lastTime < 75) {
  $('#somethings1').toggleClass('pushSoftIn hidden');
  $('#darlingitgoes1').toggleClass('pushSoftIn pushSoftOut');}
 // Are meant to be
 if (nowTime > 78.5 && lastTime < 78.5) {
  $('#meanttobe1').toggleClass('pushSoftIn hidden');
  $('#somethings1').toggleClass('pushSoftIn pushSoftOut');}
 // Take my hand
 if (nowTime > 83 && lastTime < 83) {
  $('#takemyhand1').toggleClass('pushSoftIn hidden');
  $('#meanttobe1').toggleClass('pushSoftIn pushSoftOut');}
 // Take my whole life too
 if (nowTime > 89 && lastTime < 89) {
  $('#wholelife1').toggleClass('pushSoftIn hidden');
  $('#takemyhand1').toggleClass('pushSoftIn pushSoftOut');}
 // For I can't help
 if (nowTime > 96.5 && lastTime < 96.5) {
  $('#foricanthelp1').toggleClass('pushSoftIn hidden');
  $('#wholelife1').toggleClass('pushSoftIn pushSoftOut');}
 // Falling in love
 if (nowTime > 102 && lastTime < 102) {
  $('#fallinginlove3').toggleClass('pushSoftIn hidden');
  $('#foricanthelp1').toggleClass('pushSoftIn pushSoftOut');}
 // With you - 3
 if (nowTime > 105 && lastTime < 105) {
  $('#withyou3').toggleClass('pushSoftIn hidden');
  $('#fallinginlove3').toggleClass('pushSoftIn pushSoftOut');}
 // THIRD VERSE   Like a rivere flows
 if (nowTime > 112 && lastTime < 112) {
  $('#likeariver2').toggleClass('pushSoftIn hidden');
  $('#withyou3').toggleClass('pushSoftIn pushSoftOut');}
 // Surely to the sea
 if (nowTime > 115 && lastTime < 115) {
  $('#tothesea2').toggleClass('pushSoftIn hidden');
  $('#likeariver2').toggleClass('pushSoftIn pushSoftOut');}
 // Darling so it goes
 if (nowTime > 118.5 && lastTime < 118.5) {
  $('#darlingitgoes2').toggleClass('pushSoftIn hidden');
  $('#tothesea2').toggleClass('pushSoftIn pushSoftOut');}
 // Some things
 if (nowTime > 122 && lastTime < 122) {
  $('#somethings2').toggleClass('pushSoftIn hidden');
  $('#darlingitgoes2').toggleClass('pushSoftIn pushSoftOut');}
 // Are meant to be
 if (nowTime > 125.5 && lastTime < 125.5) {
  $('#meanttobe2').toggleClass('pushSoftIn hidden');
  $('#somethings2').toggleClass('pushSoftIn pushSoftOut');}
 // Take my hand
 if (nowTime > 129 && lastTime < 129) {
  $('#takemyhand2').toggleClass('pushSoftIn hidden');
  $('#meanttobe2').toggleClass('pushSoftIn pushSoftOut'); }
 // Take my whole life too
 if (nowTime > 135 && lastTime < 135) {
  $('#wholelife2').toggleClass('pushSoftIn hidden');
  $('#takemyhand2').toggleClass('pushSoftIn pushSoftOut');}
 // For I can't help
 if (nowTime > 143 && lastTime < 143) {
  $('#foricanthelp2').toggleClass('pushSoftIn hidden');
  $('#wholelife2').toggleClass('pushSoftIn pushSoftOut');}
 // Falling in love
 if (nowTime > 147.5 && lastTime < 147.5) {
  $('#fallinginlove4').toggleClass('pushSoftIn hidden');
  $('#foricanthelp2').toggleClass('pushSoftIn pushSoftOut');}
 // With you - 3
 if (nowTime > 152 && lastTime < 152) {
  $('#withyou4').toggleClass('pushSoftIn hidden');
  $('#fallinginlove4').toggleClass('pushSoftIn pushSoftOut');}
 // For I can't help
 if (nowTime > 156 && lastTime < 156) {
  $('#foricanthelp3').toggleClass('pushSoftIn hidden');
  $('#withyou4').toggleClass('pushSoftIn pushSoftOut');}
 // Falling in love
 if (nowTime > 163 && lastTime < 163) {
  $('#fallinginlove5').toggleClass('pushSoftIn hidden');
  $('#foricanthelp3').toggleClass('pushSoftIn pushSoftOut');}
 // With you - 3
 if (nowTime > 166 && lastTime < 166) {
  $('#withyou5').toggleClass('pushSoftIn hidden');
  $('#fallinginlove5').toggleClass('pushSoftIn pushSoftOut');}
 // With you - 3
 if (nowTime > 175 && lastTime < 175) {
  $('#withyou5').toggleClass('pushSoftIn pushSoftOut');}
 if (nowTime > 180 && lastTime < 180) {
  $('#bemine').toggleClass('roEdgeUpIn hidden');}
 lastTime = nowTime;});       
    </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>

Audio Code by. Jereme Causing
Falling in Love Code by. Mark Sottek

Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Falling in Love

Category: Falling in Love

Mys2010 on Codepen

Falling in Love

POPULAR

Blog Archive