Christmas tree and Xmas Lights

Memasang kode Christmas tree and Xmas Lights
Code ini menggunakan CSS dan HTML serta Js. 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

<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: 50px;
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: #222;
border-top: 2px solid #f0f;
z-index: 9999;
} 

/*led*/
body {
  background: #151515;
}

#lights {
  position: bottom;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
}
#lights .led {
  position: relative;
  float: left;
  width: 10px;
  height: 15px;
  margin: auto;
  border-radius: 5px 5px 100% 100%;
  animation: glow 0.5s linear infinite;
}
#lights .led:before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 0 0 3px 3px;
  background: #333;
  box-shadow: inset 0 -3px 3px rgba(255, 255, 255, 0.1);
}
#lights .led:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px 5px 100% 100%;
  box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.15);
}
#lights .led:nth-child(1) {
  animation-delay: 0.1s;
}
#lights .led:nth-child(2) {
  animation-delay: 0.2s;
}
#lights .led:nth-child(3) {
  animation-delay: 0.3s;
}
#lights .led:nth-child(4) {
  animation-delay: 0.4s;
}
#lights .led:nth-child(5) {
  animation-delay: 0.5s;
}
#lights .led:nth-child(6) {
  animation-delay: 0.6s;
}
#lights .led:nth-child(7) {
  animation-delay: 0.7s;
}
#lights .led:nth-child(8) {
  animation-delay: 0.8s;
}
#lights .led:nth-child(9) {
  animation-delay: 0.9s;
}
#lights .led:nth-child(10) {
  animation-delay: 1s;
}
#lights .led:nth-child(11) {
  animation-delay: 1.1s;
}
#lights .led:nth-child(12) {
  animation-delay: 1.2s;
}
#lights .led:nth-child(13) {
  animation-delay: 1.3s;
}
#lights .led:nth-child(14) {
  animation-delay: 1.4s;
}
#lights .led:nth-child(15) {
  animation-delay: 1.5s;
}
#lights .led:nth-child(16) {
  animation-delay: 1.6s;
}
#lights .led:nth-child(17) {
  animation-delay: 1.7s;
}
#lights .led:nth-child(18) {
  animation-delay: 1.8s;
}
#lights .led:nth-child(19) {
  animation-delay: 1.9s;
}
#lights .led:nth-child(20) {
  animation-delay: 2s;
}

@keyframes glow {
  50% {
    background: transparent;
    box-shadow: 0 0 10px transparent;
  }
}

.frame {
  
  font-size: 2em;
  text-shadow: 1px 1px black;
  color: green;
  text-align: center;
}
.frame canvas {
  display: block:center;
  padding: 15px 30px 15px 30px;
  background-color: #151515;
}

/* Requires font-awesome */
.player {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 210px;
    height: 100px;
    background: ##;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    color: #00008B;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    height: 50px;
    width: 50px;
    background: ##;
    border-radius: 50%;
    float: left;
    position: relative; cursor: pointer;
    color: #FF0000;}
.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: #8A2BE2;
}
.player .volume-slider {
    display: inline-block;
    height: 2px;
    width: 50px;
    background: #0000FF;
    margin: 0 10px;
    position: relative;
    top: -10px;
}.player .volume-knob {
    background: #8A2BE2;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
}

<div id='lights'>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
<div class='led'>
</div>
</div>

<div class='frame'>
<canvas id='tree'></canvas>
<div align="center">
<audio id="player">
<source src="https://sites.google.com/site/gg1cover/music/Angels-We-Have-Heard-On-High-Mys2010s.mp3" type="audio/mpeg">
</audio>
</div>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<p>
Cibeber Cimahi</p>
<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>


<div align="center">
<header> 
<div class="Top Title Header">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html"title="Myscript2010s"><font size="1" color=" #CD5C5C"face="arial"> <b>EXCHANGE PICTURES</b></a>
</div>
</header>

<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>

<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>
/**
* 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>

<led>
<script src='//dmnbd74khqk5q.cloudfront.net/assets/common/stopExecutionOnTimeout.js?t=1'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

<script>$('.led').each(function (i) {
    var c = 50 * i;
    $(this).css({
        backgroundColor: 'hsl(' + c + ',75%,50%)',
        boxShadow: '0 0 10px hsl(' + c + ',75%,50%)'
    });
});
 
</script>



<xmast>
<script src='//dmnbd74khqk5q.cloudfront.net/assets/common/stopExecutionOnTimeout.js?t=1'></script>
<script>(function() {
  var SwirlNode, Tree, TreeSwirl, height, swirls, width,
    bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  width = 250;

  height = 300;

  swirls = [
    {
      color: 'red',
      nodes: 50,
      speed: 3,
      radius: 2
    }, {
      color: 'green',
      nodes: 200,
      speed: 3,
      radius: 1.5
    }, {
      color: 'blue',
      nodes: 50,
      speed: 3,
      radius: 2
    }, {
      color: 'green',
      nodes: 200,
      speed: 3,
      radius: 1.5
    }
  ];

  Tree = (function() {
    function Tree(w, h, swirls) {
      this.run = bind(this.run, this);
      var i;
      this.width = w;
      this.height = h;
      this.canvas = document.getElementById('tree');
      this.context = this.canvas.getContext('2d');
      this.canvas.width = w;
      this.canvas.height = h;
      this.swirls = (function() {
        var j, ref, results;
        results = [];
        for (i = j = 0, ref = swirls.length; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {
          results.push(new TreeSwirl(this, swirls[i], i / swirls.length));
        }
        return results;
      }).call(this);
      this.run();
    }

    Tree.prototype.run = function(t) {
      if (t == null) {
        t = 0;
      }
      window.requestAnimationFrame(this.run);
      return this.draw(t);
    };

    Tree.prototype.draw = function(t) {
      var j, k, len, len1, ref, ref1, results, s;
      this.context.clearRect(0, 0, this.width, this.height);
      ref = this.swirls;
      for (j = 0, len = ref.length; j < len; j++) {
        s = ref[j];
        s.drawBack(t);
      }
      ref1 = this.swirls;
      results = [];
      for (k = 0, len1 = ref1.length; k < len1; k++) {
        s = ref1[k];
        results.push(s.drawFront(t));
      }
      return results;
    };

    return Tree;

  })();

  TreeSwirl = (function() {
    function TreeSwirl(tree, s, offset) {
      var i;
      this.tree = tree;
      this.offset = offset;
      this.color = s.color;
      this.speed = s.speed;
      this.radius = s.radius;
      this.nodes = (function() {
        var j, ref, results;
        results = [];
        for (i = j = 0, ref = s.nodes; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {
          results.push(new SwirlNode(this, i / s.nodes));
        }
        return results;
      }).call(this);
    }

    TreeSwirl.prototype.drawBack = function(t) {
      var j, len, n, ref, results;
      ref = this.nodes;
      results = [];
      for (j = 0, len = ref.length; j < len; j++) {
        n = ref[j];
        if (n.inBack(t)) {
          results.push(n.draw(t));
        }
      }
      return results;
    };

    TreeSwirl.prototype.drawFront = function(t) {
      var j, len, n, ref, results;
      ref = this.nodes;
      results = [];
      for (j = 0, len = ref.length; j < len; j++) {
        n = ref[j];
        if (n.inFront(t)) {
          results.push(n.draw(t));
        }
      }
      return results;
    };

    return TreeSwirl;

  })();

  SwirlNode = (function() {
    function SwirlNode(swirl, offset) {
      this.swirl = swirl;
      this.offset = offset;
    }

    SwirlNode.prototype.yPos = function() {
      var d, od;
      d = this.t / 1000 * this.swirl.speed;
      od = d + this.offset * this.swirl.tree.height;
      return (this.swirl.tree.height - od % this.swirl.tree.height) % this.swirl.tree.height;
    };

    SwirlNode.prototype.xDeg = function() {
      return this.yPos() * 5 + 360 * this.swirl.offset;
    };

    SwirlNode.prototype.xRad = function() {
      return this.xDeg() * Math.PI / 180;
    };
    SwirlNode.prototype.xPos = function() {
      return Math.sin(this.xRad()) * this.swirl.tree.width * this.yPos() / this.swirl.tree.height / 2 + this.swirl.tree.width / 2;
    };
    SwirlNode.prototype.shade = function() {
      return (Math.cos(this.xRad()) + 1) / 3;
    };
    SwirlNode.prototype.inBack = function(t) {
      this.t = t;
      return Math.cos(this.xRad()) > 0;
    };
    SwirlNode.prototype.inFront = function(t) {
      this.t = t;
      return !this.inBack(t);
    };
    SwirlNode.prototype.draw = function(t) {
      this.t = t - 180;
      this.drawNode(this.swirl.radius * 0.6, this.shade() + 0.4);
      this.t = t - 90;
      this.drawNode(this.swirl.radius * 0.8, this.shade() + 0.2);
      this.t = t;
      return this.drawNode(this.swirl.radius, this.shade());
    };
    SwirlNode.prototype.drawNode = function(size, shade) {
      var c;
      c = this.swirl.tree.context;
      c.beginPath();
      c.arc(this.xPos(), this.yPos(), size, 0, 2 * Math.PI);
      c.fillStyle = this.swirl.color;
      c.fill();
      c.fillStyle = "rgba(0,0,0," + shade + ")";
      return c.fill();
    };
    return SwirlNode;
  })();
  new Tree(width, height, swirls);
}).call(this);
</script>

Xmas Lights by. W Wolf Wizard
Christmas tree by. Jeremy Brenner

Audio Code by. Cartoonistarif
Code Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Tree and Xmas Lights

Category: Christmas tree and Xmas Lights