12 scen krajobrazowych zbudowanych w całości za pomocą CSS i SVG

Z SVG możesz zrobić całkiem szalone rzeczy. Deweloperzy mogą kodować grafikę na stronie bez żadnych plików graficznych, korzystając tylko z funkcji SVG i kanwy.

Prowadzi to do naprawdę fajnych projektów, takich jak czyste krajobrazy SVG, które tutaj zebrałem.

Wszystkie te projekty można edytować i używać za darmo. Pracują nad kodem SVG wraz z podstawowymi CSS i JS, aby tworzyć animacje, zniekształcenia i efekty paralaksy.

Zatoka Hawke'a

Ten przykład pięknego krajobrazu zatoki opracował Louis Coyle. Naśladuje wielokątny wygląd, który zwykle występuje w renderowaniu 3D.

Jest to popularny efekt w SVG i JavaScript, ale z pewnością nie jest łatwy do wykonania.

Louis używa biblioteki TweenMax do tworzenia animacji, które są eleganckie zarówno pod względem stylu, jak i kodu.

Jeśli kiedykolwiek chciałeś zagłębić się w surowy kod SVG, ten fragment ma wiele do nauczenia się.

Krajobraz Low Poly

Oto kolejny krajobraz wzorowany na wyglądzie low poly.

Ten pochodzi od programisty Luke'a Reida i kładzie znacznie większy nacisk na efekty 3D. Cały układ wydaje się bardzo realistyczny, a gradient nieba usiany gwiazdami tchnie życie w ten projekt.

Jeśli spojrzysz na kod JavaScript, zobaczysz, że pozycje gwiazdek są generowane losowo. To fajny efekt, jeśli kiedykolwiek projektujesz tło SVG lub styl nagłówka bohatera.

Animacja krajobrazu SVG

Evan Winston opracował tę niestandardową animację, która powoli pokazuje wszystkie widoczne elementy.

To całkiem fajny efekt i każdy może to stworzyć. To prawda, że ​​może to nie być tak przydatne, jak ogromna ilustracja tła, głównie ze względu na czas potrzebny na ukończenie animacji.

Ale możesz zrobić coś podobnego z niestandardowymi ikonami SVG na stronie internetowej. Istnieje wiele samouczków, które pomogą Ci zaprojektować podstawowe pliki SVG, a następnie animować je za pomocą kodu z powyższego fragmentu (również działającego na TweenMax).

Krajobraz morski

Aby uzyskać podstawowy widok nad jeziorem, naprawdę kopię ten fragment SVG. Zawiera kilka podstawowych animacji na stronie, takich jak fale na wodzie i chmury w tle.

Wszystkie te rzeczy są dość łatwe do zrobienia za pomocą odrobiny JavaScript. Ale zauważysz, że ten fragment jest zrobiony z czystego CSS , co czyni go jeszcze bardziej imponującym!

Nowoczesna animacja CSS3 jest najbardziej przydatna w witrynach z animacjami UI/UX, ale można jej również używać do tworzenia krajobrazów lub ilustracji. To połowa radości z bycia programistą.

Zimowy krajobraz

Ten zimowy krajobraz przypomina o śnieżnobiałym śniegu, który widzimy każdego roku.

Andrey Sorokin stworzył tę podstawową animację za pomocą kodu SVG i trochę JavaScript. Animacja może być powolna, więc być może będziesz musiał poświęcić minutę, aby zobaczyć pełny efekt.

Jestem pod wrażeniem jakości efektów wygładzania i tego, jak dobrze to działa w przeglądarce.

Opierając się na tym, ile elementów jest animowanych, założyłbym, że jest trochę powolny, ale ładuje się niesamowicie szybko, biorąc pod uwagę, jak wiele się dzieje.

Nie wspominając już o animacji słońca wychodzącego z drzewa, jest po prostu zachwycająca.

Sceneria SVG

Widzieliśmy ogromny wzrost trendów w projektowaniu płaskich i półpłaskich, które wykorzystują podstawowe kolory bez gradientów.

Ten fragment ma ten sam styl z twardymi krawędziami dla cieni i narożników.

To piękny fragment i z pewnością jeden z najłatwiejszych do pracy krajobrazów tylko w formacie SVG. Nawet jeśli nigdy wcześniej nie używałeś kodu SVG, ten fragment oferuje wiele do obejrzenia i wiele atrybutów SVG/XML, które możesz wyszukać w Google, aby dowiedzieć się więcej.

Naturalny krajobraz

Deweloper Amr Zakaria stworzył podobny płaski projekt z tym krajobrazem, używając animowanych łodzi i samolotów, aby przyciągnąć twoją uwagę.

Całość działa na czystym CSS i działa z całkiem przejrzystymi animacjami CSS.

Wszystko to można odtworzyć w tle na stronie internetowej, jeśli masz cierpliwość, aby działało. Najtrudniejsze jest to, aby było to w pełni responsywne na ekranach mobilnych.

Światła paralaksy

Ze wszystkich efektów paralaksy w sieci ten jest bardzo prosty. Jednak jest to również imponujące, ponieważ całość działa tylko na CSS , nie wymaga skryptów.

Wszystkie elementy, w tym lampy uliczne, zostały zaprojektowane z wykorzystaniem kształtów SVG i efektów CSS.

Jeśli przyjrzysz się naprawdę blisko, zauważysz, że lampy faktycznie wykorzystują efekt cieni CSS, aby stworzyć realistyczny blask.

Podstawowe animacje

W tym zaktualizowanym krajobrazie SVG znajdziesz mnóstwo niestandardowych elementów, które odbijają się w widoku.

Twórca Stef van Dijk zwraca szczególną uwagę na każdą animację, dodając do każdego elementu efekty podskakujące i grawitacyjne. Na przykład, gdy w polu widzenia pojawią się góry, zauważysz efekt odbicia od ziemi.

To właśnie otrzymujesz, gdy zwracasz szczególną uwagę na szczegóły i dlatego jestem tak wielkim fanem nowoczesnych animacji internetowych.

SVG i CSS

Spójrz na to pióro, aby uzyskać powiększoną animację tła. Całość działa na SVG i czystym CSS bez żadnego JavaScriptu.

Powoli pojawiają się warstwy krajobrazu i wszystkie mają własne animacje klatek kluczowych. Ale kiedy już je zobaczysz, zauważysz, że niektóre elementy wciąż się poruszają (takie jak słońce i chmury).

Zaprojektowanie czegoś takiego zajmuje dużo czasu. Ale pozwoli ci również zapoznać się ze składnią SVG oraz podstawami animacji CSS.

Trawa

Chociaż ten krajobraz jest bardzo prosty, myślę, że jest również świetnym nauczycielem dla nowych programistów frontendowych.

Felix De Montis zbudował ten projekt od podstaw z niewielką ilością kodu SVG dla trawy, wzgórz i drzew. Łatwo to powtórzyć i zmienić pozycje również za pomocą CSS.

Ogólnie rzecz biorąc, jeśli interesują Cię proste projekty SVG, ten jest świetnym miejscem do rozpoczęcia. Felix używa również preprocesora LESS, jeśli szukasz czegoś poza podstawowym CSS.

Strona paralaksy

Chris Gruber opracował ten nieskazitelny krajobraz paralaksy, który porusza się w oparciu o ruchy myszy.

Ale oprócz tego animował także pewne elementy strony, takie jak żaglówka i chmury w tle.

To wszystko wymaga bardzo mało JavaScriptu, ponieważ działa na mniej niż 20 liniach jQuery. Tym bardziej imponujące, biorąc pod uwagę, jak bardzo jest to szczegółowe.