8 Cuplikan CSS & JavaScript yang Merayakan Musim Semi

Kedatangan musim semi selalu menjadi alasan untuk perayaan. Bunga mulai bermekaran, dunia hewan penuh dengan kehidupan baru, dan suhu yang lebih hangat menyembuhkan kita dari demam kabin.

Tidak mengherankan bahwa musim juga menginspirasi kreativitas. Desainer web telah dikenal untuk membangun penghormatan mereka sendiri. Semburan warna dan animasi yang terinspirasi alam muncul di mana-mana. Ini adalah tanda pasti dari pembaruan.

Dengan itu, kami telah mengumpulkan beberapa cuplikan CSS dan JavaScript menakjubkan yang merayakan musim semi. Anda akan menemukan banyak warna pastel, bunga, dan anak ayam di sini. Oh, dan beberapa keterampilan desain dan pengkodean yang luar biasa juga. Mari kita mulai!

Kepik di Padang Rumput oleh Paul J Karlik

Saat taman musim semi mulai tumbuh, kepik tidak bisa jauh di belakang. Animasi 3D yang luar biasa ini menunjukkan serangga-serangga yang menggemaskan dengan bangga dalam perjalanan. Seret kursor Anda ke atas kanvas untuk mengubah perspektif.

Lihat Pena Kepik di Padang Rumput oleh Paul J Karlik

Rakyat Musim Semi oleh Sophia

Cuplikan ini menawarkan pemandangan musim semi yang lebih tradisional dengan warna yang diredam. Ini menampilkan seni rakyat animasi yang berubah saat diklik atau disadap. Semuanya didukung oleh JavaScript, dengan hanya gaya tubuh minimal yang diterapkan.

Lihat Pena Rakyat Musim Semi oleh Sophia

Penggeser pot bunga oleh Chris Gannon

Itu selalu menyenangkan ketika kode digabungkan dengan karya seni yang digambar tangan. Lebih bagus lagi kalau interaktif, seperti penggeser pot bunga ini. Saat Anda menyeret penggeser melintasi layar, satu bunga aster muncul. Bunga kemudian menghilang ketika Anda telah mencapai pengaturan yang diinginkan.

Lihat Pena Penggeser Pot Bunga oleh Chris Gannon

Telur Paskah oleh Nate Wiley

Telur pastel yang indah adalah bintang dari cuplikan ini. Animasi berjalan dengan sendirinya tetapi benar-benar lepas landas saat Anda menggerakkan kursor di sekitar layar. Telur ada di mana-mana!

Lihat Pena Telur Paskah oleh Nate Wiley

Animal Crossing: Hari Libur Isabelle (CSS Murni) oleh Elisabéth

Sementara seri video game Animal Crossing menampilkan semua musim, sulit untuk tidak memikirkan musim semi saat melihat cuplikan ini. Warna-warna cerah dan bunga-bunga mekar memunculkan perasaan hangat. Dan poin ekstra di sini untuk mengintegrasikan Nintendo Switch ke dalam desain.

Lihat Pena Animal Crossing: Hari Libur Isabelle ️(CSS Murni) oleh Elisabéth

Klik dan gambar beberapa bunga oleh Pogany

Ubah layar Anda menjadi surga bunga dengan kreasi JavaScript yang luar biasa ini. Klik dan seret kursor Anda melintasi layar untuk “menggambar” bunga. Semakin sering Anda menggambar di area tertentu, semakin besar bunganya.

Lihat Pena Klik dan gambar beberapa bunga oleh Pogany

Tarian Bunga oleh agathaco

Apakah musim semi membuatmu ingin bangun dan menari? Anda mungkin ingin melihat animasi bunga yang menyenangkan ini. Pilih jenis tarian yang Anda inginkan untuk ditampilkan dan sactionkan tariannya turun.

Lihat Pena Tarian bunga oleh agathaco

Cewek di Dunia Piksel 3D (Tanpa Javascript) oleh Takane Ichinose

Warna musim semi terlihat menakjubkan di hampir setiap pengaturan – termasuk seni piksel. Di sini kita memiliki anak ayam kecil yang berlari berputar-putar, menunggu untuk melebarkan sayapnya dan terbang. Arahkan kursor ke atasnya dan sactionkan si imut kecil lepas landas.

Lihat Pena Cewek di Dunia Piksel 3D (Tanpa Javascript) oleh Takane Ichinose

Masuk ke dalam Kode dan Desain Kreatif

Dunia di luar jendela adalah tempat yang tepat untuk mencari inspirasi. Dan setelah musim cuaca dingin, banyak dari kita menemukan bahwa musim semi membuat kreativitas kita mengalir lagi.

Seperti yang ditunjukkan di atas, musim semi lebih dari sekadar warna. Desainer berbakat telah memanfaatkan energi itu untuk menghasilkan UI unik dan elemen interaktif yang luar biasa. Optimisme dan kegembiraan hampir melompat dari layar.

Ingin melihat sekilas cuplikan musim semi lainnya? Lihatlah kami Koleksi CodePen.

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart
Select your currency
Scroll to Top