8 contoh bagus widget cuaca CSS dan JS

Cuaca adalah bagian besar dari kehidupan kita sehari-hari. Karenanya, situs web dan aplikasi seluler selalu diharuskan untuk membuat laporan. Pengguna akan memeriksa semuanya, mulai dari kondisi saat ini di luar rumah mereka hingga prediksi resor favorit mereka.

Antarmuka pengguna yang menarik dapat membuat cuaca lebih mudah dipahami dan bahkan lebih menghibur. Desainer mencapai ini melalui kombinasi warna, animasi, dan simbol yang menyenangkan. Terkadang satu atau dua kejutan yang tidak terduga dapat memiliki efek positif.

Mari kita lihat beberapa contoh antarmuka pengguna cuaca yang cocok dengan desain untuk hari yang cerah.

Waktu melampaui batas.

Antarmuka pengguna berbasis peta tampaknya merupakan tambahan alami untuk data cuaca. Yang Anda butuhkan adalah segalanya di ruangan yang rapi dan rapi. Tetapi fragmen ini pecah dengan tradisi. Menghidupkan berbagai skenario cuaca yang melampaui peta kecil ini. Hujan, salju, dan sinar matahari meledak di luar batas kartu.

Lihat peta cuaca animasi Steve Gardner

Cantik sekali

Apa yang membuat antarmuka cuaca ini bekerja adalah kesederhanaannya. Penggunaan figur yang terkenal dan bulat bersama dengan kontras warna yang tinggi membuatnya mudah dibaca. Efek gulir yang disertakan juga akan menarik perhatian pemirsa.

Lihat desain aplikasi Colin Espinas Pen Cuaca Sederhana

Simbol abstrak

Berikut adalah sekelompok simbol CSS3 yang berbeda secara signifikan dari gambar cuaca biasa. Mereka agak abstrak dengan animasi sederhana yang menambah kepribadian. Meskipun sedikit lebih besar dalam contoh ini, gaya juga cocok untuk simbol kecil. Mereka menawarkan cara untuk menonjol tanpa menghabiskan terlalu banyak ruang.

Lihat simbol cuaca animasi Akhil Sai Ram (CSS murni)

Gerakan SVG

Koleksi simbol SVG animasi ini sangat tajam. Gerakan animasi ini intuitif dan luar biasa, tetapi tidak berlebihan. Bahkan lebih baik, mereka vektor dan dapat diskalakan dengan ukuran berapa pun. Mereka adalah tambahan yang bagus untuk segala cuaca.

Lihatlah bulu beberapa simbol cuaca dari Nat

Cuaca lokal Anda berdasarkan permintaan

Layanan lokasi sangat bagus untuk memberikan informasi yang relevan kepada pengunjung situs Anda. Cuplikan ini adalah contoh yang sangat baik karena merekam lokasi Anda dan menampilkan cuaca saat ini. Google map di latar belakang juga merupakan sentuhan yang bagus.

Tonton The McHenry's Pen Show Tampilkan Lokal

Gelombang lembut

Kutipan ini menggabungkan berbagai aspek dari contoh lain dalam daftar ini. Berbasis lokasi, memiliki wadah peta dan menggunakan animasi sederhana. Hasilnya adalah widget cuaca yang sangat minim tapi luar biasa. Ini bukti bahwa Anda tidak perlu membebani pengguna dengan desain terlalu banyak untuk membuat mereka tetap terbarui.

Lihat The Coding Aviator Pen Weather Map

Sekarang dan selanjutnya

Berikut adalah widget menarik yang menangkap lokasi Anda dan menunjukkan kepada Anda apa yang diharapkan hingga tengah malam di hari berikutnya. Anda dapat menemukan suhu saat ini dan data relevan lainnya dari awal. Gulir ke bawah dan lihat apa yang terlihat dalam kenaikan tiga puluh jam. Latar belakang video yang disertakan benar-benar melengkapi tampilan.

Lihat fluiditas pena: CIT261 oleh Bermon Painter

Inilah Mario dalam cuaca hari ini.

Meskipun antarmuka pengguna cuaca yang luar biasa ini tidak akurat, sangat menyenangkan untuk menonton. Bintang pertunjukan tidak perlu diperkenalkan, dan matahari yang marah di langit memunculkan kenangan indah (atau kengerian). Anda juga dapat menghubungkan ini ke API kapan saja untuk mendapatkan perkiraan yang sebenarnya.

Lihat Pena Cuaca Super Mario ErreC

Sesuaikan situs web Anda untuk cuaca

Menampilkan cuaca di situs Anda secara teknis tidak sulit. Merancang antarmuka pengguna yang mencolok (tapi tidak mencolok) adalah tantangan nyata.

Contoh di sini (dengan pengecualian Mario) menyediakan cara yang bersih dan unik untuk menampilkan informasi penting. Animasi sangat menyenangkan untuk digunakan karena mereka menambah konteks pada berbagai jenis cuaca. Ini juga lebih menyenangkan daripada gambar statis.

Mencari lebih banyak bagian di antarmuka pengguna cuaca? Kemasi payung Anda dan kunjungi koleksi CodePen kami!