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 backgound.

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 backgound image. Ketika kita membuka backgound 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. Silahkan 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

Baca Juga ini

Cara Membuat Halaman Github untuk Repositori

Cara Membuat Halaman Github untuk Repositori

Pada tulisan sebelumnya, saya pernah membahas tentang cara membuat halaman Github untuk profil individu dan organisasi. Nah, kali ini kita akan membuat halaman github untuk proyek atau repositori. Jadi sebenarnya, setiap proyek atau respositori di Github itu bisa dijadikan halaman Github (Github Pages). Pastikan di dalam proyek berisi file web statis seperti HTML, CSS, dan Javascript. Membuat repositoriBuatlah repositori dengan nama apa saja, kemudian di dalamnya berisi file web statis. Setelah itu, upload ke github.

Membuat AMP Image Generator dengan Vuejs

Membuat AMP Image Generator dengan Vuejs

P.S: Ini adalah artikel lama tentang bagaimana saya membuat AMP Generator untuk digunakan pada Blogger (Blogspot) Hari ini saya baru berkenalan dengan Vue.js. Saya sudah mendengar tentang Vue.js dari beberapa teman dan forum. Tapi, saya belum berani untuk mulai mencobanya. Awalnya saya ingin membuat sebuah alat untuk kebutuhan saya sendiri, yaitu alat yang bisa membuat tag amp-img secara otmatis melalui url gambar. Karena masih banyak artikel di blog ini yang belum disunting dan belum valid AMP.

4 Cara Menulis Kode Javascript pada HTML yang Wajib Kamu Ketahui

4 Cara Menulis Kode Javascript pada HTML yang Wajib Kamu Ketahui

Baru belajar Javascript? ..dan masih bingung dengan cara menulis Javascript di HTML? Tenang! Saya akan menjelaskannya. Ada 4 cara menulis kode Javascript pada HTML. Dari keempat cara ini, ada yang biasa dan sering digunakan.. ..ada juga yang ‘aneh’, jarang digunakan sih tapi masih work! Apa saja keempat cara itu? Mari kita bahas: googletag.cmd.push(function () { googletag.display('div-gpt-ad-multibanner1'); }); 1. Menulis Javascript pada Tag <script>Penulisan kode Javascript menggunakan tag <script> adalah cara umum yang digunakan.

Cara Menggunakan Plug-in Data Tables untuk Membuat Tabel Dinamis

Cara Menggunakan Plug-in Data Tables untuk Membuat Tabel Dinamis

Data Tables merupakan sebuah plug-in jQuery untuk memanipulasi data dalam tabel HTML. Data Tables memungkinkan kita melakukan membuat tabel dengan fitur pencarian, membuat pagination, menampilkan data sebanyak yang kita mau, mengambil data dari ajax, dsb. 1. Menyisipkan Data TablesPlug-in Data Tables yang saya gunakan pada tulisan ini adalah versi online melalui CDN. Bila anda ingin menggunakan versi offline, silahkan di-download dulu Data Tables-nya di https://datatables.net/download/index.

Menggunakan TinyMCE pada Proyek Web

Menggunakan TinyMCE pada Proyek Web

Pada sebuah proyek yang saya kerjakan, terdapat fitur yang harus menggunakan teks editor untuk menginputkan nilainya. Karena deadline proyek ini begitu cepat. Saya tidak punya banyak waktu untuk membuat teks editor berbasis HTML. Karena itu, cara tercepat ialah menggunakan teks editor yang sudah ada, yaitu TinyMCE. Nah, pada kesempatan ini, saya akan berbagi cara menerapkan TinyMCE dalam Web. 1. Download TinyMCESilahkan men-download TinyMCE pada website resminya: tinymce.

Mengambil Nilai dari Select/Option dengan JQuery

Mengambil Nilai dari Select/Option dengan JQuery

Pada sebuah kasus, kita menggunakan elemen <select> dan <option> sebagai input dalam form. Kita ingin: Setiap opsi yang terpilih akan memberikan data yang berbeda-beda. Misalnya kita punya form seperti ini ini: <form> <select name="package" id="package"> <option>Paket 1</option> <option>Paket 2</option> <option>Paket 3</option> </select> <h4>Anda memilih: <span id="selected"></span></h4> </form> Nah, saat kita memilih Paket, kita ingin mengambil data dari opsi yang dipilih. Kita bisa saja melakukannya seperti ini: