Efek Kanvas Yang Menakjubkan

HTML5 menghadirkan suatu tag bernama Canvas yang dikhususkan kita untuk menggambar grafik di web browser dengan menggunakan JavaScript. Seperti halnya canvas pada photoshop atau foto editor lainnya, tag canvas HTML5 ini sebagai media untuk membuat berbagai macam efek, seperti memanipulasi foto, menggambar dan menghidupkan objek, memutar video atau membuat grafis 3D dan masih banyak lagi.

Dalam artikel ini saya akan memamerkan beberapa hasil karya yang luar biasa, menggunakan tag canvas sebagai pondasi dengan paduan kode JavaScript yang cukup rumit, tapi hasilnya pasti akan membuat kamu geleng-geleng kepala. Berikut daftarnya:

1. Rainbow Rain

Efek pertama bernama Rainbow Rain, efek ini sangat mengesankan dengan garis-garis berwarna-warni yang begitu menjiwai...

See the Pen rainbow rain by towc (@MateiGCopot) on CodePen.

2. Image Particles

Image particles adalah efek partikel dari suatu gambar, mirip seperti kembang api tahun baru ya...

See the Pen Image => Particles by Nate Wiley (@natewiley) on CodePen.

3. Beautiful Noise

Efek seni lingkaran cantik menggunakan HTML 5 kanvas...

See the Pen Beautiful Noise by Tiffany Rayside (@tmrDevelops) on CodePen.

4. Abstract Canvas Visualization

Wah!!! efek yang satu ini benar-benar bikin kita serasa lagi nonton pertunjukan cahaya yang luar biasa...

See the Pen Abstract Canvas Visualization by Jack Rugile (@jackrugile) on CodePen.

5. Canvas Lightning WIP

Efek petir yang menyeramkan namun indah dipandang...

See the Pen Canvas Lightning WIP by Jack Rugile (@jackrugile) on CodePen.

6. Rainbow octopus on canvas

Dari judul aja sudah ketahuan, efek warna pelangi ini melingkar bak kaki octopus...

See the Pen Rainbow octopus on canvas by Ana Tudor (@thebabydino) on CodePen.

7. Find your Mouse

Masukan cursormu dalam kotak demo, lihat apa yang terjadi...

See the Pen Find your mouse cursor by Gianluca Guarini (@GianlucaGuarini) on CodePen.

8. Mechanical Grass

Yang ini adalah efek yang paling saya suka... Coba geserkan cursor kamu dalam kotak demo tersebut. Kamu pasti seolah-olah sedang menggambar pemandangan yang indah...

See the Pen Mechanical Grass by Tim Holman (@tholman) on CodePen.

9. Constellation

Efek seperti sebuah rasi bintang, yang selalu bergerak dinamis mengikuti cursor kita pergi...

See the Pen Constellation by Acauã Montiel (@acauamontiel) on CodePen.

31 Maret 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat