Memasang kode Cloud Animation Runs
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
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
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="Cloud-Animation-styles">
/* What do you have to be scared of?
*
* Lorin Tackett, July 2013
* http://lorintackett.com
*/
@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: #cccccc;
}
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;
}
</style>
<h1 class='quote'>
<span>You’re a ghost driving a meat-coated skeleton made from stardust.</span>
<span>... what do you have to be scared of?</span>
</h1>
<section class='info'>
<dl>
<dt>quote by</dt>
<dd>
<a href='https://twitter.com/Porkbeard/status/296920453442842625'>@porkbeard</a>
</dd>
<dt>designed by</dt>
<dd>
<a href='http://twitter.com/ltackett'>@ltackett</a>
</dd>
</dl>
<p>Need a front-end developer?
<a href='http://resume.lorintackett.com'>I am available for limited projects.</a></p>
</section>
<div class='clouds'>
<div class='clouds-1'></div>
<div class='clouds-2'></div>
<div class='clouds-3'></div>
</div>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script> (function() { }).call(this); </script>
Penjelasan :
Tambahkan code music audio player mp3 jika diperlukan. Copy code berikut
Tambahkan code music audio player mp3 jika diperlukan. Copy code berikut
<link rel='stylesheet prefetch' href=' //netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
Pastekan diatas code :
<style class="Cloud-Animation-styles">
Kemudian copy code berikut :
/* Requires Musik */
.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: #000;
background: rgb(255,255,255); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.player .source-ctrl-container:hover {
background: rgb(246,246,246); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%, rgba(225,225,225,1) 49%, rgba(241,241,241,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(246,246,246,1)), color-stop(49%,rgba(225,225,225,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.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: #666;
margin: 0 10px;
position: relative;
top: -10px;
}
.player .volume-knob {
background: #fff;
width: 13px;
height: 13px;
border-radius: 50%;
position: relative;
top: -6px;
}
Pastekan dibawah code :
.clouds-1, .clouds-2, .clouds-3 { background-repeat: repeat-x; position: absolute; top: 0; right: 0; left: 0; height: 500px; }
Selanjutnya copy code berikut :
<audio id="player"> <source src="http://radio.freeshoutcast.com:18714/;stream.ogg" type="audio/ogg"> <source src="https://sites.google.com/site/pelajaranku1/mp3ku/Cranberries-Dream-Mys2010.mp3" type="audio/mpeg"> </audio>
Pastekan dibawah code :
</style>
Untuk Javascript copy code berikut :
<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>
<script>
"use strict";
/**
* Requires mootools core and mootools more Slider
*/
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>
Pastekan dibawah code :
<script> (function() { }).call(this); </script>
Klik pratinjau untuk melihat hasil dan klik publis atau perbarui selesai
Edited by. Myscript2010
Sources by. Lorin Tackett
Sources by. Lorin Tackett
If you want to directly copy and paste you canDownload Here Cloud Animation Runs
