Gyönyörű grafikonok a helyszínen - az animáció a diagramok és grafikonok
Nem ez az egyetlen módja annak, hogy a webhely Landing vagy különleges. Íme néhány érdekes hatásokat, amelyek könnyen alkalmazható és projektek:
Minden 3 példa animált grafikonok megtekinthető az alábbiakban:
Hogyan kell használni a gyönyörű grafika saját célra?
Csak azt akarom mondani, hogy ezek a grafikonok is adaptív. Most fontos, mivel a felhasználók, akik jönnek, hogy az oldalt a mobil eszközök egyre napról óra.
Alkotó ilyen szép grafika a könyvtár - Chartist.js.
És a használata CSS3 animációk vannak „életben”, és magára a figyelmet. Most képzeld el, a reakció a látogató láttán egy ilyen hagyományos Landing! Miután az összes animációt, amikor a görgetés nem meglepő, de ezek az elemek mindig minőségének javítása a helyszínen.
Kezdeni, menjen végig a lépéseket, amelyek segítenek a kapcsolat ebben a könyvtárban, majd én megmutatom neked néhány példát, és magyarázza az összes funkcióját a könyvtárban. De ha egyszer figyelmeztetem, teljesen mindazokat a funkciókat, hogy fontolja meg egy cikkben lehetetlen.
Stage 1. Csatlakoztassa a szükséges stílusok és scriptek
Stílus állományok és szkriptek lehet letölteni, és helyezzük a tárhely, de ez sokkal kényelmesebb egyszerűen helyezze 2 sornyi HTML és csatlakozni, amire szüksége van:
Mi megy keresztül minden sorban, hogy van egy teljes megértése a kis JS-script. És ha érti, mit minden sor, akkor a változás önmagában semmilyen értéket.
- 1-es vonal - ebben a sorban figyelmét a különbség egyetlen idézetek. Itt adja meg a blokk választó, amelyben mi lesz egy vagy diagram.
- 2. sor - egy vessző aposztrófok ír részlege nevét az X tengely
- Lines 3 keresztül 6 - határozzák meg az Y tengely értékeket az egyes vonal a grafikonon. Egy sor zárójelben lévő értékek (ebben script, 4. és 5. sor) megfelel egy sort.
- 8. sor - mutatott igaz. mi feszített a menetrend a teljes szélességében a „szülő egység”.
- Vonalak 9-11 - meghatározza a belső párnázás a jobb oldalon. Ez biztosítja, hogy a leírás a megosztottság, az X tengelyen nem csonkított és helyezzük egy mondatban.
Ha tettél a fenti lépéseket, kapsz szép grafika. Csak meg kell adnia a kívánt értékeket. De ez az ütemezés nem különbözik a többitől, ami látható az interneten. Lent, hogyan kell hozzáadni egyediségét ezt az ütemtervet, akkor magára a figyelmet.
1. példa Motion kör
De hogyan lehet létrehozni egy ilyen ütemezés, mint a fenti képen (animált kép, kivéve, ha van egy animációt, majd várjon, amíg a boot) felett?
Ebből a célból, csupán arra van szükség, hogy adjunk néhány tulajdonságait elemek a kész grafikát. Mivel a teljes menetrend áll SVG elemek, csak azt kell eldönteni, hogy melyik szeretnénk animálni.
Animálni a két sor, ahogy én tettem ebben a példában, meg kell adni a következő CSS stíluslap:
Ezek a példák azt akartam mutatni, hogy hozzon létre egy szép, és ami még fontosabb, szemet gyönyörködtető grafika nagyon egyszerű. Elég annyit tudni, hogy legalább az alapokat a CSS3 animáció. Ez olvasható az alábbi linkre.
Vizsgáljuk meg alaposan ezt a cikket, és így képes létrehozni bármilyen animációt CSS3: CSS3 animációk a legkisebb.
Jelenleg nem elég egyszerűen, hogy a kirakodási vagy csak azért, hogy egy oldalon. Ez nem működik. Most van itt az idő, amikor minden elemére szüksége, minden egység üzemel, hogy dolgozzanak ki és hogy a legtöbb egyedi, nem megfeledkezve arról az alapvető design a helyén.
De mi a legnagyobb örömmel, így a lehetőségek száma, amelyek most vannak. Ebben a cikkben tanult csak egy a könyvtárak száma, hogy lehet használni, hogy nem a szokásos, nem szabványos elemekkel. Továbbra is használni rendesen!
Ehhez, akkor használhatja a CSS. A konstrukció egy kört, elég lenne, hanem felhívni a görbék, azt ajánlom, hogy megértsék SVG. Mivel a segítségével ez a technológia, akkor létrehozhat interaktív térképekkel a komplexitás.
Itt egy példa az orosz térképen: interaktív térkép Oroszország.