Home
JQUERY

Jquery Countdown Spesial Happy New Year

Jquery Countdown Spesial Happy New Year
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
thumbs

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


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

Getting Info...
#JQUERY

Post a Comment

Agiel Triono Comment Policy

Do not include spam link !
Please read our Comment Policy before commenting.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.