8 fantastyczne przykłady widżetów pogodowych CSS i JS

Pogoda jest ważną częścią naszego codziennego życia. Dlatego strony internetowe i aplikacje mobilne zawsze muszą zgłaszać. Użytkownicy będą chcieli sprawdzić wszystko, od bieżących warunków poza domem po prognozę ulubionego miejsca na wakacje.

Atrakcyjny interfejs użytkownika może sprawić, że pogoda będzie łatwiejsza do zrozumienia, a nawet bardziej zabawna. Projektanci osiągają to dzięki kombinacji kolorów, animacji i zabawnych ikon. Czasami nieoczekiwana niespodzianka lub dwie mogą również mieć pozytywny wpływ.

Rzućmy okiem na kilka przykładów interfejsów pogodowych, które są odpowiednikiem projektu w słoneczny dzień.

Czas poza granicami

Interfejsy użytkownika oparte na kartach wydają się naturalnie pasować do danych pogodowych. Wszystko, czego potrzebujesz, znajduje się w schludnej i uporządkowanej przestrzeni. Ale ten fragment zrywa z tradycją. Animuj różne scenariusze pogodowe, które wykraczają poza tę małą kartę. Deszcz, śnieg i promienie słońca wybuchają poza granicami karty.

Zobacz animowane karty pogody długopisu Steve'a Gardnera

Po prostu piękna

Tym, co sprawia, że ​​interfejs pogodowy działa, jest jego prostota. Zastosowanie znanych i zaokrąglonych kształtów w połączeniu z wysokim kontrastem kolorów ułatwia czytanie. Dołączone efekty przewijania z pewnością przyciągną uwagę widza.

Zobacz projekt aplikacji Pen Simple Weather autorstwa Colina Espinas

Streszczenie ikony

Oto grupa ikon CSS3, które wyraźnie wyglądają inaczej niż typowe obrazy pogodowe. Są nieco abstrakcyjne, a proste animacje dodają osobowości. Chociaż w tym przykładzie są nieco większe, style nadają się również do małych ikon. Oferują sposób na wyróżnienie się bez zajmowania zbyt dużej przestrzeni.

Zobacz animowane ikony pogody z piórami (czysty CSS) autorstwa Akhil Sai Ram

Ruch SVG

Ta kolekcja animowanych ikon SVG jest bardzo ostra. Animowane ruchy są intuicyjne i niezwykłe, ale nie przesadzone. Jeszcze lepsze jest to, że są wektorami i mogą być skalowane do dowolnego rozmiaru. Stanowią świetny dodatek do każdej aplikacji pogodowej.

Spójrz na pióro niektóre ikony svgs autorstwa Nat

Twoja lokalna pogoda na żądanie

Usługi oparte na lokalizacji doskonale nadają się do dostarczania odpowiednich informacji odwiedzającym witrynę. Ten fragment jest doskonałym przykładem, ponieważ wykrywa Twoją lokalizację i pokazuje aktualną pogodę. Mapa Google w tle jest również miłym akcentem.

Zobacz Pen Show Local Weather autorstwa Den McHenry

Miękkie fale

Ten fragment łączy różne aspekty innych przykładów z tej listy. Jest oparty na lokalizacji, ma pojemnik podobny do karty i wykorzystuje prostą animację. Rezultatem jest widget pogody, który jest dość minimalny, ale niezwykły. To dowód na to, że nie musisz przytłaczać użytkowników zbyt dużą ilością projektów, aby informować ich o tym.

Zobacz kartę pogodową pióra kodującego lotnika

Teraz i poza nią

Oto atrakcyjny widżet, który pobiera Twoją lokalizację i pokazuje, czego możesz się spodziewać do północy następnego dnia. Od samego początku znajdziesz aktualną temperaturę i inne istotne dane. Przewiń w dół i zobacz, jak będzie wyglądać co trzy godziny. Dołączone tło wideo naprawdę uzupełnia wygląd.

Zobacz płynność pióra – CIT261 autorstwa Bermona Paintera

Oto Mario z dzisiejszą pogodą

Chociaż ten wspaniały interfejs pogodowy nie jest dokładny, oglądanie go jest przyjemne. Gwiazda serialu nie wymaga przedstawiania, a gniewne słońce na niebie przywraca miłe wspomnienia (lub przerażenie). Ponadto zawsze możesz połączyć to z interfejsem API, aby uzyskać prawdziwą prognozę.

Zobacz Pen Super Mario Weather autorstwa ErreC

Ubierz swoją stronę internetową na pogodę

Wyświetlanie pogody na swojej stronie niekoniecznie jest trudne z technicznego punktu widzenia. Ale zaprojektowanie przyciągającego wzrok interfejsu użytkownika (przy zachowaniu dyskrecji) jest prawdziwym wyzwaniem.

Przykłady tutaj (z możliwym wyjątkiem Mario) oferują czysty i unikalny sposób wyświetlania ważnych informacji. Korzystanie z animacji jest szczególnie przyjemne, ponieważ dodaje kontekst do różnych rodzajów pogody. Co więcej, jest bardziej zabawny niż obraz statyczny.

Szukasz więcej fragmentów interfejsu pogodowego? Spakuj parasol i idź do naszej kolekcji CodePen!