Mys2010 on Codepen

HomeAll Tutorials

Text Laser with Audio

Memasang Kode Text Laser with audio
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.

<style class="Mys2010-styles">
body {font-family:"vivaldi";font-size: 1px;left: 130px;color: #000;margin-top:19px;height:100%;overflow:hidden;}
body {
background:#000;} 
body {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em white;
} 
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:-4px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,  #333, #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60));
  border-bottom: 3px solid #333;  
-webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-5px;
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: linear-gradient(270deg,  rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099,  rgba(255, 0, 0, 0.60));
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s ease-in-out infinite;
}

M-2010, #teks, #posisi, #dibawah, span {
  font: 900 15vw Raleway;
  position: relative;
  display: inline-block;
}
#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;
 -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 rgba(255, 0, 0, 0.8),
 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
 0 -10px 2px rgba(255, 0, 0, 0.8);
  }
 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*/ 
.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 200px #111;  
  
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 20px rgba(255, 0, 0, 0.90);    
}
#M2010-shadow  { 
margin:-110px;
box-shadow: 0 0 150px 25px  #Ff0;  
}
.shadow1:before,.shadow1:after {
    z-index:-1;
    position:absolute;
    content: " ";
    bottom:25px;
    left:10px;
    width:50%;     
    max-width:110px;
    box-shadow: 0 0 200px 90px rgba(255, 0, 0, 0.90);  
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);
}
.shadow1:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left:auto;
}

.b-nav, body:after {
  position: absolute;
  right: 0;
}
.b-brand, .b-link {
  font-size: 18px;
  font-weight: 700;
  margin-left: 0;
  text-decoration: none;
  font-family: "Roboto Slab", serif;
  text-transform: uppercase;
  ;
}
@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(345px, 0, 0);
    transform: translate3d(345px, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
@keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(345px, 0, 0);
    transform: translate3d(345px, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
* {
  box-sizing: border-box
}
body:after {
  background: #000;
  content: '';
  height: 100%;
  left: 0;
  opacity: 0;
  padding: 0;
  top: 0;
  visibility: hidden;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
  width: 100%;
}
body.open:after {
  z-index: 10;
  opacity: 0.65;
  height: 100000%;
  visibility: visible
}
.b-nav {
  background: #000 none repeat scroll 0 0;
  position: absolute;
  top: 0;
  width: 320px;
  z-index: 12;
}
.b-nav:not(.open) {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav {
  animation-duration: .4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft
}
.b-nav ul {
  padding-left: 0px;
}
.b-nav li {
  color: #fff;
  list-style-type: none;
  padding: 10px 10px 10px 0;
  text-align: left;
  -webkit-transform: translateX(345px);
  -ms-transform: translateX(345px);
  transform: translateX(345px)
}
.b-nav li:not(.open) {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav li:not(.open), .b-nav.open li {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both
}
.b-nav li:first-child {
  margin-top: 0px
}
.b-nav.open {
  visibility: visible;
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
.b-nav:not(.open) {
  visibility: hidden;
  animation-duration: 0.4s;
  animation-fill-mode: backwards;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav.open li {
  padding-left: 30px;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft
}
.b-link {
  background: 0 0;
  border-left: rgba(255, 255, 255, 0)solid 2px;
  color: #fff;
  transition: all .4s ease;
  width: auto
}
.b-link, .b-menu {
  -webkit-transition: all .4s ease;
}
.b-nav li {
  border-left: 5px solid #e00a12;
}
/*.b-link--active,
.b-link:hover {
    border-left: #e00a12 solid 5px;
    padding-left: 30px
}*/
.b-menu {
  cursor: pointer;
  display: block;
  height: 66px;
  padding-top: 20px;
  position: relative;
  top: -20px;
  transition: all 0.4s ease 0s;
  width: 43px;
  z-index: 12;
  right: 10px;
}
.b-bun--bottom, .b-bun--mid, .b-bun--top {
  height: 2px;
  width: 25px
}
.b-container.open .b-main, .b-menu:hover {}
.b-bun {
  background: #fff;
  transition: all .4s ease
}
.b-brand, .b-bun {
  position: relative;
  -webkit-transition: all .4s ease
}
.b-bun--top {
  top: 0
}
.b-bun--mid {
  top: 8px
}
.b-bun--bottom {
  top: 16px
}
.b-brand {
  color: #2196f3;
  top: -21.43px;
  transition: all .4s ease;
  z-index: 13
}
.b-container {
  position: absolute;
  right: 0;
  top: 20px;
}
.b-container:hover:not(.open) .bun-bottom, .b-container:hover:not(.open) .bun-mid, .b-container:hover:not(.open) .bun-top {
  background: #2196f3
}
.b-container.open .b-bun--top {
  background: #e00a12;
  top: 9px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg)
}
.b-container.open .b-bun--mid {
  opacity: 0
}
.b-container.open .b-bun--bottom {
  background: #e00a12;
  top: 5px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.b-container.open .b-brand {
  color: #fff
}
.mobile-search-btn {
     background-color: #e00a12;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 25px;
    margin-left: 30px;
    padding: 10px 20px;
    text-transform: uppercase;
  border:none;
}
.mobile-search {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #fff;
    color: #949494;
    font-size: 14px;
    margin-bottom: 20px;
    margin-left: 30px;
    padding: 10px;
    width: 80%;
}

.circle {
  position: relative;
  border: 4px solid #8B0000;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background: firebrick;
  border-radius: 50%;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZRURQqdK4AVdBjHIrKgbTDqWnLZLsLSCUmuANa5u2ZRTzyjM-6mmRlzZoZ85JCj8OjGDeH-k2df6Td96b1sgZKnycqYHq8jtCqwUYuJljFcirWam8eiQ5MWb-dcETr6cVsl51zwtbQ_w/s1600/Amos-Lee-Mission-M2010s.png);
  background-size: cover;
margin-top:270px;
  box-shadow: 0 0 300px -50px #ffe766;
}
.circle .rotate {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotate 120s infinite linear;
}
.circle span {
  position: absolute;
  top: -40px;
  left: calc(50% - 3.75px);
  display: block;
  width: 7.5px;
  height: 190px;
  font-family: Special Elite;
  font-size:  1rem;
  font-weight: 100;
font-weight: bold;
  text-transform: uppercase;
  color: #f0f;
  transform-origin: bottom center;
}
.circle span:nth-child(1) {
  transform: rotate(6.2deg);
}
.circle span:nth-child(2) {
  transform: rotate(12.4deg);
}
.circle span:nth-child(3) {
  transform: rotate(18.6deg);
}
.circle span:nth-child(4) {
  transform: rotate(24.8deg);
}
.circle span:nth-child(5) {
  transform: rotate(31deg);
}
.circle span:nth-child(6) {
  transform: rotate(37.2deg);
}
.circle span:nth-child(7) {
  transform: rotate(43.4deg);
}
.circle span:nth-child(8) {
  transform: rotate(49.6deg);
}
.circle span:nth-child(9) {
  transform: rotate(55.8deg);
}
.circle span:nth-child(10) {
  transform: rotate(62deg);
}
.circle span:nth-child(11) {
  transform: rotate(68.2deg);
}
.circle span:nth-child(12) {
  transform: rotate(74.4deg);
}
.circle span:nth-child(13) {
  transform: rotate(80.6deg);
}
.circle span:nth-child(14) {
  transform: rotate(86.8deg);
}
.circle span:nth-child(15) {
  transform: rotate(93deg);
}
.circle span:nth-child(16) {
  transform: rotate(99.2deg);
}
.circle span:nth-child(17) {
  transform: rotate(105.4deg);
}
.circle span:nth-child(18) {
  transform: rotate(111.6deg);
}
.circle span:nth-child(19) {
  transform: rotate(117.8deg);
}
.circle span:nth-child(20) {
  transform: rotate(124deg);
}
.circle span:nth-child(21) {
  transform: rotate(130.2deg);
}
.circle span:nth-child(22) {
  transform: rotate(136.4deg);
}
.circle span:nth-child(23) {
  transform: rotate(142.6deg);
}
.circle span:nth-child(24) {
  transform: rotate(148.8deg);
}
.circle span:nth-child(25) {
  transform: rotate(155deg);
}
.circle span:nth-child(26) {
  transform: rotate(161.2deg);
}
.circle span:nth-child(27) {
  transform: rotate(167.4deg);
}
.circle span:nth-child(28) {
  transform: rotate(173.6deg);
}
.circle span:nth-child(29) {
  transform: rotate(179.8deg);
}
.circle span:nth-child(30) {
  transform: rotate(186deg);
}
.circle span:nth-child(31) {
  transform: rotate(192.2deg);
}
.circle span:nth-child(32) {
  transform: rotate(198.4deg);
}
.circle span:nth-child(33) {
  transform: rotate(204.6deg);
}
.circle span:nth-child(34) {
  transform: rotate(210.8deg);
}
.circle span:nth-child(35) {
  transform: rotate(217deg);
}
.circle span:nth-child(36) {
  transform: rotate(223.2deg);
}
.circle span:nth-child(37) {
  transform: rotate(229.4deg);
}
.circle span:nth-child(38) {
  transform: rotate(235.6deg);
}
.circle span:nth-child(39) {
  transform: rotate(241.8deg);
}
.circle span:nth-child(40) {
  transform: rotate(248deg);
}
.circle span:nth-child(41) {
  transform: rotate(254.2deg);
}
.circle span:nth-child(42) {
  transform: rotate(260.4deg);
}
.circle span:nth-child(43) {
  transform: rotate(266.6deg);
}
.circle span:nth-child(44) {
  transform: rotate(272.8deg);
}
.circle span:nth-child(45) {
  transform: rotate(279deg);
}
.circle span:nth-child(46) {
  transform: rotate(285.2deg);
}
.circle span:nth-child(47) {
  transform: rotate(291.4deg);
}
.circle span:nth-child(48) {
  transform: rotate(297.6deg);
}
.circle span:nth-child(49) {
  transform: rotate(303.8deg);
}
.circle span:nth-child(50) {
  transform: rotate(310deg);
}
.circle span:nth-child(51) {
  transform: rotate(316.2deg);
}
.circle span:nth-child(52) {
  transform: rotate(322.4deg);
}
.circle span:nth-child(53) {
  transform: rotate(328.6deg);
}
.circle span:nth-child(54) {
  transform: rotate(334.8deg);
}
.circle span:nth-child(55) {
  transform: rotate(341deg);
}
.circle span:nth-child(56) {
  transform: rotate(347.2deg);
}
.circle span:nth-child(57) {
  transform: rotate(353.4deg);
}
.circle span:nth-child(58) {
  transform: rotate(359.6deg);
}
.circle span:nth-child(59) {
  transform: rotate(365.8deg);
}
.circle span:nth-child(60) {
  transform: rotate(372deg);
}
.circle span:nth-child(61) {
  transform: rotate(378.2deg);
}
.circle span:nth-child(62) {
  transform: rotate(384.4deg);
}
.circle span:nth-child(63) {
  transform: rotate(390.6deg);
}
.circle span:nth-child(64) {
  transform: rotate(396.8deg);
}
.circle span:nth-child(65) {
  transform: rotate(403deg);
}
.circle span:nth-child(66) {
  transform: rotate(409.2deg);
}
.circle span:nth-child(67) {
  transform: rotate(415.4deg);
}
.circle span:nth-child(68) {
  transform: rotate(421.6deg);
}
.circle span:nth-child(69) {
  transform: rotate(427.8deg);
}
.circle span:nth-child(70) {
  transform: rotate(434deg);
}
.circle span:nth-child(71) {
  transform: rotate(440.2deg);
}
.circle span:nth-child(72) {
  transform: rotate(446.4deg);
}
.circle span:nth-child(73) {
  transform: rotate(452.6deg);
}
.circle span:nth-child(74) {
  transform: rotate(458.8deg);
}
.circle span:nth-child(75) {
  transform: rotate(465deg);
}
.circle span:nth-child(76) {
  transform: rotate(471.2deg);
}
.circle span:nth-child(77) {
  transform: rotate(477.4deg);
}
.circle span:nth-child(78) {
  transform: rotate(483.6deg);
}
.circle span:nth-child(79) {
  transform: rotate(489.8deg);
}
.circle span:nth-child(80) {
  transform: rotate(496deg);
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-360deg);
  }
}

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #;
} 
</style>

<div align="center" style="margin-top:110px">
<div class="shadow1">
</div>
<div id="M2010-shadow">
</div>
<div align="center">
<div class="shadow-top">
</div>
<div class="M-logo"> 
</div>
</div></div>
</div></div>

<div class="mobile-nav">
<div class="b-nav">
<ul>
<li><a class="b-link b-link--active" href="#">Song title</a></li>
<li><a class="b-link" href="http://Link Title">1-Title</a></li>
<li><a class="b-link" href="http://Link Title">2-Title</a></li>
<li><a class="b-link" href="http://Link Title">3-Title</a></li> 
<li><a class="b-link" href="http://Link Title">4-Title</a></li>
<li><a class="b-link" href="http://Link Title">5-Title</a></li>
</ul>
</div>
<!-- Burger-Icon -->
<div class="b-container">
<div class="b-menu">
<div class="b-bun b-bun--top">
</div>
<div class="b-bun b-bun--mid">
</div>
<div class="b-bun b-bun--bottom">
</div>
</div>
<!-- Burger-Brand -->
<a href="#" class="b-brand"></a>
</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/dMrJLz" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> </div>
<h2> <audio id="mys2010"src="https://sites.google.com/site/safe50534/lagu/Amos-lee-lue-eyes-color-flower-sprit-M2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/05/text-animation-laser.html"target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
 <script src='https://sites.google.com/site/codesule/lagu/Menu-M2010.js'>
</script>
 
<div class="circle">
<div class="rotate">
</span><span>&#9829;</span><span> </span><span>m</span><span>y</span><span>s</span><span> </span><span>2</span><span>0</span><span>1</span><span>0</span><span></span><span>l</span><span>e</span><span>a</span><span>r</span><span>n</span><span> </span><span>h</span><span>o</span><span>w</span><span> </span><span>t</span><span>o</span><span> </span><span>d</span><span>e</span><span>s</span><span>i</span><span>g</span><span>n</span><span> </span><span>&#38;</span><span> </span> <span>b</span> <span>u</span><span>i</span><span>l</span><span>d</span><span> </span><span>b</span><span>e</span><span>a</span><span>u</span><span>t</span><span>i</span><span>f</span><span>u</span><span>l</span><span> </span><span>w</span><span>e</span><span>b</span> <span>s</span><span>i</span><span>t</span><span>e</span><span>s</span><span> 
</div>
</div>
<canvas id="canvas"></canvas>
<canvas id="canvas2"></canvas>

<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>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>                        
<script src="https://sites.google.com/site/codesule/lagu/Musik-Mys2010.js"></script>  
<script src='https://sites.google.com/site/codesule/lagu/stopExecutionOnTimeout-M2010.js'>
</script>

<script>"M-2010";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Particle = function () {
  function Particle(x, y, size) {
    _classCallCheck(this, Particle);
    this.speed = 0.6;
    this.x = x;
    this.y = y;
    this.vx = (Math.random() - 0.5) * this.speed;
    this.vy = (Math.random() - 0.5) * this.speed;
    this.opacity = 1;
    this.size = size;
  }
  Particle.prototype.draw = function draw(context) {
    this.opacity -= this.speed / 200;
    context.fillStyle = this.color();
    context.fillRect(this.x, this.y, this.size, this.size);
  };
  Particle.prototype.move = function move() {
    this.x += this.vx;
    // y speed is influenced by "gravity"
    this.y += this.vy + (1 - this.opacity) * this.speed;
  };
  Particle.prototype.color = function color() {
    return "rgba(0, 255, 0, " + this.opacity + ")";
  };
  return Particle;
}();
var Laser = function () {
  function Laser(x, y) {
    _classCallCheck(this, Laser);
    this.x = x;
    this.y = y;
    this.steps = [];
    this.particles = [];
  }
  Laser.prototype.drawTo = function drawTo(x, y, ctx) {
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.fillStyle = "red";
    ctx.fillRect(x, y, 5, 5);
  };
  Laser.prototype.drawEnd = function drawEnd(ctx) {
    var p = this.steps.shift();
    if (p !== undefined) {
      this.drawTo(p[0], p[1], ctx);
    } else {
      var index = this.particles.length;
      // Loop through backwards so we can remove
      // particles from the array inside the loop.
      while (index--) {
        var p = this.particles[index];
        p.move();
        if (p.opacity < 0 || p.x < 0 || p.x > this.w || p.y < 0 || p.y > this.h) {
          this.particles.splice(index, 1);
        } else {
          p.draw(ctx);
        }
      }
    }
  };
  Laser.prototype.endFrom = function endFrom(x0, y0) {
    var nrOfSteps = 800;
    var i = nrOfSteps;
    while (i--) {
      var x = this.x + i * (x0 - this.x) / nrOfSteps + Math.cos(i / 10) * i / 4;
      var y = this.y + i * (y0 - this.y) / nrOfSteps + Math.sin(i / 10) * i / 4;
      this.steps.push([x, y]);
      if (i < 100) {
        this.particles.push(new Particle(this.x, this.y, 2));
      }
    }
  };
  return Laser;
}();
var LaserWriter = function () {
  function LaserWriter(canvasId, canvas2Id) {
    _classCallCheck(this, LaserWriter);
    // The first canvas holds the text being drawn (static).
    var canvas = document.getElementById(canvasId);
    //  The second canvas holds the laser beam and particles
    //  (animated).
    var canvas2 = document.getElementById(canvas2Id);
    this.ctx = canvas.getContext("2d");
    this.ctx2 = canvas2.getContext("2d");
    this.w = canvas.width = canvas2.width = 900;
    this.h = canvas.height = canvas2.height = 500;
    this.tick = 0;
    this.pointsIndex = 0;
    this.points = [];
    this.particles = [];
    // All the points that make up the whole word
    this.size = 3;
    this.startX = 0;
    this.laserStart = { x: 300, y: 50 };
    this.x = 0;
    this.y = 0;
  }
  LaserWriter.prototype.init = function init(text, size) {
    this.ctx.font = size + "px serif";
    // Draw black text on the canvas temporarily
    this.startX = (this.w - this.ctx.measureText(text).width * 3) * 0.5;
    this.ctx.fillText(text, 1, 100);
    var width = 500;
    var height = 300;
    var image = this.ctx.getImageData(0, 0, width, height);
    var buffer32 = new Uint32Array(image.data.buffer);
    for (var x = 0; x < width; x++) {
      for (var y = 0; y < height; y++) {
        // The buffer is linear, y*w+x is a trick
        // to calculate the linear index.
        if (buffer32[y * width + x]) {
          // There is a pixel here, add a point
          this.points.push([x, y]);
        }
      }
    }
    // Clear the text once, we will just be adding
    // to this canvas from now on (no clearing).
    this.ctx.clearRect(0, 0, this.w, this.h);
    this.ctx.fillStyle = "#0033CC";
    // For the laser
    this.ctx2.strokeStyle = "#333";
    this.ctx2.lineCap = "round";
    this.ctx2.lineWidth = 4;
    this.laser = new Laser(this.laserStart.y, this.laserStart.x);
  };
  LaserWriter.prototype.draw = function draw() {
    var _this = this;
    this.ctx2.clearRect(0, 0, this.w, this.h);
    // Continue drawing text?
    if (this.pointsIndex < this.points.length) {
      // Ok, we are not done
      // Draw the text, one point at a time
      var p = this.points[this.pointsIndex];
      this.x = p[0] * this.size + this.startX;
      this.y = p[1] * this.size + 170;
      this.drawPointAt(this.x, this.y);
      //this.drawLaserTo(x, y);
      this.laser.drawTo(this.x, this.y, this.ctx2);
      // Just add a particle every other tick
      if (this.tick % 2 === 0) {
        var particle = new Particle(this.x, this.y, this.size);
        this.particles.push(particle);
      }
    } else if (this.pointsIndex === this.points.length) {
      this.laser.endFrom(this.x, this.y);
    } else {
      this.laser.drawEnd(this.ctx2);
    }
    this.drawParticles();
    this.pointsIndex++;
    this.tick++;
    // Keep the animation going a while after we have
    // drawn all the text to let the last particles
    // fall off the screen and the laser end animation
    // run.
    if (this.pointsIndex < this.points.length + 10000) {
      // Draw three steps (ticks) then redraw screen
      if (this.tick % 3 === 0) {
        requestAnimationFrame(function () {
          return _this.draw();
        });
      } else {
        this.draw();
      }
    }
  };
  LaserWriter.prototype.drawPointAt = function drawPointAt(x, y) {
    this.ctx.beginPath();
    this.ctx.arc(x, y, this.size * 1, 0, Math.PI * 2, false);
    this.ctx.fill();
  };
  LaserWriter.prototype.drawParticles = function drawParticles() {
    var index = this.particles.length;
    // Loop through backwards so we can remove
    // particles from the array inside the loop.
    while (index--) {
      var p = this.particles[index];
      p.move();
      if (p.opacity < 0 || p.x < 0 || p.x > this.w || p.y < 0 || p.y > this.h) {
        this.particles.splice(index, 1);
      } else {
        p.draw(this.ctx2);
      }
    }
  };
  return LaserWriter;
}();
var laserWriter = new LaserWriter("canvas", "canvas2");
laserWriter.init("AMOS LEE BLUE EYES", 20);
laserWriter.draw(); 
</script>

Circle Code by. pzin
Audio Code by. Jereme Causing

Text Laser Code by. Johan Karlsson
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Text Laser With Audio

Category: Text Laser with Audio

Audio Player Menu Mp3

Memasang Kode Audio Player Menu Mp3
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 {font-family:"vivaldi";font-size: 1px;left: 130px;color: #000;margin-top:19px;height:100%;overflow:hidden;}
body {
background:#de0f91;} 
body {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em white;
} 
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:-4px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,  #333, #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60));
  border-bottom: 3px solid #333;  
-webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-5px;
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: linear-gradient(270deg,  rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099,  rgba(255, 0, 0, 0.60));
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s ease-in-out infinite;
} 
/*Text Bawah1*/  
M-2010, #teks, #posisi, #dibawah, span {
  font: 900 15vw Raleway;
  position: relative;
  display: inline-block;
}
#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;
 -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 rgba(255, 0, 0, 0.8),
 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
 0 -10px 2px rgba(255, 0, 0, 0.8);
  }
 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*/ 
.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 80px #FFFF00;  
  
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 250px #de0f91;    
}
#M2010-shadow  { 
margin:-110px;
box-shadow: 0 0 150px 80px  #FEE680;  
}
.shadow1:before,.shadow1:after {
    z-index:-1;
    position:absolute;
    content: " ";
    bottom:25px;
    left:10px;
    width:50%;     
    max-width:110px;
    box-shadow: 0 0 200px 90px rgba(255, 0, 0, 0.90);  
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);
}
.shadow1:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left:auto;
}

/*Menu*/
.b-nav, body:after {
  position: absolute;
  right: 0;
}
.b-brand, .b-link {
  font-size: 18px;
  font-weight: 700;
  margin-left: 0;
  text-decoration: none;
  font-family: "Roboto Slab", serif;
  text-transform: uppercase;
  ;
}
@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(345px, 0, 0);
    transform: translate3d(345px, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
@keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(345px, 0, 0);
    transform: translate3d(345px, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
* {
  box-sizing: border-box
}
 
body:after {
  background: #000;
  content: '';
  height: 100%;
  left: 0;
  opacity: 0;
  padding: 0;
  top: 0;
  visibility: hidden;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
  width: 100%;
}
body.open:after {
  z-index: 10;
  opacity: 0.65;
  height: 100000%;
  visibility: visible
}
.b-nav {
  background: #000 none repeat scroll 0 0;
  position: absolute;
  top: 0;
  width: 320px;
  z-index: 12;
}
.b-nav:not(.open) {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav {
  animation-duration: .4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft
}
.b-nav ul {
  padding-left: 0px;
}
.b-nav li {
  color: #fff;
  list-style-type: none;
  padding: 10px 10px 10px 0;
  text-align: left;
  -webkit-transform: translateX(345px);
  -ms-transform: translateX(345px);
  transform: translateX(345px)
}
.b-nav li:not(.open) {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav li:not(.open), .b-nav.open li {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both
}
.b-nav li:first-child {
  margin-top: 0px
}
.b-nav.open {
  visibility: visible;
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
.b-nav:not(.open) {
  visibility: hidden;
  animation-duration: 0.4s;
  animation-fill-mode: backwards;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav.open li {
  padding-left: 30px;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft
}
.b-link {
  background: 0 0;
  border-left: rgba(255, 255, 255, 0)solid 2px;
  color: #fff;
  transition: all .4s ease;
  width: auto
}
.b-link, .b-menu {
  -webkit-transition: all .4s ease;
}
.b-nav li {
  border-left: 5px solid #e00a12;
}

/*.b-link--active,
.b-link:hover {
    border-left: #e00a12 solid 5px;
    padding-left: 30px
}*/

.b-menu {
  cursor: pointer;
  display: block;
  height: 66px;
  padding-top: 20px;
  position: relative;
  top: -20px;
  transition: all 0.4s ease 0s;
  width: 43px;
  z-index: 12;
  right: 10px;
}
.b-bun--bottom, .b-bun--mid, .b-bun--top {
  height: 2px;
  width: 25px
}
.b-container.open .b-main, .b-menu:hover {}
.b-bun {
  background: #fff;
  transition: all .4s ease
}
.b-brand, .b-bun {
  position: relative;
  -webkit-transition: all .4s ease
}
.b-bun--top {
  top: 0
}
.b-bun--mid {
  top: 8px
}
.b-bun--bottom {
  top: 16px
}
.b-brand {
  color: #2196f3;
  top: -21.43px;
  transition: all .4s ease;
  z-index: 13
}
.b-container {
  position: absolute;
  right: 0;
  top: 20px;
}
.b-container:hover:not(.open) .bun-bottom, .b-container:hover:not(.open) .bun-mid, .b-container:hover:not(.open) .bun-top {
  background: #2196f3
}
.b-container.open .b-bun--top {
  background: #e00a12;
  top: 9px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg)
}
.b-container.open .b-bun--mid {
  opacity: 0
}
.b-container.open .b-bun--bottom {
  background: #e00a12;
  top: 5px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.b-container.open .b-brand {
  color: #fff
}
.mobile-search-btn {
     background-color: #e00a12;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 25px;
    margin-left: 30px;
    padding: 10px 20px;
    text-transform: uppercase;
  border:none;
}
.mobile-search {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #fff;
    color: #949494;
    font-size: 14px;
    margin-bottom: 20px;
    margin-left: 30px;
    padding: 10px;
    width: 80%;
}

@import "compass/css3";
body {
    background: ##333;
    padding-left:0px;}

h1 {
  text-align: center;
  font: bold 80px Sans-Serif;
  padding: 0px 0;
}  
.M2010 {
  background: #;
margin-top:200px;
  color: #888;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}

<div class="mobile-nav">
<div class="b-nav">
<ul>
<li><a class="b-link b-link--active" href="#">Song title</a></li>
<li><a class="b-link" href="http://Link Menu Mp3">1-Menu Mp3</a></li>
<li><a class="b-link" href="http://Link Menu Mp3">2-Menu Mp3</a></li>
<li><a class="b-link" href="http://Link Menu Mp3">3-Menu Mp3</a></li> 
<li><a class="b-link" href="http://Link Menu Mp3">4-Menu Mp3</a></li>
</ul>
</div>
<!-- Burger-Icon -->
<div class="b-container">
<div class="b-menu">
<div class="b-bun b-bun--top">
</div>
<div class="b-bun b-bun--mid">
</div>
<div class="b-bun b-bun--bottom">
</div>
</div>
<!-- Burger-Brand -->
<a href="#" class="b-brand"></a>
</div>
</div> 
<div class="info">
<h1 class="M2010">
MYSCRIPT2010
</h1>
</div>
<p align="center">
<font size="5" color="ORANGE"face="arial">LEARN TO EDIT SCRIPT CIBEBER CIMAHI</a>

<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="mys2010" src="https://sites.google.com/site/studiedingsongmp3/laguku/Capoeira-Paranaue-Mys2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<header>
<a href="http://Link Title"target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
 <script src='https://sites.google.com/site/codesule/lagu/Menu-M2010.js'>
</script>

<music> 
<script src='https://sites.google.com/site/codesule/lagu/stopExecutionOnTimeout-M2010.js'>
</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>  
 <link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>

<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
Design code is edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy & paste you canDownload Here Audio Player Menu Mp3

Category:

Text Movie Gradiend

Memasang Code Text Movie Gradiend
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
Klik Pratinjau untuk melihat hasil 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 type="text/css">
body {background-image: url();color:red;height:100%;overflow:hidden;}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy80R6I_WbJ0jVO5Vm9HdPCKDWugUkHzSEd_XpA3r3LnOFuKfmJ2urJNPbNue6CUiF2uFd__obabft7qytmneX-_OlCbq89fsjkEu91XGaejbAhJBIjzsCztaqACewW-xPZOBY-inXhJA/s1600/wallpaper-M2010s.PNG");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

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:-4px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,  rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60));
  border-bottom: 3px solid #333;  
-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: 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: linear-gradient(270deg,  rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099,  rgba(255, 0, 0, 0.60));
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s ease-in-out infinite;
} 
/*Text Bawah1*/  
M-2010, #teks, #posisi, #dibawah, span {
  font: 900 15vw Raleway;
  position: relative;
  display: inline-block;
}
#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;
 -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 rgba(255, 0, 0, 0.8),
 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
 0 -10px 2px rgba(255, 0, 0, 0.8);
  }
 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  ;
  } 
}

.wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  font: 300 30px/1 'Open Sans Condensed', sans-serif;
  text-align: center;
  text-transform: uppercase;
  color: #000;
  animation: 190s credits linear infinite;
}
.movie {
  margin-bottom: 50px;
  font-size: 50px;
}
.job {
  margin-bottom: 5px;
  font-size: 18px;
}
.name {
  margin-bottom: 50px;
  font-size: 35px;
}
@keyframes credits {
  0% {
    top: 100%;
  }
  100% {
    top: -500%;
  }
}

.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 180px #CC0099; 
   
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 10px #F00;    
}
#M2010-shadow  { 
margin:-150px;
box-shadow: 0 0 150px 80px  #809FFE;  

}
.shadow1:before,.shadow1:after {
    z-index:-1;
    position:absolute;
    content: " ";
    bottom:25px;
    left:10px;
    width:50%;     
    max-width:110px;
    box-shadow: 0 0 200px 90px #809FFE;  
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);

}
.shadow1:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left:auto;

}

div.cities {
 text-transform: lowercase; 
    color: green;
    margin: 20px 0 20px 0;
    padding: 20px;
}</style>

<div align="center" style="margin-top:110px">
<div class="shadow1">
</div>
<div id="M2010-shadow">
</div>
<div align="center">
<div class="shadow-top">
</div>
<div class="M-logo"> 
</div>
</div></div>
  </div></div>
<div class='wrapper'>
<div class='movie'>
Welcome</div>
<div class='job'>
Myscript2010</div>
<div class='name'>
LEARN EDITING SCRIPT</div>
<div class='job'>
WITH CODE</div>
<div class='name'>
CSS HTML EFFECT</div>
<div class='job'>
SOURCES CODE</div>
<div class='name'>
CODEPEN GITHUB</div>
<div class='job'>
SOURCE NEXT</div>
<div class='name'>
ALL SOURCES CODE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT SHINE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT ROTATE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT SLIDE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT HOVER</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT TRANSISI</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT FLIP</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT TOOLTIP</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT RADIAL</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT MULTIPLE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT ANIMATED</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT EXPANDING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT TRANSFORMS</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT OVERLAY</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT LOADING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT CIRCLE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT NAPIGATION</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT DROPDOWN</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT LIGHTING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT ZOOM</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT SCALE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT OPACITY</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT FLASHING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFCET <br>SMOKE & OTHERS</div>
<div class='name'>
</div>
<div class='job'>
explanation - etcetera<br>
edited and applied in blogspot
</div>

<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
Let's Learn <br>
Learning : According to the Experts
</div> 
<div class='job'>
oward L. Kingsley<br> in Dantes (1997)
</div> 
<div class='job'>
Learning is the most<br>a process not a product <br>
The process whereby the properties and behavior<br>
generated and transformed through practice and training
</div> 
<div class='job'>
Buy Your Future With Science <br>
Not just your life that facilitated<br>
when you diligently studied<br><br>
but also the lives of others<br>
learning will give you a new understanding<br>
so you can face the new challenges <br>
<br>
</div>
<div class='name'>
</div>

<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
Mari Belajar<br>
Belajar : Menurut Para Ahli
</div> 
<div class='job'>
oward L. Kingsley<br> dalam Dantes (1997)
</div> 
<div class='job'>
Belajar adalah<br> suatu proses bukan produk<br>
Proses dimana sifat dan tingkah laku<br>
ditimbulkan dan diubah melalui praktek dan latihan.
</div> 
<div class='job'>
Beli Masa Depan Anda Dengan Ilmu<br>
Bukan hanya kehidupan anda yang dimudahkan<br>
saat anda rajin belajar<br><br>
tapi juga kehidupan orang lain<br>
belajar akan memberikan anda pemahaman baru<br>
sehingga anda bisa menghadapi tantangan baru<br>
<br>
</div>
<div class='name'>
</div>
<div class='name'>
SONG TITLE ESQ
</div>
<div class='job'>
EMOTIONAL <BR>SPIRITUAL QUESTIENT
</div>
<div class='name'>
INTELLIGENCE
</div>
<div class='name'>
WEBBLOG @ EMAIL<BR>
</div>
<div class='job'> 
<div class="cities">
myscript2010s@gmail.com<br>
http://myscript2010s.blogspot.co.id
</div>
<div class='name'>
</div>
<div class='job'> 
</div>
<div class='name'>
</div>
<div class='job'>
CODE EDITED BY.</div>
<div class='name'>
MYSCRIPT2010</div>
<div class='job'>
</div>
<div class='name'>
Copyright @ 2016</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
Cibeber Cimahi</div>

</div>
</div></div>
  </div></div>

<div id="butterfly">
<div id="butter1" class="butter">
<div class="butterFly1 butterFly">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYDu2_nwIs7Mf5uVt-5FXf8StHrcDhOjVftC5fXM-xyvUHGQKevo-Fce8cDRBwxJQ5n5Zc-aiOGAX3wlB0ElD6Izq6HNSaoYo4Mun1LWHndPtQnpCKZ4FtzSXV4YxzQYi3EOtvQ3mt-CE/s1600/kupu-3-mys2010.png" alt="" /></div>
</div>
<div id="butter2" class="butter">
<div class="butterFly2 butterFly">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYcIHGLveuhclVgXgQ3oTtkaByfp7fe9hI9WBpE1oduK0Cfi7hFrGXBdNiPkS7MoYAdBfUwT7OM6DIY4z6NuJFcKsA7_byxnwlJlK3LYU3oXn2W32uBeHqQDCGzib7w39mxpZ_mBTZ1lU/s1600/kupu-2-mys2010.png" alt="" /></div>
</div>
<div id="butter3" class="butter">
<div class="butterFly3 butterFly">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhwTjGg1wpc47Ozb9pbvbZwTrXVomtaVwIm7p0Brd4fLrScxBpkRWVDpcO_11NzA1SSbBOeHLcIj2xro7Up6nQIpS3eeaxHh1f2i9yqGAa4YEvkLaYBy_ALSkZGIxU04I9GDnINceX4I/s1600/kupu-1-mys2010.png" alt="" /></div>
</div>
</div>
<link href="https://sites.google.com/site/usesitesto/file-code/kupu-kupu-mys2010.css " rel="stylesheet" type="text/css">

<header>
<a href="http://sample-mys2010.blogspot.co.id" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
<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="mys2010" src="https://sites.google.com/site/laguhiburan/mp3-1/ESQ_Mys2010.mp3"controls="controls"></audio></h2>
</a></div>
</div> 

<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="//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>

Source Code by. Oliver Knoblich
Design code is edited by. M - 2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Text Movie Gradiend

Category: Text Movie Gradiend

Lyrics Lagu Beside Me

Memasang Kode Lyrics Lagu Beside Me
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 {font-family:"vivaldi";font-size: 1px;left: 130px;color: #000;margin-top:19px;height:100%;overflow:hidden;}
body {
background:#de0f91;} 
body {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em white;
} 
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:-4px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,  #333, #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60));
  border-bottom: 3px solid #333;  
-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: 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: linear-gradient(270deg,  rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099,  rgba(255, 0, 0, 0.60));
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s ease-in-out infinite;
} 
/*Text Bawah1*/  
M-2010, #teks, #posisi, #dibawah, span {
  font: 900 15vw Raleway;
  position: relative;
  display: inline-block;
}
#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;
 -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 rgba(255, 0, 0, 0.8),
 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
 0 -10px 2px rgba(255, 0, 0, 0.8);
  }
 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  ;
  } 
}

.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 80px #FFFF00;  
  
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 250px #de0f91;    
}
#M2010-shadow  { 
margin:-110px;
box-shadow: 0 0 150px 80px  #FEE680;  
}
.shadow1:before,.shadow1:after {
    z-index:-1;
    position:absolute;
    content: " ";
    bottom:25px;
    left:10px;
    width:50%;     
    max-width:110px;
    box-shadow: 0 0 200px 90px rgba(255, 0, 0, 0.90);  
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);
}
.shadow1:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left:auto;
}

.Absolute-Center {
 margin: auto;
 position:relative;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}
h3 {
 height: 60px;
 color: #006B6B;
 letter-spacing: 10px;
 line-height: normal;
 text-align: center;
 z-index: 300;
 padding-bottom: 16%;
 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;
}

.spinning {
color: #000;
text-align: center;
margin: auto;
font-size: 44em;
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);
 -webkit-animation: spinaround 38s infinite linear;
 animation: spinaround 38s infinite linear;
}
 @-webkit-keyframes spinaround {
 to {
-webkit-transform:rotateY(360deg)
}
}
@keyframes spinaround {
 to {
transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
}
}

.wrapper {
  position: relative;
  max-width: 1024px;
  height: 100%;
  margin: 0 auto;
}
.popup {
  position: absolute;
  top: 270px;
  left: 50%;
  width: 50%;
  height: 300px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);

}
.popup__close {
  position: absolute;
background: -webkit-linear-gradient(transparent 210%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 210%, #dad 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s ease-in-out infinite;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.popup.is-moved {
  -webkit-animation: slide-down 0.125s ease-in-out forwards;
          animation: slide-down 0.125s ease-in-out forwards;
}

@-webkit-keyframes slide-down {
  0% {
    top: 50%;
    -webkit-transform: translate( -50%,  -50%);
            transform: translate( -50%,  -50%);
    box-shadow: 0 0 0px 999px rgba(0, 0, 0, 0.7);
  }
  5% {
    box-shadow: none;
  }
  40% {
    width: 50%;
    height: 300px;
  }
  80% {
    top: 100%;
    width: 100%;
    height: 60px;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    box-shadow: none;
    opacity: 1;
  }
  100% {
    top: 100%;
    width: 100%;
    height: 60px;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    box-shadow: none;
    opacity: 0;
  }
}
@keyframes slide-down {
  0% {
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    box-shadow: 0 0 0px 999px rgba(0, 0, 0, 0.7);
  }
 5% {
    box-shadow: none;
  }
  40% {
    width: 50%;
    height: 300px;
  }
  80% {
    top: 100%;
    width: 100%;
    height: 60px;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    box-shadow: none;
    opacity: 1;
  }
  100% {
    top: 100%;
    width: 100%;
    height: 60px;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    box-shadow: none;
    opacity: 0;
  }
}
</style>

<div align="center" style="margin-top:110px">
<div class="shadow1">
</div>
<div id="M2010-shadow">
</div>
<div align="center">
<div class="shadow-top">
</div>
<div class="M-logo"> 
</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" 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://sites.google.com/site/emanloveforplace/tempatlagu/Don-Williams-Besideme-cover-M2010s.mp3">
  </source></h2>
</a></div>
</div>
<header>
<a href="http://Link Title" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<!-- Lyrics -->
<section id="peace">   
  <!-- FIRST VERSE -->  
  <h3 id="ivespent" class="lyrics animated hidden">I've spent my life <br>looking for you</h3>
  <h3 id="Finding1" class="lyrics animated hidden">Finding my way <br>wasn't easy to do</h3>
  <h3 id="iknow1" class="lyrics animated hidden">I know <br>there was your all the while </h3>
  <h3 id="andits1" class="lyrics animated hidden">And it's <br>been worth every mile</h3>
  <h3 id="Solaydown1" class="lyrics animated hidden">So lay down beside me</h3>
  <h3 id="Loveme" class="lyrics animated hidden">Love me and hide me</h3>
  <h3 id="Kissall" class="lyrics animated hidden">Kiss all the hurtin <br>of this world away</h3>
  <h3 id="Hold" class="lyrics animated hidden">Hold me so close<br> that I feel your heartbeat<br> & don't ever wander away</h3>
  <h3 id="Mornings2" class="lyrics animated hidden">Mornings & evenings <br>all were the same</h3>
  <h3 id="andthere2" class="lyrics animated hidden">And there was <br>no music till I heard your name</h3>  
  <!-- SECOND VERSE -->
  
  <h3 id="but1knew1" class="lyrics animated hidden">But I knew <br>when I saw you smile</h3>
  <h3 id="andNow1" class="lyrics animated hidden">And Now <br>I can rest for awhile</h3>
  <h3 id="Solaydownb1" class="lyrics animated hidden">So lay down beside me</h3>
  <h3 id="Lovemeandhide1" class="lyrics animated hidden">Love me and hide me</h3>
  <h3 id="Kissallthehurtin1" class="lyrics animated hidden">Kiss all the hurtin <br>of this world away</h3>
  <h3 id="Holdmesoclose1" class="lyrics animated hidden">Hold me so close </h3>
  <h3 id="thatIfeel1" class="lyrics animated hidden"> that I feel your heartbeat</h3>
  <h3 id="don1" class="lyrics animated hidden">& don't ever wander away</h3>
  <h3 id="Chorus3" class="lyrics animated hidden"><span style="color:#B20000">&hearts; &hearts; </h3>
  <h3 id="Holdmesoclose3" class="lyrics animated hidden">Hold me so close</h3>  
  <!-- THIRD VERSE -->  
  <h3 id="heartbeat2" class="lyrics animated hidden">that I feel your heartbeat</h3>
  <h3 id="away2" class="lyrics animated hidden">& don't ever wander away</h3>
  <h3 id="Williams2" class="lyrics animated hidden">By. Don Williams <br>Lay Down Beside Me</h3>
  <h3 id="Edited2" class="lyrics animated hidden">Edited by. <br>M2010 Cibeber Cimahi</h3>
  <h3 id="Sule2" class="lyrics animated hidden"></h3>
  <h3 id="bemine" class="lyrics animated hidden">Happy <br>Valentines Day</h3>
</section>

<!-- Lyrics -->
<section id="peace">   
  <!-- FIRST VERSE -->  
  <h3 id="ivespent" class="lyrics animated hidden">I've spent my life <br>looking for you</h3>
  <h3 id="Finding1" class="lyrics animated hidden">Finding my way <br>wasn't easy to do</h3>
  <h3 id="iknow1" class="lyrics animated hidden">I know <br>there was your all the while </h3>
  <h3 id="andits1" class="lyrics animated hidden">And it's <br>been worth every mile</h3>
  <h3 id="Solaydown1" class="lyrics animated hidden">So lay down beside me</h3>
  <h3 id="Loveme" class="lyrics animated hidden">Love me and hide me</h3>
  <h3 id="Kissall" class="lyrics animated hidden">Kiss all the hurtin <br>of this world away</h3>
  <h3 id="Hold" class="lyrics animated hidden">Hold me so close<br> that I feel your heartbeat<br> & don't ever wander away</h3>
  <h3 id="Mornings2" class="lyrics animated hidden">Mornings & evenings <br>all were the same</h3>
  <h3 id="andthere2" class="lyrics animated hidden">And there was <br>no music till I heard your name</h3>  
  <!-- SECOND VERSE -->
  
  <h3 id="but1knew1" class="lyrics animated hidden">But I knew <br>when I saw you smile</h3>
  <h3 id="andNow1" class="lyrics animated hidden">And Now <br>I can rest for awhile</h3>
  <h3 id="Solaydownb1" class="lyrics animated hidden">So lay down beside me</h3>
  <h3 id="Lovemeandhide1" class="lyrics animated hidden">Love me and hide me</h3>
  <h3 id="Kissallthehurtin1" class="lyrics animated hidden">Kiss all the hurtin <br>of this world away</h3>
  <h3 id="Holdmesoclose1" class="lyrics animated hidden">Hold me so close </h3>
  <h3 id="thatIfeel1" class="lyrics animated hidden"> that I feel your heartbeat</h3>
  <h3 id="don1" class="lyrics animated hidden">& don't ever wander away</h3>
  <h3 id="Chorus3" class="lyrics animated hidden"><span style="color:#B20000">&hearts; &hearts; </h3>
  <h3 id="Holdmesoclose3" class="lyrics animated hidden">Hold me so close</h3>  
  <!-- THIRD VERSE -->  
  <h3 id="heartbeat2" class="lyrics animated hidden">that I feel your heartbeat</h3>
  <h3 id="away2" class="lyrics animated hidden">& don't ever wander away</h3>
  <h3 id="Williams2" class="lyrics animated hidden">By. Don Williams <br>Lay Down Beside Me</h3>
  <h3 id="Edited2" class="lyrics animated hidden">Edited by. <br>M2010 Cibeber Cimahi</h3>
  <h3 id="Sule2" class="lyrics animated hidden"></h3>
  <h3 id="bemine" class="lyrics animated hidden">Happy <br>Valentines Day</h3>
</section>

 <div class="wrapper">
  <div class="popup">
 <font size="5" color="blue"face="arial">
    <div class="popup__close"> X</div></font>
<div id="opening_screen" class="animated">
<div class="spinning">by. Don Williams<br> Lay Down Beside Me <br> Cover by. <br>Alison K & John Waite</h3>
</div>
  </div>

<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>
<script>$('.popup__close').on('click', function () {
    $('.popup').toggleClass('is-moved');
    window.setTimeout(function () {
        $('.sticky').css('opacity', 1);
    }, 500);
}); 
</script>

<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>
<script> 
 
// 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 > 10 && lastTime < 10){
  $("#peace h2").siblings().addClass('hidden').removeClass('pushSoftOut');
  $("#heart").addClass('hidden').removeClass('pushSoftIn');}
 // ivespent
 if (nowTime > 20 && lastTime < 20) {
   $('#ivespent').toggleClass('pushSoftIn hidden');}
 // Finding
 if (nowTime > 30 && lastTime < 30) {
  $('#Finding1').toggleClass('pushSoftIn hidden');
   $('#ivespent').toggleClass('pushSoftIn pushSoftOut');}
 // iknow1
 if (nowTime > 42 && lastTime < 42) {
  $('#iknow1').toggleClass('pushSoftIn hidden');
   $('#Finding1').toggleClass('pushSoftIn pushSoftOut');}
 // andits
 if (nowTime > 53 && lastTime < 53) {
  $('#andits1').toggleClass('pushSoftIn hidden');
   $('#iknow1').toggleClass('pushSoftIn pushSoftOut');}
 // Solaydown
 if (nowTime > 63 && lastTime < 63) {
  $('#Solaydown1').toggleClass('pushSoftIn hidden');
   $('#andits1').toggleClass('pushSoftIn pushSoftOut');}
 // Loveme
 if (nowTime > 70 && lastTime < 70) {
  $('#Loveme').toggleClass('pushSoftIn hidden');
   $('#Solaydown1').toggleClass('pushSoftIn pushSoftOut');}
 // Kissall
 if (nowTime > 75 && lastTime < 75) {
  $('#Kissall').toggleClass('pushSoftIn hidden');
   $('#Loveme').toggleClass('pushSoftIn pushSoftOut');}
 // Hold
 if (nowTime > 85 && lastTime < 85) {
  $('#Hold').toggleClass('pushSoftIn hidden');
   $('#Kissall').toggleClass('pushSoftIn pushSoftOut');}
 //  Mornings  - 2
 if (nowTime > 107 && lastTime < 107) {
  $('#Mornings2').toggleClass('pushSoftIn hidden');
   $('#Hold').toggleClass('pushSoftIn pushSoftOut');}
 // andthere - 2
 if (nowTime > 116 && lastTime < 116) {
  $('#andthere2').toggleClass('pushSoftIn hidden');
   $('#Mornings2').toggleClass('pushSoftIn pushSoftOut');}
 // but1knew
 if (nowTime > 129 && lastTime < 129) {
  $('#but1knew1').toggleClass('pushSoftIn hidden');
   $('#andthere2').toggleClass('pushSoftIn pushSoftOut');}
 // andNow
 if (nowTime > 139 && lastTime < 139) {
  $('#andNow1').toggleClass('pushSoftIn hidden');
   $('#but1knew1').toggleClass('pushSoftIn pushSoftOut');}
 // Solaydownb
 if (nowTime > 151 && lastTime < 151) {
  $('#Solaydownb1').toggleClass('pushSoftIn hidden');
   $('#andNow1').toggleClass('pushSoftIn pushSoftOut');}
 // Lovemeandhide
 if (nowTime > 157 && lastTime < 157) {
   $('#Lovemeandhide1').toggleClass('pushSoftIn hidden');
  $('#Solaydownb1').toggleClass('pushSoftIn pushSoftOut');}
 // Kissallthehurtin
 if (nowTime > 162 && lastTime < 162) {
  $('#Kissallthehurtin1').toggleClass('pushSoftIn hidden');
   $('#Lovemeandhide1').toggleClass('pushSoftIn pushSoftOut');}
 // Holdmesoclose
 if (nowTime > 172 && lastTime < 172) {
  $('#Holdmesoclose1').toggleClass('pushSoftIn hidden');
   $('#Kissallthehurtin1').toggleClass('pushSoftIn pushSoftOut');}
 // thatIfeel
 if (nowTime > 179 && lastTime < 179) {
  $('#thatIfeel1').toggleClass('pushSoftIn hidden');
   $('#Holdmesoclose1').toggleClass('pushSoftIn pushSoftOut');}
 // don
 if (nowTime > 184 && lastTime < 184) {
  $('#don1').toggleClass('pushSoftIn hidden');
   $('#thatIfeel1').toggleClass('pushSoftIn pushSoftOut');}
 // Chorus
 if (nowTime > 193 && lastTime < 193) {
  $('#Chorus3').toggleClass('pushSoftIn hidden');
   $('#don1').toggleClass('pushSoftIn pushSoftOut');}
 // Holdmesoclose - 3
 if (nowTime > 212 && lastTime < 212) {
  $('#Holdmesoclose3').toggleClass('pushSoftIn hidden');
   $('#Chorus3').toggleClass('pushSoftIn pushSoftOut');}
 // THIRD VERSE   heartbeat
 if (nowTime > 216 && lastTime < 216) {
   $('#heartbeat2').toggleClass('pushSoftIn hidden');
   $('#Holdmesoclose3').toggleClass('pushSoftIn pushSoftOut');}
 // away
 if (nowTime > 221 && lastTime < 221) {
   $('#away2').toggleClass('pushSoftIn hidden');
   $('#heartbeat2').toggleClass('pushSoftIn pushSoftOut');}
 // Williams
 if (nowTime > 229 && lastTime < 229) {
  $('#Williams2').toggleClass('pushSoftIn hidden');
  $('#away2').toggleClass('pushSoftIn pushSoftOut');}

 // Edited
 if (nowTime > 234 && lastTime < 234) {
  $('#Edited2').toggleClass('pushSoftIn hidden');
   $('#Williams2').toggleClass('pushSoftIn pushSoftOut');}
 
        // Sule
 if (nowTime > 240 && lastTime < 240) {
   $('#Sule2').toggleClass('pushSoftIn hidden');
  $('#Edited2').toggleClass('pushSoftIn pushSoftOut');}  
 

 if (nowTime > 242 && lastTime < 242) {
  $('#bemine').toggleClass('roEdgeUpIn hidden');}
 lastTime = nowTime;});       
    </script>

 
<music>
<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>

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 Lyrics Lagu Beside Me

Category: Lyrics Lagu Beside Me

Light Shadow with audio

Memasang Kode Light Shadow with audio
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:#de0f91;} 
body {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em white;
} 
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:-4px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,  #333, #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, #333);
  border-bottom: 3px solid #333;  
}
.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: linear-gradient(270deg,  rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60));
  border-bottom: 3px solid #333;
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
} 
/*Text Bawah1*/  
M-2010, #teks, #posisi, #dibawah, span {
  font: 900 15vw Raleway;
  position: relative;
  display: inline-block;
}#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;
 -webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}

.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 80px #FFFF00;    
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 250px #de0f91;    
}
#M2010-shadow  { 
margin:-150px;
box-shadow: 0 0 150px 120px  #FEE680;  
}
.shadow1:before,.shadow1:after {
    z-index:-1;
    position:absolute;
    content: " ";
    bottom:25px;
    left:10px;
    width:50%;     
    max-width:110px;
    box-shadow: 0 0 200px 90px rgba(255, 0, 0, 0.90);  
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);
}
.shadow1:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left:auto;
}
font {
margin-top:310px;
font-family: "agency fb", sans-serif;
font-size: 185px;
text-align: center;
font-weight: 900;
text-transform: uppercase;
color: #de0f91;
text-shadow: -10px 5px 30px rgba(255, 0, 0, 0.60),  20px 10px 30px #000,  30px 10px 30px rgba(255, 0, 0, 0.55);
}
/*Text Bawah2*/ 
.text-bawah  {
font-family: "agency fb", sans-serif;
font-size: 50px;
text-align: center;
font-weight: bold;
color: #111; 
margin-top:30px;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
  text-shadow: 
0 -1px 0 #858585,       
0 1px 10px rgba(0,0,0,.6),
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.2),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 7px 10px rgba(0,0,0,.25),
0 15px 10px rgba(0,0,0,.2),
0 25px 15px rgba(0,0,0,.15); 
 -webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s 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;
  }}

<div align="center" style="margin-top:110px">
<div class="shadow1">
</div>
<div id="M2010-shadow">
</div>
<div align="center">
<div class="shadow-top">
</div>
<div class="M-logo"> 
</div>
</div></div>
  </div></div>
<div align="center" style="margin-top: 210px">
<font>M2010</font>
<div class="text-bawah">
<font style="color:#009999; font-size:50pt">
COPYRIGHT &#xA9; 2016 CIBEBER CIMAHI</font>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/09/light-shadow-with-audio.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
<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="mys2010" src="https://sites.google.com/site/emanloveforplace/tempatlagu/Williams-Besideme-cover-M2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>

<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="//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>

Audio Code by. Jereme Causing
Design Code is Edited by. M-2010 on Codepen

DEMOSHOW

If you want to directly copy  & paste you canDownload Here Light Shadow with audio

Category: Light Shadow with audio

Text Laser with Audio

Audio Player Menu Mp3

Text Movie Gradiend

Lyrics Lagu Beside Me

Light Shadow with audio

POPULAR

Blog Archive