8 Cuplikan CSS & JavaScript Ajaib Merayakan Harry Potter

8 Cuplikan CSS & JavaScript Ajaib Merayakan Harry Potter

Beberapa ikon budaya pop dapat menandingi jangkauan Harry Potter. Apa yang dimulai sebagai seri novel dengan cepat berubah menjadi fenomena global. Buku-buku telah diterjemahkan ke dalam puluhan bahasa. Film-film berikutnya meraup miliaran dolar. Belum lagi deretan besar koleksi dan atraksi hiburan.

Ini masalah yang cukup besar. Oleh karena itu, tidak heran jika dunia sihir ini juga telah menangkap imajinasi para pengembang web. Beberapa terlalu senang untuk memberi penghormatan kepada karakter dan adegan favorit mereka dengan sentuhan keajaiban CSS dan JavaScript.

Contoh utama ada di seluruh CodePen. Semuanya, mulai dari seni karakter hingga animasi kompleks sedang dipamerkan.

Hari ini, kami akan menunjukkan kepada Anda 8 cuplikan kode yang paling mengikat ejaan. Jadi, siapkan tongkatmu dan bersiaplah untuk perjalanan ke Hogwarts!

Animasi CSS:Peta Perampok oleh Olivia Ng

Istilah “dokumen hidup” memiliki arti yang sama sekali berbeda di dunia sihir. Lebih dari sekadar teks dan gambar statis, ini Peta Perampok juga melacak pergerakan Harry dan Profesor Snape. Dan ini adalah tempat yang ajaib, Anda bahkan dapat menggunakan mikrofon perangkat Anda untuk membuka peta.

Lihat Pena Animasi CSS:Peta Perampok oleh Olivia Ng

Ikon karakter Harry Potter div tunggal oleh Alvaro Montoro

Ketika Anda memikirkannya, ada jenis sihir khusus untuk cuplikan div tunggal. Dibutuhkan banyak kreativitas untuk membuat sesuatu yang unik seperti ikon karakter ini dalam satu wadah sederhana. Di sini kita memiliki karakter yang mewakili berbagai asrama Hogwarts – termasuk Harry dan Draco Malfoy. CSS Grid digunakan untuk membuat tata letak spot-on.

Lihat Pena Ikon karakter Harry Potter div tunggal oleh Alvaro Montoro

Harry Potter oleh Christina Stephan

Siapa yang siap untuk permainan? Quidditch? Animasi yang menyenangkan ini menampilkan Harry di sapunya, mengejar Golden Snitch yang sulit dipahami itu. Lebih baik lagi adalah seluruh cuplikan responsif, sehingga Anda dapat melihatnya terbang di layar berukuran apa pun.

Lihat Pena Harry Potter oleh Christina Stephan

Sahabat Boneka Harry Potter: Mengganggu oleh Christina Gorton

Di sini kita memiliki animasi warna-warni yang membayangkan Harry dan temannya Ron Weasley sebagai boneka. Apa yang mereka lakukan? Mengganggu Profesor Snape, tentu saja. Didukung oleh SVG dan GSAP, cuplikan ini menampilkan kualitas kekanak-kanakan yang luar biasa.

Lihat Pena Sahabat Boneka Harry Potter: Mengganggu oleh Christina Gorton

Relikui Kematian oleh Joshua Wardo

Dari buku terakhir dalam seri, Relikui Kematian adalah tiga objek magis yang kuat – dilambangkan di sini melalui CSS. Perhatikan juga animasi awan yang sangat halus di latar belakang, yang memberikan nuansa mistis pada pemandangan.

Lihat Pena Relikui Kematian oleh Joshua Wardo

CSS Puns – Jubah Gaib – Harry Potter oleh Maciej Leszczynski

Di antara item yang membentuk Relikui Kematian adalah Jubah Gaib. Memakainya dan menyelinap tanpa terlihat. Cuplikan ini menunjukkan kekuatannya, saat Harry mulai menghilang ketika jubah itu bergerak di depannya.

Lihat Pena CSS Puns – Jubah Gaib – Harry Potter oleh Maciej Leszczyński

Mad Libs – Edisi Harry Potter (pemain tunggal) oleh Sofia

Semua orang menyukai Mad Lib yang bagus! Ini semua tentang dunia sihir. Isi bagian yang kosong dan itu akan dimasukkan ke dalam bagian dari Harry Potter dan Batu Bertuah. Dari sudut pandang kode, fungsionalitas formulir disediakan oleh JavaScript – bukan PHP. Itu sendiri adalah sedikit keajaiban.

Lihat Pena Mad Libs – Edisi Harry Potter (pemain tunggal) oleh Sofia

Nabi Harian oleh Sowjanya

Setelah hari yang panjang menangkis pelaku kejahatan, senang meringkuk dengan edisi Nabi Harian. Surat kabar itu terkenal dengan gambar bergeraknya, dan faksimili ini benar-benar berbentuk. Sebagai bonus, ada beberapa efek melayang indah yang menghidupkan cerita.

Lihat Pena Nabi Harian oleh Sowjanya

Cuplikan Ajaib untuk Desainer Web

Sangat menyenangkan melihat penghormatan berbasis kode yang telah dikumpulkan oleh penggemar Harry Potter. Tapi itu lebih dari sekedar hiburan. Cuplikan ini juga memberikan kesempatan belajar.

Tempat ajaib ini berfungsi sebagai katalis sempurna untuk menciptakan efek khusus dan fungsionalitas dunia nyata. Kode yang terlihat di sini dapat disesuaikan untuk membumbui hampir semua proyek. Singkatnya: apa yang Anda pelajari di Hogwarts akan tetap bersama Anda selamanya.

Mencari lebih banyak cuplikan kode yang terinspirasi Harry Potter? Naik sapu Anda dan pergilah ke kami Koleksi CodePen untuk satu set lengkap.

.

Hit play on your imagination