Decoration jQuery Plugin Around The Cursor

Mengumpulkan memang tidak ada habisnya... Sekarang Koben akan berbagi seputaran trik jQuery plugins disekitaran area cursor. Menambahkan embel-embel disekitaran cursor dengan menggunakan sebuah gambar. Masih ingat Koben memasang gambar pocong yang selalu mengikuti cursor bergerak! Sebelum masuk sesi script, ada baiknya saya mengingatkan kembali cara penulisan struktur jQuery plugin ke dalam template. Versi script jQuery teranyar kepunyaan google<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>Bila sobat sekalian sudah mempunyai jQuery script tersebut, jangan dipasang lagi. Kalau masih pakai versi lama, boleh diupdate ke versi anyar 1.7.1 ;)

Yuk kita mulai membuat gambar selalu mengikuti cursor dengan jQuery plugin :)

Follow the Cursor Image

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
  $(document).mousemove(function (e) {
      $('#img-cur').offset({
          left: e.pageX,
          top: e.pageY + 35
      });
  });
});
//]]>
</script>

<img id='img-cur' src='http://LINK-IMAGE-30 x 30.PNG' alt='&#9829;'/>

Gantikan link image dengan gambar kesukaan kalian. Resolusi image 30 x 30 pixels. Script plugin letakkan dibawah script jQuery inti. Utamakan simpan script tepat sebelum tag </body> Lihat hasil kerja!

Movement of the Shadow Effect

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
   //<![CDATA[
    $(document).ready(function() {
        $(document).mousemove(function(e) {
            pointer = $('<img>').attr({
                'src': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Fm3Nm_EB1ELo-2p0z09hkiWfYaGLnmhAXf-3bIILe241-hOxv6X_7bZnp7jlV_heo6D8oJPpp7X4hWV3PxntcmZUyYipRzdaB-OQ3-2L353-VZoIsiveX0Ls83AjbppXn80WPYy-WW_E/s32/cursor.png'
            });
            $(document.body).append(pointer);
            pointer.css({
                'position': 'absolute',
                top: e.pageY + 5,
                left: e.pageX + 5
            }).fadeOut(1500);
        });
    });
//]]>
</script>

Script jQuery plugin yang kedua ini, menampilkan efek bayangan ketika cursor digerakkan. Contoh bisa lihat di blog ini kan :D
Script plugin pertama bukan saya yang buatnya :D dapet nemu booo :P Buat script plug-in kedua akan tiba saatnya nanti akan saya kasih tau nama blognya.
Happy plugin \m/