Cloud Animation Runs with Rain & Audio Player

Memasang kode Cloud Animation Runs with Rain & Audio Player
Code ini menggunakan CSS dan HTML. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<link rel='stylesheet prefetch' href='
//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<script src='//codepen.io/assets/libs/prefixfree.min.js'></script>
<style class="cp-pen-styles">
body {#);color:red;height:100%;overflow:hidden;}

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: 0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #000;
border-top: 2px solid #f0f;
z-index: 9999;
}
   
 /* AWAN */
/* What do you have to be scared of?
 *
 * Lorin Tackett, July 2013
 * Myscript2010 Maret 2016 
 */
@import url(http://fonts.googleapis.com/css?family=Oswald);
@keyframes clouds-loop-1 {
  to {
    background-position: -1000px 0;
  }
}
.clouds-1 {
  background-image: url("http://s.cdpn.io/15514/clouds_2.png");
  animation: clouds-loop-1 20s infinite linear;
}
@keyframes clouds-loop-2 {
  to {
    background-position: -1000px 0;
  }
}
.clouds-2 {
  background-image: url("http://s.cdpn.io/15514/clouds_1.png");
  animation: clouds-loop-2 15s infinite linear;
}

@keyframes clouds-loop-3 {
  to {
    background-position: -1579px 0;
  }
}
.clouds-3 {
  background-image: url("http://s.cdpn.io/15514/clouds_3.png");
  animation: clouds-loop-3 17s infinite linear;
}
html, body {
  font-family: sans-serif;
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(100%, #000000));
  background: -moz-linear-gradient(#333333, #000000);
  background: -webkit-linear-gradient(#333333, #000000);
  background: linear-gradient(#333333, #000000);
}
body, body a {
  color: #444;
}
h1.quote {
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  text-align: right;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.5em;
  line-height: 1.5em;
  margin: 0;
  text-shadow: 0 -1px 0  #ffffff, 0 2px 3px #000000;
}
h1.quote span {
  display: block;
}
section.info {
  position: absolute;
  bottom: 0;
  right: 2ch;
  font-size: 60%;
}
section.info dl {
  display: -webkit-flex;
  display: flex;
}
section.info dl dt, section.info dl dd {
  margin: 0;
  padding: 0;
}
section.info dl dt {
  padding-right: 1ch;
}
section.info dl dd {
  padding-right: 4ch;
}
.clouds {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}
.clouds-1,
.clouds-2,
.clouds-3 {
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 500px;
}
/* Requires Music */
.player {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 210px;
    height: 100px;
    background: ##000;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    height: 50px;
    width: 50px;
    background: #fff;
    border-radius: 50%;
    float: left;
    position: relative;
    cursor: pointer;
    color: #dad;  
}
.player .volume-ctrl-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 10px;
    height: 50px;
    width: 118px;
    float: right;
}
.player .fa-pause {
    position: absolute;
    top: 18px;
    left: 18px;
}
.player .fa-play {
    position: absolute;
    top: 18px;
    left: 20px;
}
.player .time-info {
    clear: both;
    position: relative;
    top: 8px;
    text-align: center;
    font-size: 13px;
}
.player .time-current {
    color: #ffff00;
}
.player .volume-slider {
    display: inline-block;
    height: 2px;
    width: 50px;
    background: #f0f;
    margin: 0 10px;
    position: relative;
    top: -10px;
}
.player .volume-knob {
    background: #dad;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
}
/*hujan*/
a {
  line-height: normal;
  font-family: Varela Round, sans-serif;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
  color: #A7AAAE;
  position: absolute;
  left: 20px;
  bottom: 20px;  }
/*hujan End*/
</style>

<center>
<audio id="player">
<source src="http://radio.freeshoutcast.com:18714/;stream.ogg" type="audio/ogg">
<source src="https://sites.google.com/site/fileblogfor/code/Fix-You-Kinna-Mys2010.mp3" type="audio/mpeg">
</audio>

<center>
<audio id="player">
<source src="http://radio.freeshoutcast.com:18714/;stream.ogg" type="audio/ogg">
<source src="https://sites.google.com/site/fileblogfor/code/Fix-You-Kinna-Mys2010.mp3" type="audio/mpeg">
</audio>
<canvas height='1' id='display' width='1'></canvas>
</center>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'></script>

<h1 class='Awan'>
<h1 class='quote'>

<span>If our heart is in the dark
who will give light to illuminate our hearts
by. Myscript2010</span>
<span>Song title : Fix You
Singer by. Kina Grannis</span>

<a href="http://demoshow-mys2010.blogspot.co.id/2016/03/cloud-animation-runs.html" title="Tukar Gambar"> The exchange Models</a></h1>
<div class='clouds'>
<div class='clouds-1'>
</div>
<div class='clouds-2'>
</div>
<div class='clouds-3'>
</div>
</div>

<!-- GRADIEND -->
<div class="ap" id="ap">
<center>
<p>
Cibeber Cimahi</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9mZwE1hxxBIz-tWksu-19Ci_bDAev9Twjk2s3_RJ3Y3DqPeaPkqWJ3nwDgTJ40UNr7AfkjNcUrMrZyk7sjM5SW9zZawfYM2izL8G7E0tKNBQtsGXomZXySgY_AFT2HEx818p1SNdjUrLt/s1600-r/Loading-Mys2010.gif" name="e902" border="0" width="28" height="29" /></a>

<header>  
<div class="Top Title Header">
<center>
<font size="1" color="aqua"face="arial"><b>RAIN WITH AUDIO PLAYER</b></a>
</div>
</header>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script>(function () {
}.call(this)); 
</script>

<script>
"use strict";

/**
 * Requires JS Music
 */

var Player = function(audio_element, options) {

    this.audio_obj = document.id(audio_element);
    this.options = options;

    this.init = function() {
        this.status = 'pause';
        //this.duration = this.audio_obj.duration;
        this.time = '00';
        this.render();
        this.addEvents();
    };

    this.render = function() {

        // source controller
        this.source_ctrl_el = new Element('div.source-ctrl.fa.fa-play');
        this.source_ctrl_button = new Element('div.source-ctrl-container')
            .adopt(this.source_ctrl_el);

        // time info
        this.time_current_el = new Element('span.time-current');
        this.time_duration_el = new Element('span.time-duration');
        var time_info = new Element('div.time-info')
            .adopt(
                this.time_current_el,
                new Element('span.time-current-duration-separator').set('text', ' / '),
                this.time_duration_el
            );

        // volume ctrl
        this.volume_slider = new Element('div.volume-slider');
        this.volume_ctrl = new Element('div.volume-ctrl')
            .adopt(
                new Element('span.fa.fa-2x.fa-volume-off'),
                this.volume_slider.adopt( new Element('div.volume-knob')),
                new Element('span.fa.fa-2x.fa-volume-up')
            );

        var container = new Element('div.player')
            .adopt(
                this.source_ctrl_button,
                new Element('div.volume-ctrl-container').adopt(this.volume_ctrl),
                time_info
            )
            .inject(this.audio_obj, 'after');
    };

    this.addEvents = function() {
        this.audio_obj.load();
        this.audio_obj.addEventListener('loadeddata', function() { 
            this.time_duration_el.set('text', this.toHHMMSS(this.audio_obj.duration));
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this));
        this.source_ctrl_button.addEvent('click', this.sourceCtrlAction.bind(this));

        new Slider(this.volume_slider, this.volume_slider.getElement('.volume-knob'), {
            range: [0, 100],
            initialStep: this.audio_obj.volume * 100,
            onChange: function(value){
                this.audio_obj.volume = value/100;
            }.bind(this)
        });
    };

    this.sourceCtrlAction = function() {
        if(this.status == 'pause') {
            this.play();
        }
        else {
            this.pause();
        }
    };

    this.toHHMMSS = function(s) {
        var sec_num = parseInt(s, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if(hours   < 10) { hours   = "0" + hours; }
        if(minutes < 10) { minutes = "0" + minutes; }
        if(seconds < 10) { seconds = "0" + seconds; }

        var time = (hours == '00' ? '' : hours + ':') + minutes + ':' + seconds;

        return time;
    }

    this.play = function() {
        this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        this.time_ti = setInterval(function() {
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this), 1000);
        this.source_ctrl_el.removeClass('fa-play').addClass('fa-pause');
        this.audio_obj.play();
        this.status = 'play';
    };

    this.pause = function() {
        clearInterval(this.time_ti);
        this.source_ctrl_el.removeClass('fa-pause').addClass('fa-play');
        this.audio_obj.pause();
        this.status = 'pause';
    };

}

var player = new Player('player');
player.init();

</script>

<hujan>
<script>
      var DAMPING = 1.002,
    GRAVITY = 0.2,
    MAXAGE = 200,
    RAINCOLOR = "rgba(255,255,255,0.4)";

function Rain(x, y) {
  this.x = this.oldX = x;
  this.y = this.oldY = y;
  this.age = 0; //added age
}

Rain.prototype.integrate = function() {
  var velocity = this.getVelocity();
  this.oldX = this.x;
  this.oldY = this.y;
  this.x += velocity.x * DAMPING;
  this.y += velocity.y * DAMPING;
};

Rain.prototype.getVelocity = function() {
  return {
    x: this.x - this.oldX,
    y: this.y - this.oldY
  };
};

Rain.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  this.age++;
};

Rain.prototype.bounce = function() {
  if (this.y > height) {
    var velocity = this.getVelocity();
    this.oldY = height;
    this.y = this.oldY - velocity.y * Math.random()*0.2;
  }
};

//remove items if age is greater than MAXAGE threshold
Rain.prototype.remove = function(arr) {
  if (this.age > MAXAGE) {
    arr.splice(arr.indexOf(this), 1);
  }
};

Rain.prototype.draw = function() {
  ctx.strokeStyle = RAINCOLOR;
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(this.oldX, this.oldY);
  ctx.lineTo(this.x, this.y);
  ctx.stroke();
};

var display = document.getElementById('display');
var ctx = display.getContext('2d');
var drops = [];
var width = display.width = window.innerWidth;
var height = display.height = window.innerHeight;

ctx.globalCompositeOperation = 'overlay';
requestAnimationFrame(frame);

function frame() {
  requestAnimationFrame(frame);
  ctx.clearRect(0, 0, width, height);
  for (var j = 0; j < 5; j++) {
    var drop = new Rain(width * 0.5, 0);
    drop.move(Math.random() * 8 - 4, -10);
    drops.push(drop);
  }
  for (var i = 0; i < drops.length; i++) {
    drops[i].integrate();
    drops[i].move(0, GRAVITY);
    drops[i].bounce();
    drops[i].draw();
    drops[i].remove(drops);//killing old Rains
  }
}
      
    </script>

Penjelasan : Terapkan kode sesuai kelompok Ganti Link Lagu Audio Player Mp3 Sesuai keinginan

Edited by. Myscript2010
Sources by. Lorin Tackett
Code Soundboard Mp3 by. Nodws

DEMOSHOW

If you want to directly copy and paste you canDownload Here Cloud & Rain Audio Mp3

Category: Cloud Animation Runs with Rain & Audio Player

Tweet