Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Cara Memanipulasi Warna dalam JavaScript Menggunakan Chroma.js

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Rahid (you can also view the original English article)

Dalam screencast tutorial hari ini, Saya akan menunjukkan kepada Anda cara memanipulasi warna dengan JavaScript. Ya benar, JavaScript. Bukan CSS. Mari mendalami apa yang Saya sampaikan!

Menonton Screencast

Kita semua telah terbiasa dengan gagasan bahwa CSS lah yang menangani proses style sementara JavaScript digunakan untuk behavior, dan kedua masalah harus tetap terpisah. Tetapi ketika tidak mungkin untuk menentukan style secara langsung melalui CSS, seperti ketika mereka diatur melalui input dari pengguna, JavaScript akan melakukan semua beban berat tersebut untuk Anda.

Chroma.js adalah library kecil yang dapat sangat membantu memanipulasi warna, jadi mari kita lihat cara untuk mulai menggunakannya.

Menghubungkan Chroma.js

Chroma dapat ditarik dari yang repositori pada Github, atau link dari CDNJS menggunakan link ini:

Demo

Lihatlah demo singkat yang Saya buat untuk menunjukkan apa saja yang mungkin untuk dilakukan. Kita akan membangun generator skema warna yang mengambil nilai warna yang diinput dan menggunakannya untuk menghasilkan skema monokromatik.

Jika sementara Anda ingin mengikuti saya membuat ulang demo, ambil file start.html (yang berisi segala sesuatu kecuali JavaScript yang akan kita tulis) dan buka di kode editor.

Heres what were building
Berikut adalah apa yang sedang kita bangun

Mulailah dengan menambahkan potongan kode berikut di antara tag <script> di bagian bawah dokumen html:

Ini merupakan bagian yang besar, tetapi jauh lebih tidak menakutkan dari pada yang mungkin Anda pikirkan pertama kali! Dimulai dengan event listener DOMContentLoaded yang menunggu hingga dokumen dimuat sebelum menjalankan fungsi apa pun yang mengikuti. 

Selanjutnya saya mendefinisikan sekelompok variabel yang akan kita gunakan, dimulai dengan dua tombol, kemudian colorScheme dan container colorScale, kemudian steps (nomor yang akan segera kita gunakan).

Terakhir, ada dua klik event listener dengan (belum) fungsi kosong. Kita akan mulai dengan yang pertama ini btnGenerateColorScheme, yang (tidak mengejutkan) tombol yang akan menghasilkan skema warna.

btnGenerateColorScheme

Dalam fungsi kosong, di antara kurung kurawal, kita akan mulai dengan mengatur array kosong yang disebut colorList:

Ketika seorang pengguna mengklik tombol, hal pertama yang perlu kita lakukan adalah mendapatkan warna dari #user-color input.

Kemudian kita perlu mengatur ulang nilai-nilai dalam daftar skema warna. Hal ini dilakukan dengan membuka innerHTML dari elemen .color-scheme, yang dalam kasus kita merupakan sebuah <ol>. Di sini Anda dapat melihat kita membuat innerHTML sama dengan string kosong.

Memanggil Chroma

Sekarang untuk bagian yang menyenangkan! Kita akan menginisialisasi library chroma.js dengan memanggil chroma() dan meneruskan warna:

Warna kami adalah userColor, nilai yang kami tarik dari input tadi.

Kita akan membuat skema warna monokromatik berdasarkan warna yang dipilih. Kita akan melakukan ini dengan membuat array, berkat perulangan for berikut :

Perulangan ini mengulangi sejumlah langkah yang didefinisikan dalam variabel steps (kita mengaturnya ke 5 sebelumnya, ingat?) Setiap kali kita lakukan iterasi, warna yang sedikit lebih gelap ditambahkan ke dalam koleksi.

Akhirnya, kita perlu untuk menghasilkan beberapa elemen menggunakan lima nilai dalam array kami. Setiap kali kita membuat element <li>, memberikannya backgroundColor menurut colorList kami, kemudian tambahkan ke colorScheme.

Selesai!

Kami telah berhasil membangun generator skema warna yang menghasilkan serangkaian blok, dimulai dengan warna yang dipilih dan secara bertahap menjadi lebih gelap.

our color scheme
Skema warna kami

Anda mungkin ingin memperbaikinya dengan memilih warna yang dipilih di tengah rentang dengan warna yang lebih terang ke kiri dan warna lebih gelap ke kanan, dalam hal ini lihatlah video dan ikuti langkah terakhir. Anda juga bisa menambahkan detail warna untuk setiap blok, seperti nilai hex; Saya juga menjelaskan ini di dalam screencast.

Terakhir, screencast juga termasuk instruksi untuk membangun generator skala warna, jadi cobalah dan beri tahu saya bagaimana Anda melakukannya!

Sumber Lebih Lanjut lainnya

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.