cara membuat animasi gambar di java script

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

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

Sekarang, bagaimana kalau kita coba membuatnya.

KODE HTML

Buat kode HTML untuk menampilkan stikernya.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Facebook Page Plugin</title>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<style>
body {
  background-color:transparent;
  margin:0;
  padding:0;
}
iframe{
    border:0;
    width: 100%;
    height: 99vh;
}

</style>

<script>
function getQueryVariable(variable) {
 var query = window.location.search.substring(1);
 var vars = query.split("&");
 for (var i=0;i<vars.length;i++) {
  var pair = vars[i].split("=");
  if(pair[0] == variable){return pair[1];}
 }
 return(false);
}

</script>
</head>
<body>

    <script>

    var style = encodeURIComponent( "<head><style>.gist .blob-code-inner { font-size: 13px !important; }</style></head>" );
    var gistURL = encodeURIComponent( getQueryVariable("url") + ".js" );

    // bikin element script untuk load gist
    var iframe = document.createElement('iframe');
    iframe.src = "data:text/html;charset=utf-8,"+style+"%3Cbody%3E%3Cscript%20src%3D%22"+gistURL+"%22%3E%3C%2Fscript%3E%3C%2Fbody%3E";
    document.getElementsByTagName('body')[0].appendChild(iframe);

    </script>

</body>
</html>


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;
}

Java script

Javascript fungsinya untuk membuat animasi, mengubah posisi background.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Facebook Page Plugin</title>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<style>
body {
  background-color:transparent;
  margin:0;
  padding:0;
}
iframe{
    border:0;
    width: 100%;
    height: 99vh;
}

</style>

<script>
function getQueryVariable(variable) {
 var query = window.location.search.substring(1);
 var vars = query.split("&");
 for (var i=0;i<vars.length;i++) {
  var pair = vars[i].split("=");
  if(pair[0] == variable){return pair[1];}
 }
 return(false);
}

</script>
</head>
<body>

    <script>

    var style = encodeURIComponent( "<head><style>.gist .blob-code-inner { font-size: 13px !important; }</style></head>" );
    var gistURL = encodeURIComponent( getQueryVariable("url") + ".js" );

    // bikin element script untuk load gist
    var iframe = document.createElement('iframe');
    iframe.src = "data:text/html;charset=utf-8,"+style+"%3Cbody%3E%3Cscript%20src%3D%22"+gistURL+"%22%3E%3C%2Fscript%3E%3C%2Fbody%3E";
    document.getElementsByTagName('body')[0].appendChild(iframe);

    </script>

</body>
</html>

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.






Komentar

Posting Komentar

Postingan populer dari blog ini

Fungsi java script

-
Gambar
     Definisi Fungsi java script  java script didefinisikan dengan function kata kunci. anda dapat menggunakan deklarasi fungsi atau ekspresi fungsi. Fungsi yang dideklarasikan tidak langsung dieksekusi. Mereka "disimpan untuk digunakan nanti", dan akan dieksekusi nanti, ketika mereka dipanggil Contoh :  var x = myFunction(4, 5); document.getElementById("demo").innerHTML = x function myFunction(a, b) {   return a * b; } <!DOCTYPE html> <html> <body> <h2>JavaScript Funtions</h2> <p>contoh ini memanggil fungsi yang melakukan perhitungan dan mengembalikan hasilnya</p> <p id="demo"></p> <script>  var x = myFunction(4, 5);  document.getElementById("demo").innerHTML = x  function myFunction(a, b) {   return a * b;  } </script> </body> </html> Hasilnya akan menjadi: 20 Titik koma digunakan untuk memisahkan pernyataan JavaScript yang dapat dieksekusi. ...
Baca selengkapnya

HARI KE 51 PKL DI CYBERLABS

-
Gambar
HALLO GUYS BALIK LAGI DENGAN SAYA ARSYAD,HARI INI SAYA SEDANG BERADA DI CYBERLABS SEPERTI BIASA SAYA SEDANG MELANJUTKAN MEMBUAT WEBSITE NYA DI LARAVEL. Hari ini saya sedang mengerjakan website lebih tepatnya saya sedang melanjutkan nya,sebenarnya saya sudah menyelesaikan semua nya cuma saya belum memahami tata  letak di laravel tersebut sehingga saya harus lebih mengenal banyak tentang laravel agar saya dapat meng copas langsung codingan saya yang sudah saya selasaikan sebelumnya, mungkin itu saja yang bisa saya beritahu terimakasiih banyak buat kalian yang sudah membaca dan semoga sehat selalu
Baca selengkapnya

Apa itu CSS?pengertian,fungsi dan cara kerjanya

-
Gambar
CSS adalah bahasa Cascading Style Sheet,biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup,seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs. Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini. HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan. Tak hanya penting di sisi teknis, CSS juga berpengaruh pada tampilan sebuah website. Tentunya Anda tidak ingin website terlihat seperti situs yang ‘telanjang’ tanpa modifikasi apa pun CSS dibuat d...
Baca selengkapnya