8 CSS və JS hava widgetlarının böyük nümunələri

Hava gündəlik həyatımızın böyük bir hissəsidir. Buna görə hesabatlar yaratmaq üçün veb saytlardan və mobil tətbiqlərdən həmişə tələb olunur. İstifadəçilər, evlərinin xaricindəki mövcud şərtlərdən tutmuş ən sevimli istirahət yerlərinin proqnozuna qədər hər şeyi yoxlayacaqlar.

Cəlbedici bir istifadəçi interfeysi, havanı başa düşməyi asanlaşdırır və daha da əyləncəlidir. Dizaynerlər bunu rənglər, animasiyalar və əyləncəli simvollar birləşməsi ilə həyata keçirirlər. Bəzən bir və ya iki gözlənilməz sürpriz müsbət nəticə verə bilər.

Günəşli bir gün üçün dizayna uyğun hava istifadəçi interfeyslərinin bəzi nümunələrinə baxaq.

Həddən artıq vaxt.

Xəritə əsaslı istifadəçi interfeysi hava məlumatlarına təbii bir əlavədir. Səliqəli və səliqəli bir otaqdakı hər şeyə ehtiyacınız var. Ancaq bu fraqment ənənə ilə pozulur. Bu kiçik xəritədən kənara çıxan müxtəlif hava ssenarilərini canlandırın. Yağış, qar və günəş şüaları kartın hüdudlarından kənarda partladı.

Steve Gardner'in cizgi hava xəritəsinə baxın

Sadəcə gözəldir

Bu hava interfeysinin işini asanlaşdıran şey onun sadəliyidir. Tanınmış və yuvarlaq rəqəmlərin yüksək rəngli kontrastla birlikdə istifadəsi oxumağı asanlaşdırır. Daxil edilən fırlatma effektləri də izləyicinin diqqətini çəkəcəkdir.

Colin Espinas Pen Simple Weather tətbiqinin dizaynına baxın

Mücərrəd simvollar

Burada tipik hava görüntülərindən əhəmiyyətli dərəcədə fərqlənən bir qrup CSS3 simvolu var. Şəxsiyyət əlavə edən sadə animasiyalarla bir az mücərrəddirlər. Bu nümunədə bir qədər böyük olsa da, üslublar kiçik simvollar üçün də uyğundur. Çox yer tutmadan dayanmağın bir yolunu təklif edirlər.

Akhil Sai Ram'ın cizgi lələk hava simvollarına (saf CSS) baxın

SVG hərəkəti

Bu cizgi SVG simvolları kolleksiyası çox kəskindir. Cizgi hərəkəti intuitiv və diqqətəlayiqdir, lakin şişirdilmir. Daha da yaxşısı, onlar vektorlardır və istənilən ölçüdə ölçülə bilər. Hava istifadəsi üçün əla bir əlavədir.

Nat-dan lələklərə baxın

İstəyinizə görə yerli hava

Məkan xidmətləri saytınızın ziyarətçilərinə müvafiq məlumat vermək üçün əladır. Bu parç, yerinizi qeyd edərkən və cari hava şəraitini göstərdiyindən əla bir nümunədir. Arxa planda olan Google xəritəsi də xoş bir toxunuşdur.

McHenry'nin Qələm Şou Yerli Şousunu izləyin

Yumşaq dalğalar

Bu sitat bu siyahıdakı digər nümunələrin müxtəlif cəhətlərini özündə birləşdirir. Yerə əsaslanır, xəritə konteynerinə malikdir və sadə animasiyalardan istifadə edir. Nəticə olduqca minimal, lakin diqqətəlayiq bir hava widgetıdır. İstifadəçilərinizi yeniləmək üçün həddən artıq dizayna sahib çıxmamağınızın sübutudur.

Kodlaşdırıcı Aviator Qələm Hava Xəritəsinə baxın

İndi və bundan sonra

Budur yerinizi ələ keçirən və ertəsi gün gecə yarısına qədər nə gözlədiyinizi göstərən cəlbedici bir widget. Cari temperaturu və digər müvafiq məlumatları əvvəldən tapa bilərsiniz. Aşağıya fırladın və otuz saat artımda nələrin göründüyünə baxın. Daxil olan video fon görünüşü həqiqətən tamamlayır.

Qələmin axıcılığına baxın: CIT261, Bermon Painter

Budur bugünkü havada Mario.

Bu gözəl hava istifadəçi interfeysi dəqiq olmasa da, izləmək çox əyləncəlidir. Şounun ulduzuna heç bir giriş lazım deyil və səmadakı qəzəbli günəş gözəl xatirələri (və ya dəhşətləri) canlandırır. Həqiqi bir proqnoz almaq üçün bunu istənilən vaxt bir API-yə bağlaya bilərsiniz.

ErreC'in Super Mario Hava Qələminə baxın

Veb saytınızı hava şəraitinə uyğunlaşdırın

Saytınızdakı hava şəraitini göstərmək texniki cəhətdən çətin deyil. Təəccüblü (lakin gözə çarpan) bir istifadəçi interfeysinin dizaynı real problemdir.

Buradakı nümunələr (Mario istisna olmaqla) vacib məlumatları göstərmək üçün təmiz və unikal bir yol təqdim edir. Animasiyalardan istifadə xüsusilə əyləncəlidir, çünki müxtəlif hava şəraitlərinə kontekst əlavə edirlər. Statik görüntüdən daha əyləncəlidir.

Hava istifadəçi interfeysində daha çox bölmə axtarırsınız? Çətirinizi yığın və CodePen kolleksiyamızı ziyarət edin!