12 scene de peisaj construite în întregime cu CSS și SVG

Puteți face niște lucruri destul de nebunești cu SVG-uri. Este posibil ca dezvoltatorii să codifice grafice pe o pagină fără fișiere de imagine doar folosind funcția SVG și pânză.

Acest lucru duce la proiecte cu adevărat interesante, cum ar fi peisajele SVG pure pe care le-am adunat aici.

Toate aceste proiecte sunt complet libere de editat și utilizat. Ei lucrează pe cod SVG împreună cu unele CSS și JS de bază pentru a crea animații, distorsiuni și efecte de paralaxă.

Golful lui Hawke

Acest exemplu de peisaj frumos de golf a fost dezvoltat de Louis Coyle. Urmează un aspect în stil poli care imită afișarea poligonului întâlnită de obicei în randarea 3D.

Este un efect popular cu SVG și JavaScript, dar cu siguranță nu este ușor de realizat.

Louis folosește biblioteca TweenMax pentru a crea animații elegante atât în ​​stil, cât și în cod.

Dacă ați dorit vreodată să cercetați codul SVG brut, acest fragment are multe din ce învăța.

Peisaj Low Poly

Iată un alt peisaj modelat după aspectul low poly.

Acesta vine de la dezvoltatorul Luke Reid și pune un accent mult mai puternic pe efectele 3D. Întregul aspect pare foarte real, iar gradientul cerului presărat cu stele dă viață acestui design.

Dacă te uiți la codul JavaScript, vei vedea că pozițiile stelelor sunt generate aleatoriu. Acesta este un efect grozav dacă proiectați vreodată un fundal SVG sau un stil de antet erou.

Animație peisaj SVG

Evan Winston a dezvoltat această animație personalizată care aruncă încet toate elementele vizibile în vedere.

Este un efect destul de cool și este ceva pe care oricine l-ar putea crea. Desigur, aceasta poate să nu fie atât de utilă ca o ilustrație uriașă de fundal, mai ales din cauza timpului necesar pentru finalizarea animației.

Dar puteți face ceva similar cu pictogramele SVG personalizate de pe un site web. Există o mulțime de tutoriale care vă ajută să proiectați SVG-uri de bază și apoi să le animați folosind codul din fragmentul de mai sus (care rulează și pe TweenMax).

Peisaj Marin

Pentru o vedere de bază pe malul lacului, caut cu adevărat acest fragment SVG. Prezintă câteva animații de bază ale paginilor, cum ar fi valurile în apă și norii în fundal.

Toate aceste lucruri sunt destul de ușor de făcut cu puțin JavaScript. Dar veți observa că acest fragment este realizat cu CSS pur , făcându-l și mai impresionant!

Animația CSS3 modernă este cea mai utilă în site-urile web cu animații UI/UX, dar o puteți folosi și pentru peisaje sau ilustrații. Asta e jumătate din distracția de a fi dezvoltator.

Peisaj de iarnă

Acest peisaj de iarnă ne amintește de zăpada albă crocantă pe care o vedem în fiecare an.

Andrey Sorokin a creat această animație de bază doar cu cod SVG și ceva JavaScript. Animarea poate fi lent, așa că poate fi necesar să îi acordați un minut pentru a vedea efectul complet.

Cel mai mult sunt impresionat de calitatea efectelor de relaxare și de cât de bine funcționează acest lucru în browser.

Pe baza câte elemente sunt animate în vedere, aș fi presupus un pic de lent, dar se încarcă incredibil de rapid, având în vedere cât de multe se întâmplă.

Ca să nu mai vorbim de animația soarelui care iese din copac este pur și simplu încântătoare.

Peisaj SVG

Am observat o creștere masivă a tendințelor de design plat și a modelelor semi-plate care folosesc toate culorile de bază fără degrade.

Acest fragment urmează același stil, cu margini dure pentru umbre și colțuri.

Este un fragment frumos și cu siguranță unul dintre cele mai ușor de lucrat peisaje numai SVG. Chiar dacă nu ați folosit niciodată codul SVG înainte, acest fragment oferă multe de căutat și multe atribute SVG/XML, puteți căuta pe Google pentru a afla mai multe.

Peisaj natural

Dezvoltatorul Amr Zakaria a creat un design plat similar cu acest peisaj folosind bărci și avioane animate pentru a vă atrage atenția.

Întregul lucru rulează pe CSS pur și funcționează cu niște animații CSS cu cadre cheie destul de clare.

Toate acestea pot fi replicate pentru un fundal pe o pagină web dacă aveți răbdare să o faceți să funcționeze. Cea mai grea parte este ca acest lucru să fie pe deplin receptiv pentru ecranele mobile.

Lumini de paralaxă

Dintre toate efectele de paralaxă de pe web, acesta este foarte de bază. Cu toate acestea, este, de asemenea, destul de impresionant, deoarece totul funcționează doar pe CSS , nu este nevoie de scripting.

Toate elementele, inclusiv lămpile stradale, sunt proiectate cu forme SVG și efecte CSS.

Dacă te uiți foarte aproape, vei observa că lămpile folosesc de fapt efectul de umbră CSS pentru a crea o strălucire realistă.

Animații de bază

În acest peisaj SVG actualizat, veți găsi o mulțime de elemente personalizate care ies în vedere.

Creatorul Stef van Dijk acordă o atenție deosebită fiecărei animații, adăugând efecte de săritură și de gravitație cu fiecare piesă. De exemplu, când munții scad la vedere, veți observa un efect de recul de la sol.

Aceasta este ceea ce obții atunci când acordați o atenție deosebită detaliilor și de aceea sunt atât de mare fan al animațiilor web moderne.

SVG și CSS

Aruncă o privire la acest stilou pentru o animație de fundal de dimensiuni mari. Toată chestia asta funcționează pe SVG-uri și CSS pur fără JavaScript.

Straturile peisajului apar încet și toate au propriile animații de cadre cheie. Dar odată ce sunt văzute, veți observa că unele elemente continuă să se miște (cum ar fi soarele și norii).

Proiectarea unui astfel de lucru necesită mult timp. Dar vă va familiariza cu adevărat cu sintaxa SVG, împreună cu elementele de bază ale animației CSS.

Iarbă

Deși acest peisaj este foarte simplu, cred că este, de asemenea, un profesor grozav pentru noii codificatori frontend.

Felix De Montis a construit acest proiect de la zero cu o cantitate mică de cod SVG pentru iarbă, dealuri și copaci. Este destul de ușor să replici asta și să schimbi pozițiile folosind și CSS.

În general, dacă vă plac modelele SVG simple, acesta este un loc grozav de început. Felix folosește și preprocesorul LESS dacă cauți ceva dincolo de CSS de bază.

Pagina Paralax

Chris Gruber a dezvoltat acest peisaj paralax imaculat care se mișcă pe baza mișcărilor mouse-ului.

Dar, împreună cu asta, a animat și anumite elemente ale paginii, cum ar fi barca cu pânze și norii de fundal.

Toate acestea necesită foarte puțin JavaScript, deoarece operează pe mai puțin de 20 de linii de jQuery. Cu atât mai impresionant având în vedere cât de detaliat este acest lucru.