Menjelang Tahun Baru

12/05/2014
Menjelang Tahun Baru


HTML simpan dimana saja bebas (di bawah kode <body> atau di atas kode </body>)

<title>Kembang Api!</title>

<div class="tahun-baru" id="tahun-baru">
    <h2>Selamat</h2>
    <h2>Tahun Baru</h2>
    <h2>2015</h2>   
   </div>

CSS simpan sebelum kode </style>

body {
    background-color: #000000;
    margin: 0px;
    overflow: hidden;
}

.tahun-baru h2 {
 font-family: 'Dosis', 'Lato', sans-serif;
 font-size: 70px;
 font-weight: 200;
 width: 100%;
 overflow: hidden;
 text-transform: uppercase;
 padding: 0;
 margin: 0;
 position: absolute;
 top: 0;
 left: 0;
 letter-spacing: 14px;
 text-align: center;
}

.tahun-baru h2,
.tahun-baru h2 > span {
 height: 100%;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 flex-direction: row;
 -webkit-box-pack: center;
 -moz-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -moz-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
}

.tahun-baru h2 > span {
 margin: 0 15px;
}

.tahun-baru h2 > span > span {
 display: inline-block;
 -webkit-perspective: 1000px;
 -moz-perspective: 1000px;
 perspective: 1000px;
 -webkit-transform-origin: 50% 50%;
 -moz-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
}

.tahun-baru h2 > span > span > span {
 display: inline-block;
 color: hsla(0,0%,0%,0);
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
 -webkit-animation: OpeningSequence 5.2s linear forwards;
 -moz-animation: OpeningSequence 5.2s linear forwards;
 animation: OpeningSequence 5.2s linear forwards;
}

.tahun-baru h2:nth-child(2) > span > span > span {
 -webkit-animation-delay: 10s;
 -moz-animation-delay: 10s;
 animation-delay: 10s;
}

.tahun-baru h2:nth-child(3) > span > span > span {
 -webkit-animation-delay: 20s;
 -moz-animation-delay: 20s;
 animation-delay: 20s;
}

@-webkit-keyframes OpeningSequence {
 0% {
  text-shadow: 0 0 50px #fff;
  letter-spacing: 80px;
  opacity: 0;
  -webkit-transform: rotateY(-90deg);
 }
 50% {
  text-shadow: 0 0 1px #fff;
  letter-spacing: 14px;
  opacity: 0.8;
  -webkit-transform: rotateY(0deg);
 }
 85% {
  text-shadow: 0 0 1px #fff;
  opacity: 0.8;
  -webkit-transform: rotateY(0deg) translateZ(100px);
 }
 100% {
  text-shadow: 0 0 10px #fff;
  opacity: 0;
  -webkit-transform: translateZ(130px);
  pointer-events: none;
 }
}

@-moz-keyframes OpeningSequence {
 0% {
  text-shadow: 0 0 50px #fff;
  letter-spacing: 80px;
  opacity: 0.2;
  -moz-transform: rotateY(-90deg);
 }
 50% {
  text-shadow: 0 0 1px #fff;
  letter-spacing: 14px;
  opacity: 0.8;
  -moz-transform: rotateY(0deg);
 }
 85% {
  text-shadow: 0 0 1px #fff;
  opacity: 0.8;
  -moz-transform: rotateY(0deg) translateZ(100px);
 }
 100% {
  text-shadow: 0 0 10px #fff;
  opacity: 0;
  -moz-transform: translateZ(130px);
  pointer-events: none;
 }
}

@keyframes OpeningSequence {
 0% {
  text-shadow: 0 0 50px #fff;
  letter-spacing: 80px;
  opacity: 0.2;
  transform: rotateY(-90deg);
 }
 50% {
  text-shadow: 0 0 1px #fff;
  letter-spacing: 14px;
  opacity: 0.8;
  transform: rotateY(0deg);
 }
 85% {
  text-shadow: 0 0 1px #fff;
  opacity: 0.8;
  transform: rotateY(0deg) translateZ(100px);
 }
 100% {
  text-shadow: 0 0 10px #fff;
  opacity: 0;
  transform: translateZ(130px);
  pointer-events: none;
 }
}

.tahun-baru h2:nth-child(8) > span > span > span {
 font-size: 30px;
 -webkit-animation: FadeIn 4s linear 40s forwards;
 -moz-animation: FadeIn 4s linear 40s forwards;
 animation: FadeIn 4s linear 40s forwards;
}

@-webkit-keyframes FadeIn { 
 0% {
  opacity: 0;
  text-shadow: 0 0 50px #fff;
 }
 100% {
  opacity: 0.8;
  text-shadow: 0 0 1px #fff;
 }
}

@-moz-keyframes FadeIn { 
 0% {
  opacity: 0;
  text-shadow: 0 0 50px #fff;
 }
 100% {
  opacity: 0.8;
  text-shadow: 0 0 1px #fff;
 }
}

@keyframes FadeIn { 
 0% {
  opacity: 0;
  text-shadow: 0 0 50px #fff;
 }
 100% {
  opacity: 0.8;
  text-shadow: 0 0 1px #fff;
 }
}

/* 2015 */
.tahun-baru h2:first-child .word3,
.tahun-baru h2:nth-child(2) .word2 {
 font-weight: 600;
}

JavaScript simpan sebelum </body>


<script type='text/javascript'>
//<![CDATA[
var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight,
    mousePos = {
        x: 400,
        y: 300
    },

    canvas = document.createElement('canvas'),
    context = canvas.getContext('2d'),
    particles = [],
    rockets = [],
    MAX_PARTICLES = 400,
    colorCode = 0;

$(document).ready(function() {
    document.body.appendChild(canvas);
    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;
    setInterval(launch, 800);
    setInterval(loop, 1000 / 50);
});

$(document).mousemove(function(e) {
    e.preventDefault();
    mousePos = {
        x: e.clientX,
        y: e.clientY
    };
});

$(document).mousedown(function(e) {
    for (var i = 0; i < 5; i++) {
        launchFrom(Math.random() * SCREEN_WIDTH * 2 / 3 + SCREEN_WIDTH / 6);
    }
});

function launch() {
    launchFrom(mousePos.x);
}

function launchFrom(x) {
    if (rockets.length < 10) {
        var rocket = new Rocket(x);
        rocket.explosionColor = Math.floor(Math.random() * 360 / 10) * 10;
        rocket.vel.y = Math.random() * -3 - 4;
        rocket.vel.x = Math.random() * 6 - 3;
        rocket.size = 8;
        rocket.shrink = 0.999;
        rocket.gravity = 0.01;
        rockets.push(rocket);
    }
}

function loop() {

    if (SCREEN_WIDTH != window.innerWidth) {
        canvas.width = SCREEN_WIDTH = window.innerWidth;
    }
    if (SCREEN_HEIGHT != window.innerHeight) {
        canvas.height = SCREEN_HEIGHT = window.innerHeight;
    }

    context.fillStyle = "rgba(0, 0, 0, 0.05)";
    context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

    var existingRockets = [];

    for (var i = 0; i < rockets.length; i++) {

        rockets[i].update();
        rockets[i].render(context);

        var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2));

        var randomChance = rockets[i].pos.y < (SCREEN_HEIGHT * 2 / 3) ? (Math.random() * 100 <= 1) : false;

        if (rockets[i].pos.y < SCREEN_HEIGHT / 5 || rockets[i].vel.y >= 0 || distance < 50 || randomChance) {
            rockets[i].explode();
        } else {
            existingRockets.push(rockets[i]);
        }
    }

    rockets = existingRockets;

    var existingParticles = [];

    for (var i = 0; i < particles.length; i++) {
        particles[i].update();

        if (particles[i].exists()) {
            particles[i].render(context);
            existingParticles.push(particles[i]);
        }
    }

    particles = existingParticles;

    while (particles.length > MAX_PARTICLES) {
        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 = false;

    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, true);
    c.closePath();
    c.fill();

    c.restore();
};

Particle.prototype.exists = function() {
    return this.alpha >= 0.1 && this.size >= 1;
};

function Rocket(x) {
    Particle.apply(this, [{
        x: x,
        y: SCREEN_HEIGHT}]);

    this.explosionColor = 0;
}

Rocket.prototype = new Particle();
Rocket.prototype.constructor = Rocket;

Rocket.prototype.explode = function() {
    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 = true;
        particle.color = this.explosionColor;

        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(1, "rgba(0, 0, 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, true);
    c.closePath();
    c.fill();

    c.restore();
};

//Pesan
$(document).ready(function() {
     
        $("#tahun-baru > h2").lettering('words').children("span").lettering().children("span").lettering(); 
    });
//]]>
</script>

External Script bisa disimpan sebelum </head> atau </body>

<script src='https://arlina-design.googlecode.com/svn/lettering.js' type='text/javascript'/>
<script src='https://arlina-design.googlecode.com/svn/modernizr.custom.js' type='text/javascript'/>


Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

19 comments

Genius Work...absolutely (y)

Balas

Thank you, I appreciate it

Balas

ngeletakkannya di mana ini mbak?

Balas

Meletakkan kode-kodenya dimana saja ya mba? :D

Balas

Sama kayak komentar diatas Mbak, saya bungung penempatannya. Bisa dijelaskan gak.
Maksud External Script itu gimana?

Balas

All : sudah ditambahkan keterangannya

Balas

Terima kasih Mbak, templatenya juga keren-keren. Jadi bingung mau pakai yang mana.

Balas

Dicobain ah...Tengkiu banget infonya gan!

Balas

itu nantinya akan muncul dimana mbak?

Balas

sangat luar biasa mba, lanjutkan (Y) AMAZING (Y)

Balas

maksudnya di page loader, homepage atau dimana? Kalau misal di seluruh page ada, apakah nantinya ini menjadi background atau apa?

Balas

Kok Saya coba pake kode ini di blog kosongan malah gak muncul ? Blank gitu ?
Ini linknya http://googleshape(dot)blogspot(dot)com

Balas

Ga ada javascriptnya, yang ini

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>

Balas

Oh iya Katou lupa masukin itu kode =(
Makasih udah ngingetin @@,

Balas

Silakan tambahkan komentar sesuai dengan topik, terima kasih.