Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. jQuery

Membuat Plugin jQuery untuk Menciptakan Efek Bayangan yang Panjang

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Eklemis Santo Ndun (you can also view the original English article)

Final product image
What You'll Be Creating

Desain dengan efek bayangan panjang adalah variasi tambahan terhadap desain model flat, dimana bayangan panjang ditambahkan pada objek sehingga objek tampak seperti objek tiga dimensi. Pada tutorial ini kita akan membuat sebuah plugin jQuery yang dapat menciptakan bayangan panjang pada ikon flat.

Jika anda tertarik mempelajari plugin lengkap jQuery untuk menciptakan efek bayangan panjang pada ikon dan teks, silahkan kunjungi Plugin Bayangan Panjang jQuery CodeCanyon

Long Shadow jQuery Plugin

Pada tutorial ini kita akan coba mempelajari karakteristik elemen-elemen bayangan, dan kemudian membuat plugin jQuery sederhana untuk mengatur elemen-elemen tersebut.

Kita mulai!

Elemen-elemen Apa Saja yang Ada Pada Desain Bayangan?

Mari lihat satu persatu elemen yang menciptakan efek bayangan panjang.Kita dapatkan:

Long Shadow Elements
  • Elemen utama, yang memencarkan bayangan.
  • Panjang bayangan, biasanya sangat panjang sebagaimana namanya. Bayangan ini juga menciptakan ilusi keterpisahan objek dari permukaan.
  • Arah atau sudut bayangan. Di dunia nyata, ini ditentukan oleh sumber cahaya. Sudah pasti, semua bayangan oleh satu sumber cahaya mempunyai arah yang sama.
  • Warna dan kepekatan bayangan. Warna sumber cahaya mempengaruhi warna bayangan. Selain itu, semakin terang sumber cahaya, semakin gelap dan pekat bayangan yang dihasilkan.

Elemen-elemen ini secara bersama akan membuat elemen utama tidak nampak datar saja tetapi akan terlihat seperti objek tiga dimensi yang memiliki bayangan.

Mari kita buat plugin jQuery untuk mengatur elemen-elemen di atas.

Membuat Plugin Bayangan Panjang jQuery

Untuk membuat Plugin ini, mari terlebih dahulu kita tata struktur project sebagai berikut:

  • Buat satu folder untuk menampung file-file project. Namakan saja long-shadows-jquery-plugin
  • Dalam folder tadi, buat sebuah file dengan nama index.html. File ini akan diisi kode HTML kita nantinya.
  • Buat sebuah file lagi, namakan jquery.longshadows.js, dan tempatkan pada folder tadi. File ini akan diisi kode Javascript untuk plugin jQuery ini.
  • Untuk tujuan penyederhanaan, kita buat lagi satu file Javascript pada folder yang sama dan namakan script.js. File ini adalah tempat kita menggunakan plugin yang dibuat nanti.
  • Dalam folder utama tadi, tempatkan juga ikon heart.png yang dapat anda ambil dalam attachments tutorial ini.

File index.html akan berisi HTML dasar yang juga menyisipkan jQuery dan file-file JavaScript kita. Kita perlu menyisipkan jQuery karena kita akan membuat plugin jQuery. Index.html berisi:

jquery.longshadows.js berisi kode plugin jQuery sebagai berikut:

Kita akan memanggil plugin kita dari file script.js. Dalam tutorial ini, kita akan menggunakan parameter-parameter yang sudah kita singgung pada pembahasan sebelumnya:

  • shadowColor: Warna bayangan yang dihasilkan.
  • shadowLength: Panjang bayangan.
  • shadowAngle: Sudut bayangan.
  • shadowOpacity: Seberapa pekat atau transparannya bayangan.
  • spacing: Atribut ini belum kita sebutkan tadi. Tapi kita memerlukan atribut ini untuk memastikan ada area yang cukup di sekitar elemen utama, sehingga bayangan yang dihasilkan lebih bisa terlihat.

Mari kita mulai implementasinya. Untuk membuat bayangan, kita menggunakan komponen canvas HTML5. Pada canvas ini kita menggambar duplikat gambar asli beserta bayangannya. Untuk membuat bayangan, kita terus membuat duplikat gambar dan memposisikan satu di atas yang lain, dengan sedikit pergeseran.

Jumlah gambar duplikat dan ukuran pergeseran dihitung menggunakan transformasi koordinat sederhana berdasarkan parametet shadowLength dan shadowAngle. Kita juga perlu mewarnai gambar-gambar duplikasi tersebut sesuai parameter shadowColor.

Karena kita menggambar bayangan dengan membuat banyak gambar dan menempatkannya satu di atas yang lain, kita akan menggambar dalam urutan terbalik, dari belakang ke depan, dimulai dari gambar duplikat yang paling jauh dari gambar asli. Kemudian kita harus mengatur kepekatan bayangan melalui properti shadowOpacity.

Setelah selesai menggambar bayangan, kita kemudian menggambar gambar asli di posisi paling atas.

Berikut adalah pengaplikasian langkah-langkah di atas dalan kode program pada file jquery.longshadows.js:

Plugin ini bisa diatur dengan mengisi parameter-parameter lewat parameter options. Parameter-parameter ini akan disimpan dengan nilai bawaan di variabel settings. Ini menyingkat waktu kita dalam menggunakan plugin ini saat kita perlukan, tanpa harus memikirkan parameter-parameter yang harus dikirimkan.

variabel img menyimpan referensi ke gambar asli yang akan dikenakan efek bayangan. Kita menempatkan perintah-perintah pemberian efek ke kejadian onload untuk memastikan bahwa gambar asli sudah dimuat sepenuhnya saat efek yang kita atur diterapkan. Anda juga bisa lihat bahwa setelah fungsi onload ada perintah img.src = img.src;. Perintah ini akan memicu fungsi onload untuk dipanggil, ini karena kita tidak bisa tau dengan pasti urutan kapan browser akan memuat gambar dan scrip.

Di dalam onload, kita membuat elemen canvas sebagai tempat kita menampilkan gambar akhir, dengan ukuran sebesar ukuran gambar plus spacing. Kemudian, dimulai dari titik terjauh dari titik tengah gambar, kita tempatkan duplikat gambar di dalam canvas:

Untuk membuat gambar pada canvas, kita menggunakan canvas 2D context dan memanggil fungsi drawImage(). Fungsi ini akan membuat duplikat dari gambar di dalam canvas, tetapi kita harus membuatnya berwarna. Untuk membuat warna, kita gunakan operasi-operasi komposisi canvas. Menggunakan source-in bersama sebuah kotak yang diwarnai dengan shadowColor akan menghasilkan gambar dengan bentuk yang sama seperti gambar asli tapi warnanya sesuai nilai shadowColor.

Catatan buat anda bila anda bekerja dengan gambar multi warna, gambar baru akan tetap memiliki hanya satu warna sesuai shadowColor, yang tentu saja benar dalam kasus ini, karena kita membuat bayangan yang memang warnanya satu saja.

Perulangan for dipakai dalam menggambar bayangan; tetapi gambarnya akan mempunyai kepekatan penuh. Kita bisa bisa mengatur kepekatan bayangan melalui parameter shadowOpacity. Kita gunakan fungsi copyCanvas(), yang menggunakan canvas temporer dan mengatur kepekatan canvas tersebut dengan nilai tertentu.

Ini kita lakukan di bagian akhir, setelah keseluruhan bayangan selesai dibuat, jika tidak hasilnya akan seperti efek gradient.

Berikut dua baris terakhir dari onload:

Baris pertama akan menghentikan eksekusi onload dari gambar. Ini dilakukan karena pada baris berikutnya kita akan merubah src dari gambar asli ke gambar yang sudah dibuat dalam canvas. Kalau kita tidak sudahi eksekusi onload maka kita akan terjebak dalam perulangan tanpa akhir.

Bagaimana Menggunakan Plugin Bayangan Panjang jQuery?

Karena kita sudah selesai membuat pluginnya, sekarang mari kita lihat bagaimana menggunakan dan seperti apa hasilnya. Untuk itu kita menggunakan file script.js, tempat di mana kita akan memanggil plugin kita.

Berikut pemanggilan sederhananya:

Kode di atas akan meminta browser bahwa setelah halaman selesai dimuat, browser harus menerapkan plugin longshadows terhadap elemen dengan ID logo.

Pemanggilan plugin seperti di atas akan membuat nilai parameter-parameter diisi nilai bawaan, yang tampilannya tidak begitu bagus. Bagaimana cara mengubahnya? Kita panggil dengan cara berikut:

Hasilnya adalah sebuah gambar seperti ini:

A resulting image from our plugin

Karena plugin ini bisa dikonfigurasi dengan mudah dan dapat diaplikasikan pada gambar apa saja, tanpa batasan kombinasi parameter, imajinasi saja yang akan menjadi batasan anda. Kita bisa mengisi HTML berikut dalam index.html:

Kita bisa memanggil plugin dari script.js dengan parameter-parameter sebagai berikut:

Hasilnya akan terlihat seperti berikut ini, sangat cocok untuk bagian header website:

An example header using the long shadows effect

Berikut beberapa contoh lain menggunakan gambar-gambar lain:

Di sini kita menggunakan gambar tutsplus.png yang bisa diunduh pada attachments. Perlu diketahui juga bahwa plugin ini bisa juga digunakan bersama CSS, dalam contoh ini dengan menambahkan kotak berwarna mengelilingi ikon.

Long Shadows Tutsplus Icon

Selamat

Sekarang anda sudah paham dasar-dasar pembuatan plugin jQuery untuk menambahkan bayangan pada ikon. Anda bisa menambah fungsi plugin ini sehingga bisa juga diaplikasikan pada teks, atau mungkin anda bisa kembangkan plugin ini untuk membuat bayangan lebih banyak dari gambar yang banyak juga.

Bila anda tertarik membuat plugin bayangan yang lebih lengkap dengan lebih banyak konfigurasi, silahkan lihat CodeCanyon: Plugin Bayangan Panjang jQuery.

Long Shadows Plugin Samples
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.