Jquery Countdown Spesial Happy New Year

What's Up Genk's selamat Hari Natal ⛄ dan Tahun Baru Ya 🙅 . Nah pada malam yang sangat berbahagia ini saya mau share ini nih jquery countdown Happy New Year 🕛. oke langsung saja guys keburu jam 12 hehehe.

Cara Pasang

Buat page dengan judul Happy New Year.
lalu tambahkan kode ini pada page tersebut.

<style scoped=''>
#happynew{text-align:center;font-size:60px;color:#fff}
#backyear{font-family:Roboto;background-image:-webkit-gradient(radial,50% 50%,0,50% 50%,100,color-stop(0%,#374566),color-stop(100%,#010203));background-image:-webkit-radial-gradient(#374566,#010203);background-image:-moz-radial-gradient(#374566,#010203);background-image:-o-radial-gradient(#374566,#010203);background-image:radial-gradient(#374566,#010203);background-attachment:initial;display:block;background-repeat:no-repeat;background-size:cover;position:relative;overflow:hidden}
#backyear #horrayyy span{text-transform:uppercase}
#horrayyy{width:800px;height:100%;padding:10px;margin:0 auto;position:relative}
.balloon{width:738px;margin:0 auto;padding-top:30px;position:relative}
.balloon > div{width:104px;height:140px;background:rgba(182,15,97,0.9);border-radius:0;border-radius:80% 80% 80% 80%;margin:0 auto;position:absolute;padding:10px;box-shadow:inset 17px 7px 10px rgba(182,15,97,0.9);-webkit-transform-origin:bottom center}
.balloon > div:nth-child(1){background:rgba(182,15,97,0.9);left:0;box-shadow:inset 10px 10px 10px rgba(135,11,72,0.9);-webkit-animation:balloon1 6s ease-in-out infinite;-moz-animation:balloon1 6s ease-in-out infinite;-o-animation:balloon1 6s ease-in-out infinite;animation:balloon1 6s ease-in-out infinite}
.balloon > div:nth-child(1):before{color:rgba(182,15,97,0.9)}
.balloon > div:nth-child(2){background:rgba(242,112,45,0.9);left:120px;box-shadow:inset 10px 10px 10px rgba(222,85,14,0.9);-webkit-animation:balloon2 6s ease-in-out infinite;-moz-animation:balloon2 6s ease-in-out infinite;-o-animation:balloon2 6s ease-in-out infinite;animation:balloon2 6s ease-in-out infinite}
.balloon > div:nth-child(2):before{color:rgba(242,112,45,0.9)}
.balloon > div:nth-child(3){background:rgba(45,181,167,0.9);left:240px;box-shadow:inset 10px 10px 10px rgba(35,140,129,0.9);-webkit-animation:balloon4 6s ease-in-out infinite;-moz-animation:balloon4 6s ease-in-out infinite;-o-animation:balloon4 6s ease-in-out infinite;animation:balloon4 6s ease-in-out infinite}
.balloon > div:nth-child(3):before{color:rgba(45,181,167,0.9)}
.balloon > div:nth-child(4){background:rgba(190,61,244,0.9);left:360px;box-shadow:inset 10px 10px 10px rgba(173,14,240,0.9);-webkit-animation:balloon1 5s ease-in-out infinite;-moz-animation:balloon1 5s ease-in-out infinite;-o-animation:balloon1 5s ease-in-out infinite;animation:balloon1 5s ease-in-out infinite}
.balloon > div:nth-child(4):before{color:rgba(190,61,244,0.9)}
.balloon > div:nth-child(5){background:rgba(180,224,67,0.9);left:480px;box-shadow:inset 10px 10px 10px rgba(158,206,34,0.9);-webkit-animation:balloon3 5s ease-in-out infinite;-moz-animation:balloon3 5s ease-in-out infinite;-o-animation:balloon3 5s ease-in-out infinite;animation:balloon3 5s ease-in-out infinite}
.balloon > div:nth-child(5):before{color:rgba(180,224,67,0.9)}
.balloon > div:nth-child(6){background:rgba(242,194,58,0.9);left:600px;box-shadow:inset 10px 10px 10px rgba(234,177,15,0.9);-webkit-animation:balloon2 3s ease-in-out infinite;-moz-animation:balloon2 3s ease-in-out infinite;-o-animation:balloon2 3s ease-in-out infinite;animation:balloon2 3s ease-in-out infinite}
.balloon > div:nth-child(6):before{color:rgba(242,194,58,0.9)}
.balloon > div:before{color:rgba(182,15,97,0.9);position:absolute;bottom:-11px;left:52px;content:"▲";font-size:1em}
span{font-size:4.8em;color:white;position:relative;top:30px;left:50%;margin-left:-27px}
.balloon > div:nth-child(7){background:rgba(242,194,58,0.9);left:600px;box-shadow:inset 10px 10px 10px rgba(234,177,15,0.9);-webkit-animation:balloon2 3s ease-in-out infinite;-moz-animation:balloon2 3s ease-in-out infinite;-o-animation:balloon2 3s ease-in-out infinite;animation:balloon2 3s ease-in-out infinite}
.balloon > div:nth-child(7):before{color:rgba(242,194,58,0.9)}
.balloon > div:before{color:rgba(182,15,97,0.9);position:absolute;bottom:-11px;left:52px;content:"▲";font-size:1em}
span{font-size:4.8em;color:white;position:relative;top:30px;left:50%;margin-left:-27px}
.balloon > div:nth-child(8){background:rgba(242,194,58,0.9);left:600px;box-shadow:inset 10px 10px 10px rgba(234,177,15,0.9);-webkit-animation:balloon2 3s ease-in-out infinite;-moz-animation:balloon2 3s ease-in-out infinite;-o-animation:balloon2 3s ease-in-out infinite;animation:balloon2 3s ease-in-out infinite}
.balloon > div:nth-child(8):before{color:rgba(242,194,58,0.9)}
.balloon > div:before{color:rgba(182,15,97,0.9);position:absolute;bottom:-11px;left:52px;content:"▲";font-size:1em}
span{font-size:4.8em;color:white;position:relative;top:30px;left:50%;margin-left:-27px}
.balloon > div:nth-child(9){background:rgba(242,194,58,0.9);left:600px;box-shadow:inset 10px 10px 10px rgba(234,177,15,0.9);-webkit-animation:balloon2 3s ease-in-out infinite;-moz-animation:balloon2 3s ease-in-out infinite;-o-animation:balloon2 3s ease-in-out infinite;animation:balloon2 3s ease-in-out infinite}
.balloon > div:nth-child(9):before{color:rgba(242,194,58,0.9)}
.balloon > div:before{color:rgba(182,15,97,0.9);position:absolute;bottom:-11px;left:52px;content:"▲";font-size:1em}
span{font-size:4.8em;color:white;position:relative;top:30px;left:50%;margin-left:-27px}
.balloon > div:nth-child(10){background:rgba(242,194,58,0.9);left:600px;box-shadow:inset 10px 10px 10px rgba(234,177,15,0.9);-webkit-animation:balloon2 3s ease-in-out infinite;-moz-animation:balloon2 3s ease-in-out infinite;-o-animation:balloon2 3s ease-in-out infinite;animation:balloon2 3s ease-in-out infinite}
.balloon > div:nth-child(10):before{color:rgba(242,194,58,0.9)}
.balloon > div:before{color:rgba(182,15,97,0.9);position:absolute;bottom:-11px;left:52px;content:"▲";font-size:1em}
span{font-size:4.8em;color:white;position:relative;top:30px;left:50%;margin-left:-27px}
.balloon > div:nth-child(11){background:rgba(242,194,58,0.9);left:600px;box-shadow:inset 10px 10px 10px rgba(234,177,15,0.9);-webkit-animation:balloon2 3s ease-in-out infinite;-moz-animation:balloon2 3s ease-in-out infinite;-o-animation:balloon2 3s ease-in-out infinite;animation:balloon2 3s ease-in-out infinite}
.balloon > div:nth-child(11):before{color:rgba(242,194,58,0.9)}
.balloon > div:before{color:rgba(182,15,97,0.9);position:absolute;bottom:-11px;left:52px;content:"▲";font-size:1em}
span{font-size:4.8em;color:white;position:relative;top:30px;left:50%;margin-left:-27px}
.balloon > div:nth-child(12){background:rgba(242,194,58,0.9);left:600px;box-shadow:inset 10px 10px 10px rgba(234,177,15,0.9);-webkit-animation:balloon2 3s ease-in-out infinite;-moz-animation:balloon2 3s ease-in-out infinite;-o-animation:balloon2 3s ease-in-out infinite;animation:balloon2 3s ease-in-out infinite}
.balloon > div:nth-child(12):before{color:rgba(242,194,58,0.9)}
.balloon > div:before{color:rgba(182,15,97,0.9);position:absolute;bottom:-11px;left:52px;content:"▲";font-size:1em}
span{font-size:4.8em;color:white;position:relative;top:30px;left:50%;margin-left:-27px}
.balloon > div:nth-child(13){background:rgba(242,194,58,0.9);left:600px;box-shadow:inset 10px 10px 10px rgba(234,177,15,0.9);-webkit-animation:balloon2 3s ease-in-out infinite;-moz-animation:balloon2 3s ease-in-out infinite;-o-animation:balloon2 3s ease-in-out infinite;animation:balloon2 3s ease-in-out infinite}
.balloon > div:nth-child(13):before{color:rgba(242,194,58,0.9)}
.balloon > div:before{color:rgba(182,15,97,0.9);position:absolute;bottom:-11px;left:52px;content:"▲";font-size:1em}
span{font-size:4.8em;color:white;position:relative;top:30px;left:50%;margin-left:-27px}
.balloon > div:nth-child(14){background:rgba(242,194,58,0.9);left:600px;box-shadow:inset 10px 10px 10px rgba(234,177,15,0.9);-webkit-animation:balloon2 3s ease-in-out infinite;-moz-animation:balloon2 3s ease-in-out infinite;-o-animation:balloon2 3s ease-in-out infinite;animation:balloon2 3s ease-in-out infinite}
.balloon > div:nth-child(14):before{color:rgba(242,194,58,0.9)}
.balloon > div:before{color:rgba(182,15,97,0.9);position:absolute;bottom:-11px;left:52px;content:"▲";font-size:1em}
span{font-size:4.8em;color:white;position:relative;top:30px;left:50%;margin-left:-27px}
.balloon > div:nth-child(15){background:rgba(242,194,58,0.9);left:600px;box-shadow:inset 10px 10px 10px rgba(234,177,15,0.9);-webkit-animation:balloon2 3s ease-in-out infinite;-moz-animation:balloon2 3s ease-in-out infinite;-o-animation:balloon2 3s ease-in-out infinite;animation:balloon2 3s ease-in-out infinite}
.balloon > div:nth-child(15):before{color:rgba(242,194,58,0.9)}
.balloon > div:before{color:rgba(182,15,97,0.9);position:absolute;bottom:-11px;left:52px;content:"▲";font-size:1em}
span{font-size:4.8em;color:white;position:relative;top:30px;left:50%;margin-left:-27px}
/*BALLOON 1 4*/
@-webkit-keyframes balloon1{0%,100%{-webkit-transform:translateY(0) rotate(-6deg)}50%{-webkit-transform:translateY(-20px) rotate(8deg)}}
@-moz-keyframes balloon1{0%,100%{-moz-transform:translateY(0) rotate(-6deg)}50%{-moz-transform:translateY(-20px) rotate(8deg)}}
@-o-keyframes balloon1{0%,100%{-o-transform:translateY(0) rotate(-6deg)}50%{-o-transform:translateY(-20px) rotate(8deg)}}
@keyframes balloon1{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-20px) rotate(8deg)}}
/* BAllOON 2 5*/
@-webkit-keyframes balloon2{0%,100%{-webkit-transform:translateY(0) rotate(6eg)}50%{-webkit-transform:translateY(-30px) rotate(-8deg)}}
@-moz-keyframes balloon2{0%,100%{-moz-transform:translateY(0) rotate(6deg)}50%{-moz-transform:translateY(-30px) rotate(-8deg)}}
@-o-keyframes balloon2{0%,100%{-o-transform:translateY(0) rotate(6deg)}50%{-o-transform:translateY(-30px) rotate(-8deg)}}
@keyframes balloon2{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(-30px) rotate(-8deg)}}
/* BAllOON 0*/
@-webkit-keyframes balloon3{0%,100%{-webkit-transform:translate(0,-10px) rotate(6eg)}50%{-webkit-transform:translate(-20px,30px) rotate(-8deg)}}
@-moz-keyframes balloon3{0%,100%{-moz-transform:translate(0,-10px) rotate(6eg)}50%{-moz-transform:translate(-20px,30px) rotate(-8deg)}}
@-o-keyframes balloon3{0%,100%{-o-transform:translate(0,-10px) rotate(6eg)}50%{-o-transform:translate(-20px,30px) rotate(-8deg)}}
@keyframes balloon3{0%,100%{transform:translate(0,-10px) rotate(6eg)}50%{transform:translate(-20px,30px) rotate(-8deg)}}
/* BAllOON 3*/
@-webkit-keyframes balloon4{0%,100%{-webkit-transform:translate(10px,-10px) rotate(-8eg)}50%{-webkit-transform:translate(-15px,20px) rotate(10deg)}}
@-moz-keyframes balloon4{0%,100%{-moz-transform:translate(10px,-10px) rotate(-8eg)}50%{-moz-transform:translate(-15px,10px) rotate(10deg)}}
@-o-keyframes balloon4{0%,100%{-o-transform:translate(10px,-10px) rotate(-8eg)}50%{-o-transform:translate(-15px,10px) rotate(10deg)}}
@keyframes balloon4{0%,100%{transform:translate(10px,-10px) rotate(-8eg)}50%{transform:translate(-15px,10px) rotate(10deg)}}
</style>
<div id="backyear">
        <div id="horrayyy">
            <div class="balloon">
                <div><span>H</span></div>
                <div><span>A</span></div>
                <div><span>P</span></div>
                <div><span>P</span></div>
                <div><span>Y</span></div>
            </div>
            <br/><br/><br/><br/><br/><br/>
            <div class="balloon">
                <div><span>N</span></div>
                <div><span>E</span></div>
                <div><span>W</span></div>
        </div>
            <br/><br/><br/><br/><br/><br/>
            <div class="balloon">
                <div><span>Y</span></div>
                <div><span>E</span></div>
                <div><span>A</span></div>
                <div><span>R</span></div>
                <div><span>!</span></div>
            </div>
        </div>
            <br/><br/><br/><br/><br/>
<p id="happynew"></p>
</div>

<script>
var HappyNew = new Date("Jan 1, 2018 00:00:00").getTime();
var x = setInterval(function() {
    var now = new Date().getTime();
    var distance = HappyNew - now;
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    document.getElementById("happynew").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("happynew").innerHTML = "Happy New Year !";
        $('#backyear').fireworks();
    }
}, 1000);
(function($){var MAX_ROCKETS=5,MAX_PARTICLES=500;var FUNCTIONS={'init':function(element){var jqe=$(element);if(jqe.data('fireworks_data')!==undefined){console.log('Looks like this element is already inited!');return}
var canvas=document.createElement('canvas'),canvas_buffer=document.createElement('canvas'),data={'element':element,'canvas':canvas,'context':canvas.getContext('2d'),'canvas_buffer':canvas_buffer,'context_buffer':canvas_buffer.getContext('2d'),'particles':[],'rockets':[]};if(jqe.css('position')==='static'){element.style.position='relative'}
element.appendChild(canvas);canvas.style.position='absolute';canvas.style.top='0px';canvas.style.bottom='0px';canvas.style.left='0px';canvas.style.right='0px';data.interval=setInterval(loop.bind(this,data),1000/50);jqe.data('fireworks_data',data)},'destroy':function(element){var jqe=$(element);if(jqe.data('fireworks_data')===undefined){console.log('Looks like this element is not yet inited!');return}
var data=jqe.data('fireworks_data');jqe.removeData('fireworks_data');clearInterval(data.interval);data.canvas.remove();data.element.style.position=''}};$.fn.fireworks=function(action){if(!action){action='init'}
this.each(function(){FUNCTIONS[action](this)});return this};function launch(data){if(data.rockets.length<MAX_ROCKETS){var rocket=new Rocket(data);data.rockets.push(rocket)}}
function loop(data){launch(data);if(data.canvas_width!=data.element.offsetWidth){data.canvas_width=data.canvas.width=data.canvas_buffer.width=data.element.offsetWidth}
if(data.canvas_height!=data.element.offsetHeight){data.canvas_height=data.canvas.height=data.canvas_buffer.height=data.element.offsetHeight}
data.context_buffer.clearRect(0,0,data.canvas.width,data.canvas.height);data.context_buffer.globalAlpha=0.9;data.context_buffer.drawImage(data.canvas,0,0);data.context.clearRect(0,0,data.canvas.width,data.canvas.height);data.context.drawImage(data.canvas_buffer,0,0);var existingRockets=[];data.rockets.forEach(function(rocket){rocket.update();rocket.render(data.context);var randomChance=rocket.pos.y<(data.canvas.height*2/3)?(Math.random()*100<=1):!1;if(rocket.pos.y<data.canvas.height/5||rocket.vel.y>=0||randomChance){rocket.explode(data)}else{existingRockets.push(rocket)}});data.rockets=existingRockets;var existingParticles=[];data.particles.forEach(function(particle){particle.update();if(particle.exists()){particle.render(data.context);existingParticles.push(particle)}});data.particles=existingParticles;while(data.particles.length>MAX_PARTICLES){data.particles.shift()}}
function Particle(pos){this.pos={x:pos?pos.x:0,y:pos?pos.y:0};this.vel={x:0,y:0};this.shrink=.97;this.size=2;this.resistance=1;this.gravity=0;this.flick=!1;this.alpha=1;this.fade=0;this.color=0}
Particle.prototype.update=function(){this.vel.x*=this.resistance;this.vel.y*=this.resistance;this.vel.y+=this.gravity;this.pos.x+=this.vel.x;this.pos.y+=this.vel.y;this.size*=this.shrink;this.alpha-=this.fade};Particle.prototype.render=function(c){if(!this.exists()){return}
c.save();c.globalCompositeOperation='lighter';var x=this.pos.x,y=this.pos.y,r=this.size/2;var gradient=c.createRadialGradient(x,y,0.1,x,y,r);gradient.addColorStop(0.1,"rgba(255,255,255,"+this.alpha+")");gradient.addColorStop(0.8,"hsla("+this.color+", 100%, 50%, "+this.alpha+")");gradient.addColorStop(1,"hsla("+this.color+", 100%, 50%, 0.1)");c.fillStyle=gradient;c.beginPath();c.arc(this.pos.x,this.pos.y,this.flick?Math.random()*this.size:this.size,0,Math.PI*2,!0);c.closePath();c.fill();c.restore()};Particle.prototype.exists=function(){return this.alpha>=0.1&&this.size>=1};function Rocket(data){Particle.apply(this,[{x:Math.random()*data.canvas.width*2/3+data.canvas.width/6,y:data.canvas.height}]);this.explosionColor=Math.floor(Math.random()*360/10)*10;this.vel.y=Math.random()*-3-4;this.vel.x=Math.random()*6-3;this.size=2;this.shrink=0.999;this.gravity=0.01}
Rocket.prototype=new Particle();Rocket.prototype.constructor=Rocket;Rocket.prototype.explode=function(data){var count=Math.random()*10+80;for(var i=0;i<count;i++){var particle=new Particle(this.pos);var angle=Math.random()*Math.PI*2;var speed=Math.cos(Math.random()*Math.PI/2)*15;particle.vel.x=Math.cos(angle)*speed;particle.vel.y=Math.sin(angle)*speed;particle.size=10;particle.gravity=0.2;particle.resistance=0.92;particle.shrink=Math.random()*0.05+0.93;particle.flick=!0;particle.color=this.explosionColor;data.particles.push(particle)}};Rocket.prototype.render=function(c){if(!this.exists()){return}
c.save();c.globalCompositeOperation='lighter';var x=this.pos.x,y=this.pos.y,r=this.size/2;var gradient=c.createRadialGradient(x,y,0.1,x,y,r);gradient.addColorStop(0.1,"rgba(255, 255, 255 ,"+this.alpha+")");gradient.addColorStop(0.2,"rgba(255, 180, 0, "+this.alpha+")");c.fillStyle=gradient;c.beginPath();c.arc(this.pos.x,this.pos.y,this.flick?Math.random()*this.size/2+this.size/2:this.size,0,Math.PI*2,!0);c.closePath();c.fill();c.restore()}}(jQuery))
</script>

Lalu Publish

RESULT

untuk lebih mantap hilangkan header dan footer agar tampilan countdown lebih luas. Dengan menggunakan css dengan style display:none di page tersebut