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

Efek Firefly

by
Read Time:10 minsLanguages:

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

Kosmik gambar yang digunakan pada banyak situs web sebagai gambar latar belakang. Foto-foto tidak diragukan lagi indah, tetapi setelah semua mereka masih gambar yang memberikan sedikit kegembiraan. Dengan jQuery, kita dapat membawa gambaran masih kosmik tiga puluh hidup dengan menambahkan beberapa ruang debu (partikel) terbang seperti kunang-kunang. Dalam tutorial ini, kita akan melihat bagaimana menerapkan efek ini dalam 30 menit. Kita akan mempelajari sedikit object-oriented javascript.


Fitur

  1. Partikel bergerak secara acak kecepatan dan arah (Brownian Motion).
  2. Empat model partikel disediakan dalam tutorial ini. Masing-masing memiliki terlihat sedikit berbeda.
  3. Jumlah partikel ini dikonfigurasi.

Kami akan menatap pada latar belakang kosmis ini untuk waktu yang cukup lama. Untuk membuat mata kita lebih nyaman, gambar yang gelap dan sederhana digunakan sebagai latar belakang dalam tutorial ini. Merasa bebas untuk menggunakan gambar warna-warni lain dalam proyek Anda sendiri.


Partikel

Untuk membuat efek ini terlihat lebih realistis, kami memiliki empat model partikel dalam tutorial ini. Mereka adalah gambar kecil dengan ukuran yang berbeda dan terlihat. Lihat gambar di bawah ini untuk rincian lebih lanjut:

  • Partikel 1 lebih kecil tetapi lebih cerah. Tampak seolah-olah itu tepat di fokus sehingga kita dapat melihat dengan jelas.
  • Partikel 4 besar tetapi gelap (begitu gelap bahwa Anda hampir tidak dapat melihatnya), yang meniru objek tidak fokus.


HTML

Tidak seperti kebanyakan tutorial, itu adalah latar belakang halaman web di mana kami akan memfokuskan hari ini, yang membuat HTML cukup sederhana:

  • tifdak ada element dalam tag body. Jadi tidak ada yang akan mengalihkan perhatian kita dari latar belakang dan animasi.
  • Dengan definisi CSS, latar belakang kosmis ditetapkan untuk body Halaman ini. Ini harus menjadi sangat mudah.
  • jQuery dimasukan seperti biasa.

Object-Oriented JavaScript

Sekarang mari kita lihat lebih dekat sebuah partikel hidup. Setiap partikel mungkin berbeda dalam penampilan. Dan mereka bergerak di kecepatan yang berbeda dan arah. Tapi mereka semua mengikuti serangkaian aturan yang dapat digambarkan sebagai urutan tindakan yang sama:

  1. Secara acak memilih model partikel.
  2. Membuat DOM partikel ini.
  3. Menghasilkan kecepatan acak partikel ini.
  4. Menghasilkan posisi awal (titik X dan Y titik) partikel ini.
  5. Menampilkan partikel pada posisi dihasilkan di 4.
  6. Menghasilkan posisi lain (titik X dan Y titik) untuk partikel yang bergerak.
  7. Menghidupkan gerakan partikel ke posisi dihasilkan di 6.
  8. Ulangi 6 dan 7 setelah selesai animasi yang disebut di 7 selesai

Setiap partikel mengikuti langkah yang delapan seluruh lifetime. Dan faktor acak, seperti posisi dan kecepatan, membuat setiap partikel berperilaku dengan cara yang unik. Ini adalah kasus sempurna untuk menerapkan beberapa teknik object-oriented programminb. Mari kita membungkus ini delapan langkah dalam 'class' yang akan instantiated berkali-kali untuk membuat beberapa contoh dari logika yang sama. Setiap contoh (partikel) berjalan di jalur terpisah dan memegang sendiri kecepatan dan arah.

Sangat penting untuk dicatat bahwa tidak ada class di JavaScript. Fungsi dapat digunakan untuk mensimulasikan agak class, tetapi secara umum JavaScript berbasis prototipe daripada berbasis class. Segala sesuatu adalah objek. Untuk informasi lebih lanjut tentang cara menentukan dan instantiate JavaScript 'class', silahkan checkout artikel ini.

Efek ini sangat, 'class' didefinisikan dan kemudian instantiated 50 kali dengan kode berikut.

  1. Delapan langkah logika dibungkus dalam fungsi bernama Particle. Mendefinisikan fungsi adalah cara untuk menentukan 'class' dalam Javascript.
  2. Kita harus menghasilkan banyak bilangan bulat acak di efek ini, dari kecepatan untuk posisi X-Y. Jadi mari kita menulis fungsi untuk tujuan tunggal ini dan namai itu randomInt. Itu menghasilkan bilangan acak kurang dari nomor tertentu. Kita akan menggunakan fungsi ini dari waktu ke waktu, jadi jangan lupa tentang hal itu.
  3. Pada akhirnya, kami instantiate Particle fungsi dalam sebuah loop, menciptakan 50 instace partikel, masing-masing yang disimpan dalam array yang bernama particles. Perhatikan kata kunci 'new' yang kita gunakan untuk instantiate sebuah objek.

Beberapa pengaturan dasar

Dalam bagian ini, kita akan mendefinisikan properti dan metode untuk class Particle. Dan kita akan melihat bagaimana untuk secara acak memilih model partikel.

Kita dapat menggunakan kata kunci 'this' untuk mendefinisikan properti untuk 'class'. Ketika datang untuk mendefinisikan metode, properti 'prototype' adalah cara untuk pergi. Lihat kode di bawah ini dan kami akan memberikan penjelasan.

  1. Di baris 2 dan 3, kita mendefinisikan path dan nama file gambar partikel kami. Ada lebih dari satu partikel gambar sehingga kita menyimpannya dalam array (properti Particle).
  2. Di baris 6, gambar acak partikel yang diambil dari array yang disebutkan di atas. Fungsi randomInt kita didefinisikan sebelumnya digunakan di sini. Sangat berguna, hah?
  3. Di baris 7, kami menggabungkan path dan nama file.
  4. Dalam baris 10, img DOM dibuat. Ini adalah wadah partikel.
  5. baris 13 adalah inti dari efek ini. Urutan metode disebut dalam rantai. Satu baris kode ini mencakup langkah 3 sampai 8 yang disebutkan di bagian sebelumnya. Kita akan pergi melalui masing-masing metode ini segera.
  6. Dari baris 17 sepanjang jalan sampai akhir, empat metode yang ditetapkan untuk class Particle. Masing-masing menangani satu hal tertentu untuk partikel. Speed() menghasilkan kecepatan acak. NewPoint() menghasilkan serangkaian acak posisi X-Y. Display() memastikan bahwa partikel ditampilkan dengan benar. Dan fly() mengurus animasi.
  7. Perhatikan cara kita mendefinisikan metode untuk 'kelas' dalam baris 17, 20, 23 dan 26. Metode baru yang ditetapkan dalam tempat prototype properti class. Ini mungkin tampak sedikit rumit untuk orang-orang dari latar belakang C, Java, atau PHP (seperti saya). Jika Anda merasa tidak nyaman dengan ini, jangan ragu untuk menghabiskan satu menit membaca artikel ini.

Sebenarnya ada banyak cara yang berbeda untuk mendefinisikan properti dan metode untuk sebuah class Javascript. Berikut adalah artikel bagus pada topik ini.


Random Speed

Sekarang, kita mendapat idea bagaimana efek ini bekerja. Dari bagian ini, kita akan mulai menulis fungsi yang kita gunakan untuk memanipulasi pergerakan partikel.

Pertama, mari kita menghasilkan kecepatan acak untuk partikel. Kecepatan menentukan seberapa cepat partikel perjalanan. Jika Anda sudah familiar dengan jQuery, Anda akan memahami kita hanya tidak bisa memasukan dalam kecepatan nyata, mengatakan 100 piksel per detik. Bahkan, parameter yang digunakan untuk menggambarkan kecepatan di jQuery adalah durasi diukur dalam milidetik. Jadi pertanyaannya menjadi bagaimana untuk menghasilkan durasi wajar di mana partikel perjalanan dari satu tempat ke yang lain. Apa tentang kode berikut?

  1. Di baris 3, kita hanya menghasilkan bilangan acak antara 5000 dan 14000. Yang mengatakan, partikel akan membuat kecepatan dan arah tidak berubah untuk 5 – 14 detik sebelum mengambil giliran dan bergerak menuju tempat lain.
  2. Lihatlah baris 5. Mengapa kita mengembalikan this? Ingat fungsi akan dipanggil dalam rantai? mengembalikan objek asli memastikan fungsi trailing untuk bekerja dengan baik. Kita memerlukan ini dalam metode lain juga.
  3. Setelah fungsi ini dijalankan, sebuah properti duration di dapat diakses dalam instance Particle.

Posisi acak

Seperangkat acak posisi X-Y sangat berguna dalam efek ini. Dapat digunakan untuk menentukan:

  • Di mana titik partikel muncul pada awalnya,
  • Untuk titik mana partikel bergerak setelah lahir atau selesai menyelesaikan perjalanan.

Berikut adalah kode kita perlu menghasilkan acak posisi X-Y.

Ukuran jendela browser saat ini dapat diperoleh dari window.innerWidth dan window.innerHeight. Jika partikel lalat melampaui batas jendela, scrollbar akan muncul. Kita mungkin tidak ingin itu terjadi. Jadi mari kita membatasi gerakan partikel di suatu daerah yang 100 piksel kurang tinggi dan lebar dari jendela browser. Kode di atas harus cukup sederhana. Setelah fungsi ini dijalankan, pointX dan pointY properti menjadi bisa diakses. Setelah menjalankan fungsi kedua waktu, pointX dan pointY akan diperbarui dalam instance Particle.


Tampilkan partikel

Di bagian sebelumnya, img DOM sudah diciptakan untuk partikel baru. Sekarang kita akan mengatur beberapa atribut dan menampilkan partikel di suatu tempat dalam jendela browser. Hal ini dicapai dengan kode berikut.

  1. Di baris 3, this.element berisi dibuat img DOM. Kami akan menetapkan atribut untuk itu dalam fungsi ini.
  2. Dalam baris 4, this.file berisi gambar acak kami memilih dari model empat partikel. Dengan menetapkan src atribut, kita membawa gambar partikel img baru DOM.
  3. Dengan baris 5 ke 7, partikel terletak di suatu tempat dalam jendela browser.
  4. di baris 8, img DOM yang baru saja dibuat ditambahkan ke body. Partikel akan pernah muncul kecuali kita menulis baris kode sederhana.

Menghidupkan pergerakan partikel

Akhirnya, kami datang ke bagian animasi yang mungkin muncul lebih sederhana daripada yang Anda pikir.

Fungsi animate di jQuery akan melakukan trik untuk kita. Empat parameter yang dibutuhkan: animate (params, durasi, easing, callback). Checkout dokumentasi jika Anda tidak tahu apa yang dilakukannya.

Apakah kode di atas cukup sederhana:

  1. Ini menghidupkan partikel ke posisi acak.
  2. Animasi mengambil milidetik this.duration untuk menyelesaikan.
  3. Partikel bergerak pada kecepatan konstan. (Mengurangi modus 'linier'.)
  4. Setelah animasi selesai, kode dalam baris 8 akan dijalankan sebagai callback.
  5. baris 8, kecepatan baru akan dihasilkan, posisi baru akan dihitung dan fungsi fly() (yang sangat kita menulis di bagian ini) akan dijalankan lagi.
  6. Ulangi dari langkah 1.

Jadi fungsi fly() memanggil dirinya berulang kali. Dengan fungsi rekursif ini, animasi berjalan dan selamanya. Sekarang, kami mampu menulis seluruh cerita kehidupan partikel. Masih ingat rantai berikut?

Mari kita meninjau apa yang dilakukan:

  1. Kecepatan baru yang dihasilkan.
  2. Set baru X-Y posisi dihitung.
  3. Partikel yang muncul pada posisi dihitung dalam langkah 3.
  4. Posisi baru dihitung.
  5. Partikel bergerak ke posisi dihitung dalam langkah 5.
  6. Kecepatan baru yang dihasilkan.
  7. Set baru X-Y posisi dihitung.
  8. Partikel bergerak ke posisi dihitung dalam langkah 7.
  9. Setelah animasi selesai, ulangi dari langkah 6.

Jika langkah-langkah ini suara seperti twister lidah... Nah, Lihatlah angka ini sekali lagi. Anda harus mampu mengkode setiap langkah sekarang. Dan Anda harus tahu bagaimana untuk mengatur semua hal dalam object-oriented struktur. Akhirnya firefly efek lengkap.



Kesimpulan

Sekarang semua orang harus mampu menerapkan efek ini dalam proyek Anda sendiri. Mudah-mudahan Anda memiliki pemahaman yang lebih baik object-oriented JavaScript juga.

Nomor satu hal yang saya sukai tentang efek ini adalah bahwa dengan mengubah gambar latar belakang dan partikel, Anda dapat menghasilkan tampilan dan rasa yang berbeda. Anda dapat memiliki pesawat atau bahkan manusia super terbang pada halaman web Anda jika Anda suka. Imajinasi Anda adalah batas.

Itu semua untuk tutorial ini. Harap Anda menikmatinya. Terima kasih sudah membaca!


Advertisement
Did you find this post useful?
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.