Urutan judul bisa menjadi ikonik. Adegan-adegan akrab dari film, televisi, dan video game ini sering terukir dalam ingatan kita.
Mereka juga berfungsi sebagai semacam penanda budaya, membantu kita mendefinisikan sebuah era. Misalnya, Star Wars mulai mendefinisikan akhir 1970-an dan awal 1980-an. Belakangan ini, judul Stranger Things telah memalsukan ciri khasnya sendiri.
Jadi, tidak heran jika desainer web menggunakan urutan judul sebagai ajang pembuktian. Dengan membuat ulang favorit mereka di CSS dan JavaScript, mereka mempertajam keterampilan dan membayar upeti.
Mari kita lihat delapan judul terkenal yang menurut para desainer layak untuk ditiru. Beberapa adalah factionmili langsung, sementara yang lain menggunakan lisensi yang sedikit lebih artistik. Tapi mereka semua layak dirayakan dalam buku kami.
Morf Judul Avengers Infinity oleh Noah Malewicz
Serial komik dan film Avengers adalah fenomena dunia. Presentasi morphing ini dimulai dengan logo yang jelas dan diacak melalui berbagai karakter. SVG dan JavaScript digabungkan di sini untuk menciptakan gaya animasi yang halus dan tajam – Hulk akan bangga!
Lihat Pena Pembalas: Morf Tak Terbatas oleh Noah Malewicz
CSS Gatal & Menggaruk dari The Simpsons oleh Alvaro Montoro
Kucing dan tikus kartun favorit semua orang diwakili di sini dengan CSS murni. Judul pembuka (ditampilkan dalam episode The Simpsons yang tak terhitung jumlahnya) menunjukkan kekuatan pemosisian dan transformasi CSS. Bahkan mungkin mengungguli gaya aslinya yang sengaja disederhanakan.
Lihat Pena CSS Gatal & Gatal (dari The Simpsons) oleh Alvaro
Judul CSS animasi dari Frozen oleh Mandy Michael
Teks judul dari film-film Disney yang sangat dikagumi dibuat ulang menggunakan berbagai teknik CSS. Cuplikan menggabungkan gradien, mode campuran, dan kliping latar belakang untuk menghidupkan logo. Yang lebih baik lagi adalah Anda dapat menyesuaikan teks dengan mengeklik dan menulis pesan.
Lihat Pena CSS hanya teks Beku oleh Mandy Michael
Animasi Intro Netflix dalam CSS Murni oleh Claudio Bonfati
Siap untuk beberapa pertunjukan layak pesta? Urutan intro Netflix ini terlihat sangat otentik. Yang terbaik dari semuanya – tidak ada satu baris pun JavaScript yang terlihat. Presentasi rumit ini sepenuhnya terdiri dari HTML dan CSS.
Lihat Pena Netflix Intro Animation Pure CSS oleh Claudio Bonfati
Animasi Teks SNL oleh Tom Miller
Langsung dari web, ini Sabtu malam! Saturday Night Live yang legendaris telah melalui berbagai gaya. Animasi ini mencerminkan motif modern, dengan perpaduan huruf yang digambar tangan dan cakrawala Kota New York. Bagian terbaik? Anda tidak perlu begadang untuk menonton.
Lihat Pena Animasi Teks SNL oleh Tom Miller
Judul Pac-Man yang Responsif & Game yang Dapat Dimainkan oleh Margaux Darriberouge
Meskipun bukan reka ulang lengkap dari urutan judul, cuplikan PAC-MAN ini masih terlihat familier. Dan berkat beberapa JavaScript yang cerdas, Anda dapat memainkan game ini langsung di perangkat Anda. Silakan dan cobalah – kami akan berada di sini saat Anda kembali.
Lihat Pena Game Pac-Man (vanilla JS) – Responsif oleh Margaux Darriberouge
Judul & UI TV Teman oleh gema otak
Hidupkan kembali hari-hari kejayaan sitkom tahun 90-an yang populer dengan cuplikan ini. Font dan warna yang langsung dikenali semuanya ada di sana. Anda juga akan menemukan UI kartu, dengan kutipan karakter menyenangkan yang ditampilkan saat mengarahkan kursor ke salah satunya.
Lihat Pena TEMAN-TEMAN oleh otak gema
Judul Animasi Aliens oleh Chris Smith
Teks bersinar menyeramkan dari franchise film sci-fi ini tentu saja mengatur suasana hati. Dan itu dibangun menggunakan CSS yang sangat kecil. Kami tidak yakin apa yang lebih menakutkan: film atau kemudahan pembuatannya!
Lihat Pena Animasi teks alien oleh Chris Smith
Penggabungan Kode & Budaya Pop
Mungkin orang tidak berkumpul di sekitar televisi untuk menonton secara berkelompok akhir-akhir ini. Tapi acara TV, film, dan game masih menghubungkan kita. Dan upeti berbasis kode di atas adalah cara yang menyenangkan untuk berbagi ikatan itu.
Mereka juga menunjukkan beberapa lompatan teknis yang mengesankan. Animasi web, tipografi, dan efek khusus telah berkembang sedikit. Masing-masing berperan dalam membuat cuplikan ini dapat dikenali dan dinikmati.
Ingin melihat lebih banyak judul terkenal yang dibuat ulang dengan kode? Pastikan untuk mengunjungi kami Koleksi CodePen!
