Friday, December 5, 2014

Menjelang Tahun Baru

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


Load disqus comments

19 comments

  1. Meletakkan kode-kodenya dimana saja ya mba? :D

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

    ReplyDelete
    Replies
    1. All : sudah ditambahkan keterangannya

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

      Delete
  3. Dicobain ah...Tengkiu banget infonya gan!

    ReplyDelete
  4. itu nantinya akan muncul dimana mbak?

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

      Delete
  5. sangat luar biasa mba, lanjutkan (Y) AMAZING (Y)

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

    ReplyDelete
    Replies
    1. Ga ada javascriptnya, yang ini

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

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

      Delete

Silakan tambahkan komentar sesuai dengan topik, terima kasih.