Tindakan sederhana dari cahaya yang dipantulkan atau dibiaskan melalui permukaan dapat menghasilkan visual yang menakjubkan. Kita melihatnya setiap hari di dunia fisik. Mungkin cara matahari mengintip melalui jendela kantor Anda atau cahaya yang mengenai cermin pada sudut yang tepat. Mereka seperti eksperimen sains kecil yang terjadi tepat di depan kita.
Berkat teknik CSS dan JavaScript terbaru, efek ini juga memukau pengguna web. Semuanya, mulai dari detail pantulan yang relatif sederhana hingga pembiasan pembelokan cahaya, muncul di layar kami. Bahkan perilaku yang sangat realistis pun dimungkinkan.
Hari ini, kami akan memperkenalkan beberapa cuplikan kode luar biasa yang menghidupkan efek cermin, refleksi, dan refraction. Mari lihat!
animasi bonsai oleh Kamil
Bonsai animasi lembut ini memberikan nuansa menenangkan yang memungkiri teknologi serius yang membuatnya bekerja. Ini menggunakan SVG dan GSAP perpustakaan animasi untuk membuat efek refleksi air yang indah.
Lihat Pena animasi bonsai oleh Kamil
Refleksi PBR oleh ycw
Berikut cuplikan yang sangat unik yang menampilkan banyak efek. Pertama, ada bentuk berputar yang melayang di depan permukaan seperti cermin. Perhatikan refleksi mengkilap di bawahnya juga. Pencahayaan dan bayangannya sangat indah. Anda juga dapat menggunakan mouse atau sentuhan untuk mengubah perspektif.
Lihat Pena Refleksi PBR oleh ycw
Gerakan Kursor Bola Cahaya Cermin oleh Diana Le
Cuplikan ini adalah bukti bahwa efek cermin dapat diterapkan dengan cara yang tidak biasa. Dua bola berwarna cerah muncul dengan latar belakang hitam. Gerakkan kursor Anda untuk mengendalikan yang kiri (putih), sementara yang lain mencerminkan gerakan Anda. Menyeret bola-bola ini ke seluruh layar bersama-sama lebih menyenangkan dari yang seharusnya!
Lihat Pena Gerakan Kursor Bola Cahaya Cermin oleh Diana Le
GLSL: Sinar bias oleh Liam Egan
Warna dan tekstur animasi ini memesona. Baris demi baris bola bergerak ke arah Anda, sementara posisi kursor Anda mengubah indeks refraction. Tampilannya berkisar dari kaca statis hingga televisi jadul. Kanvas HTML 5 dan JavaScript digunakan untuk membuat gerakan ultra-halus.
Lihat Pena GLSL: Sinar bias oleh Liam Egan
Cermin teks CSS murni oleh Tim
Teks yang dicerminkan ternyata sangat mudah diterapkan. Hanya dengan beberapa lusin baris CSS murni, Anda dapat mencapai efek menarik yang pasti akan menarik perhatian pengguna. Rahasianya ada di CSS mengubah properti, yang membalik versi cermin terbalik. Dari sana, gradien digunakan untuk membuat tampilan yang lebih realistis.
Lihat Pena Cermin teks css murni oleh Tim
Pembiasan Teks oleh Juan Fuentes
Tambahkan beberapa teks khusus dan cuplikan ini akan membuatnya terlihat seperti sedang dilihat melalui bola kristal. Gerakan kursor mengubah perspektif dan ukuran efek. Ketika dikombinasikan dengan latar belakang yang berwarna-warni, seluruh presentasi memiliki getaran tahun 1960-an.
Lihat Pena Pembiasan Teks oleh Juan Fuentes
Refleksi Telepon oleh Luke Lincoln
Lihat pandangan abstrak tentang obsesi modern ini – menatap kosong ke ponsel Anda. Klik pada telepon dan teks yang disimulasikan perlahan-lahan memantul ke atas tubuh subjek. Ini mirip dengan apa yang mungkin Anda lihat di bioskop yang gelap.
Lihat Pena Refleksi Telepon oleh luke lincoln
Refleksi Three.js oleh seanwasere
Berbicara tentang karya abstrak, papan permainan virtual ini adalah sesuatu untuk dilihat. Bola 3D cermin berguling-guling saat cahaya memantul darinya. Anda juga dapat mengubah perspektif pemandangan, menambahkan lebih banyak intrik ke efek khusus yang luar biasa. Jika astronot bermain game di luar angkasa, ini mungkin salah satunya.
Lihat Pena Refleksi Three.js oleh seanwasere
Menambahkan Perspektif Baru ke Web
Luar biasa kelihatannya, pengembang membuat beberapa efek cermin, refleksi, dan refraction yang sangat menakjubkan untuk web. Tidak hanya mereka terlihat luar biasa, tetapi banyak juga yang memanfaatkan fisika untuk menambahkan lapisan realisme juga.
Ingin melihat cuplikan terbaik lainnya? Intip kami Koleksi CodePen!
.
