Home CSS3 HTML JavaScript Menjelang Tahun Baru

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

17 comments

avatar
Arlina Admin
December 6, 2014 at 12:53 AM

Thank you, I appreciate it

Balas
avatar
Ubandi Share
December 7, 2014 at 8:09 AM

ngeletakkannya di mana ini mbak?

Balas
avatar
Unknown
December 8, 2014 at 2:15 PM

Meletakkan kode-kodenya dimana saja ya mba? :D

Balas
avatar
Haris
December 9, 2014 at 9:33 AM

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

Balas
avatar
Arlina Admin
December 12, 2014 at 6:07 PM

All : sudah ditambahkan keterangannya

Balas
avatar
Haris
December 13, 2014 at 9:06 AM

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

Balas
avatar
Arlina Admin
December 13, 2014 at 11:39 AM

hehe..iya sama2 mas

Balas
avatar
Unknown
December 17, 2014 at 1:07 AM

Dicobain ah...Tengkiu banget infonya gan!

Balas
avatar
Huda
December 17, 2014 at 4:11 PM

itu nantinya akan muncul dimana mbak?

Balas
avatar
Anonymous
December 18, 2014 at 5:45 PM

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

Balas
avatar
Huda
December 25, 2014 at 6:58 PM

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

Balas
avatar
Unknown
March 29, 2015 at 5:02 PM

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

Balas
avatar
Arlina Admin
March 29, 2015 at 9:10 PM

Ga ada javascriptnya, yang ini

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

Balas
avatar
Unknown
March 30, 2015 at 3:51 PM

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

Balas

Silakan tambahkan komentar sesuai dengan topik, terima kasih.

Subscribe to: Post Comments (Atom)