author Ahmad Muhardian

Animasi Gambar dengan Javascript

Saya sempat mengira, kalau animasi stiker di facebook menggunakan gif, ternyata bukan.

Animasi tersebut menggunakan javascript dengan mengubah posisi background.

Coba saja klik kanan pada stikernya, kemudian pilih inspect element, maka kita akan mendapatkan kode seperti ini.

Inspect Element Sticker Facebook

Terlihat pada kode di atas, stikernya menggunakan background image. Ketika kita membuka background tersebut, kita akan mendapatkan gambar seperti berikut ini.

Animasi Gambar dengan Javascript

Sekarang, bagaimana kalau kita coba membuatnya.

Kode HTML

Buat kode HTML untuk menampilkan stikernya.

Kode CSS

.sticker {
    position: relative;
    height: 80px;
    width: 80px;
    background: url(burung.png);
    background-size: 320px 320px;
    cursor: default;
    background-position: 0px 0px;
    image-rendering: -webkit-optimize-contrast;
}

Pada kode CSS di atas, terdapat background bernama burung.png. Silakan download di sini.

Javascript

Javascript fungsinya untuk membuat animasi, mengubah posisi background.

Pada kode di atas kita menggunakan fungsi setInterval() untuk melakukan animasi dengan waktu 100 milidetik. Setiap rentang waktu tersebut, posisi background akan berubah sesuai dengan nilai x dan y.

Demo