Aceasta nu este singura modalitate de a vă face creditarea sau site-ul special. Mai jos sunt câteva efecte interesante pe care le puteți aplica cu ușurință proiectelor dvs.:
Toate cele 3 exemple de grafică animată pot fi vizualizate mai jos:
Cum să utilizați o grafică frumoasă pentru propriile dvs. scopuri?
Vreau doar să spun că aceste grafică sunt, de asemenea, adaptive. Acum, acest lucru este foarte important, deoarece utilizatorii care vizitează site-ul de pe dispozitivele mobile devin din ce în ce mai mult în fiecare oră.
Astfel de imagini frumoase sunt create folosind biblioteca - Chartist.js.
Și cu ajutorul animației CSS3, ei "vin la viață" și atrag atenția. Acum, imaginați-vă reacția vizitatorilor la vederea acestui lucru pe aterizarea obișnuită! La urma urmei, atunci când defilați, nu veți fi surprins de nimeni, dar aceste elemente vor îmbunătăți întotdeauna calitatea site-ului.
Pentru a începe, du-te prin pașii care vă vor ajuta să vă conectați această bibliotecă, și apoi să-ți arăt câteva exemple și să explice toate caracteristicile bibliotecii. Dar imediat vă avertizez, este pur și simplu imposibil să luați în considerare absolut toate funcțiile într-un singur articol.
1 etapă. Includeți stilurile și scripturile necesare
fișiere de stil și script-uri le puteți descărca și de pe locul de găzduire, dar este mult mai convenabil pentru a introduce pur și simplu 2 linii de cod HTML și conectați-vă tot ce ai nevoie:
Să trecem prin fiecare linie astfel încât să aveți o înțelegere deplină a acestui mic script JS. Și dacă înțelegeți ce este responsabil pentru fiecare linie, puteți schimba orice valoare pentru dvs.
- Linia 1 - pe această linie, acordați atenție valorii dintre ghilimele simple. Aici specificați selectorul de blocuri în care vom avea un grafic sau o diagramă.
- Linia 2 - separate prin virgule în citate simple, atribuim numele unei divizări de-a lungul axei X.
- Linile 3 până la 6 - aici setați valorile pentru axa Y pentru fiecare linie din grafic. O linie de valori în paranteze pătrate (în acest script, linia a 4-a și a 5-a) corespunde unei linii.
- Linia 8 - indicând valoarea adevărată. am întins graficul la lărgimea completă a "blocului părinte".
- Linile 9 până la 11 - poziționați linia interioară spre dreapta. Acest lucru se face astfel încât descrierea diviziunilor de-a lungul axei X să nu fie întreruptă și plasată într-un singur bloc.
Dacă faceți toți pașii de mai sus, veți obține un program minunat. Va introduce doar valorile necesare. Dar acest program nu este diferit de toate celelalte, care pot fi văzute pe Internet. Vedeți mai jos cum să facem grafica unică, după care va atrage atenția.
Exemplul 1. Graficul animat
Dar cum crea un astfel de program ca și în imaginea de mai sus (imagine animată, dacă nu aveți o animație, apoi așteptați până când boot) de mai sus?
Pentru a face acest lucru, trebuie doar să adăugați câteva proprietăți ale elementelor pe graficul final. Din moment ce întregul grafic conține elemente SVG, trebuie doar să decidem care dintre ele vrem să animăm.
Pentru a anima două linii, așa cum am făcut în acest exemplu, trebuie să adăugați următorul cod CSS în foaia de stil:
Cu aceste exemple am vrut să arăt că este foarte ușor să creezi un program minunat și, cel mai important, un program remarcabil. Este suficient să știți cel puțin elementele de bază ale animației CSS3. Acest lucru poate fi citit de la link-ul de mai jos.
Studiați cu atenție acest articol și apoi puteți crea orice animație pe animația CSS3: CSS3 pentru cei mici.
În prezent, nu este suficient doar să faceți o împrumut sau doar să faceți un site web. Nu mai funcționează. Acum este momentul în care aveți nevoie de fiecare element, fiecare unitate de pe site-ul pentru a lucra și de a face cel mai unic, fără a uita despre proiectul de bază al site-ului.
Dar, ceea ce este cel mai plăcut este numărul de oportunități care există acum. În articol ați întâlnit doar una dintre numeroasele biblioteci cu care puteți face elementele obișnuite non-standard. Rămâne să utilizați acest lucru corect!
Pentru aceasta puteți utiliza CSS. Pentru a construi un cerc, va fi de ajuns, dar pentru a desena curbe, recomand sa intelegi SVG. Deoarece cu ajutorul acestei tehnologii puteți crea hărți interactive de complexitate.
Iată un exemplu cu o hartă a Rusiei: o hartă interactivă a Rusiei.
Articole similare
Trimiteți-le prietenilor: