12 Landschaftsszenen, die vollständig mit CSS und SVG erstellt wurden

Sie können einige ziemlich verrückte Sachen mit SVGs machen. Es ist Entwicklern möglich, Grafiken ohne Bilddateien auf einer Seite zu codieren, indem sie einfach die SVG- und Canvas-Funktion verwenden.

Das führt zu wirklich coolen Projekten wie den reinen SVG-Landschaften, die ich hier gesammelt habe.

Alle diese Projekte können völlig kostenlos bearbeitet und verwendet werden. Sie arbeiten an SVG-Code zusammen mit etwas grundlegendem CSS und JS, um Animationen, Verzerrungen und Parallaxeneffekte zu erstellen.

Hawkes Bay

Dieses Beispiel einer wunderschönen Buchtlandschaft wurde von Louis Coyle entwickelt. Es folgt einem Poly-Stil-Look, der die Polygon-Anzeige nachahmt, die typischerweise beim 3D-Rendering zu finden ist.

Es ist ein beliebter Effekt bei SVG und JavaScript, aber sicherlich nicht einfach zu erreichen.

Louis verwendet die TweenMax-Bibliothek, um die Animationen zu erstellen, die sowohl im Stil als auch im Code elegant sind.

Wenn Sie sich schon immer mit rohem SVG-Code befassen wollten, können Sie mit diesem Snippet viel lernen.

Low-Poly-Landschaft

Hier ist eine weitere Landschaft, die dem Low-Poly-Look nachempfunden ist.

Dieser stammt von Entwickler Luke Reid und legt einen viel stärkeren Fokus auf 3D-Effekte. Das gesamte Layout fühlt sich sehr echt an, und der mit Sternen übersäte Himmelsverlauf haucht diesem Design Leben ein.

Wenn Sie sich den JavaScript-Code ansehen, sehen Sie, dass die Sternpositionen zufällig generiert werden. Dies ist ein cooler Effekt, wenn Sie jemals einen SVG-Hintergrund oder einen Helden-Header-Stil entwerfen.

SVG-Landschaftsanimation

Evan Winston hat diese benutzerdefinierte Animation entwickelt, die langsam alle sichtbaren Elemente ins Blickfeld rückt.

Es ist ein ziemlich cooler Effekt, und es ist etwas, das jeder erstellen könnte. Zugegeben, dies ist möglicherweise nicht so nützlich wie eine riesige Hintergrundillustration, hauptsächlich wegen der Zeit, die für die Fertigstellung der Animation benötigt wird.

Aber Sie könnten etwas Ähnliches mit benutzerdefinierten SVG-Symbolen auf einer Website machen. Es gibt viele Tutorials, die Ihnen helfen, einfache SVGs zu entwerfen und sie dann mit Code aus dem obigen Snippet zu animieren (läuft auch auf TweenMax).

Meereslandschaft

Für eine einfache Seeansicht grabe ich wirklich dieses SVG-Snippet. Es enthält einige grundlegende Seitenanimationen wie die Wellen im Wasser und die Wolken im Hintergrund.

All diese Dinge sind mit ein wenig JavaScript ziemlich einfach zu erledigen. Aber Sie werden feststellen, dass dieses Snippet mit reinem CSS erstellt wurde, was es noch beeindruckender macht!

Moderne CSS3-Animation ist am nützlichsten in Websites mit UI/UX-Animationen, aber Sie können sie auch für Landschaften oder Illustrationen verwenden. Das ist der halbe Spaß, ein Entwickler zu sein.

Winterlandschaft

Diese Winterlandschaft erinnert an den strahlend weißen Schnee, den wir jedes Jahr sehen.

Andrey Sorokin hat diese grundlegende Animation nur mit SVG-Code und etwas JavaScript erstellt. Die Animation kann langsam sein, sodass Sie möglicherweise eine Minute warten müssen, um den vollen Effekt zu sehen.

Am meisten beeindruckt mich die Qualität der Easing-Effekte und wie gut das im Browser funktioniert.

Basierend darauf, wie viele Elemente animiert werden, hätte ich ein wenig Trägheit angenommen, aber es wird unglaublich schnell geladen, wenn man bedenkt, wie viel passiert.

Ganz zu schweigen von der Animation der Sonne, die aus dem Baum kommt, ist einfach entzückend.

SVG-Landschaft

Wir haben ein massives Wachstum bei flachen Designtrends und halbflachen Designs erlebt, die alle Grundfarben ohne Farbverläufe verwenden.

Dieser Ausschnitt folgt dem gleichen Stil mit harten Kanten für die Schatten und Ecken.

Es ist ein wunderschönes Snippet und sicherlich eine der einfachsten SVG-Landschaften, mit denen man arbeiten kann. Auch wenn Sie noch nie SVG-Code verwendet haben, bietet dieses Snippet viel zu untersuchen und viele SVG/XML-Attribute, mit denen Sie bei Google suchen können, um mehr zu erfahren.

Natürliche Landschaft

Entwickler Amr Zakaria hat mit dieser Landschaft ein ähnliches flaches Design mit animierten Booten und Flugzeugen geschaffen, um Ihre Aufmerksamkeit zu erregen.

Das Ganze läuft auf reinem CSS und funktioniert mit einigen recht übersichtlichen CSS-Keyframe-Animationen.

All dies kann für einen Hintergrund auf einer Webseite repliziert werden, wenn Sie die Geduld haben, es zum Laufen zu bringen. Der schwierigste Teil besteht darin, dies für mobile Bildschirme vollständig reaktionsfähig zu machen.

Parallax-Lichter

Von allen Parallaxeneffekten im Web ist dieser sehr einfach. Es ist jedoch auch ziemlich beeindruckend, da das Ganze nur mit CSS funktioniert und kein Skripting erforderlich ist.

Alle Elemente einschließlich der Straßenlaternen sind mit SVG-Formen und CSS-Effekten gestaltet.

Wenn Sie genau hinschauen, werden Sie feststellen, dass die Lampen tatsächlich den CSS-Schatteneffekt verwenden, um ein realistisches Leuchten zu erzeugen.

Grundlegende Animationen

In dieser aktualisierten SVG-Landschaft finden Sie eine Menge benutzerdefinierter Elemente, die ins Blickfeld springen.

Der Schöpfer Stef van Dijk achtet sorgfältig auf jede Animation, indem er jedem Stück hüpfende und schwerkraftähnliche Effekte hinzufügt. Wenn zum Beispiel die Berge in Sichtweite kommen, werden Sie einen Rückpralleffekt vom Boden bemerken.

Das ist es, was man bekommt, wenn man sorgfältig auf Details achtet, und deshalb bin ich so ein großer Fan von modernen Web-Animationen.

SVG und CSS

Sehen Sie sich diesen Stift für eine übergroße Hintergrundanimation an. Das Ganze funktioniert auf SVGs und reinem CSS ohne JavaScript.

Langsam kommen Ebenen der Landschaft ins Blickfeld, und alle haben ihre eigenen Keyframe-Animationen. Aber sobald sie in Sicht sind, werden Sie feststellen, dass sich einige Elemente weiter bewegen (wie die Sonne und die Wolken).

So etwas zu entwerfen braucht viel Zeit. Aber es wird Sie auch mit der SVG-Syntax zusammen mit den Grundlagen der CSS-Animation vertraut machen.

Gras

Obwohl diese Landschaft sehr einfach ist, denke ich auch, dass sie ein großartiger Lehrmeister für neue Frontend-Programmierer ist.

Felix De Montis hat dieses Projekt von Grund auf mit einer kleinen Menge SVG-Code für das Gras, die Hügel und die Bäume erstellt. Es ist einfach genug, das zu replizieren und die Positionen auch mit CSS zu ändern.

Alles in allem, wenn Sie auf einfache SVG-Designs stehen, ist dies ein großartiger Ausgangspunkt. Felix verwendet auch den LESS-Präprozessor, wenn Sie nach etwas suchen, das über einfaches CSS hinausgeht.

Parallaxe Seite

Chris Gruber hat diese makellose Parallaxenlandschaft entwickelt, die sich basierend auf Ihren Mausbewegungen bewegt.

Daneben animierte er aber auch bestimmte Seitenelemente wie das Segelboot und die Hintergrundwolken.

Dies alles erfordert sehr wenig JavaScript, da es mit weniger als 20 Zeilen jQuery arbeitet. Umso beeindruckender, wenn man bedenkt, wie detailliert diese ist.