Share
Hva du skal skapeCrowdpilots destinasjonsside viser ut hvor enkelt og fantastisk SVG er i kombinasjon med JavaScript og CSS animasjoner. I denne opplæringen lærer du hvordan du gjenskaper Crowdpilots diagonale melding rotator og gardin, pluss vi snakker litt om "flat" design og hva det betyr å designe digitalt opprinnelige elementer.
Ta pusten.Crowdpilot er en app som lar deg bringe dine venners ører (og meninger) med deg hvor som helst. Vi vil gjenskape noe av Crowdpilots nettside, men for korthetens skyld vil denne opplæringen ignorere de sosiale og personverndiskusjonene som appen ellers ville kreve.
Kanskje du har hørt om den flate trenden. Det gjør det raskt rundt - hvis du er webdesigner, vil du sannsynligvis omfavne dette skiftet i en eller annen form.
Men for å løfte vår designdiskusjon, gjør "flat" ikke skiftet rettferdighet. For et mer komplett perspektiv på drivfaktorene bak den "flate trenden", ta en titt på dette fantastiske stykket av Frank Chimero, "What Screens Want", fra november 2013. I stykket gjør Chimero argumentet om at hjernen vår tilpasser seg til det digitale landskapet, og at det som en gang var nødvendig for oss å forstå, for eksempel en "slettet" mappe på en datamaskin, var en representasjon av søppel som vi likestiller vår konkrete representasjon av kassering; en 3d-skikkelig søppelkanne. Men som våre hjerner tilpasser seg til flere native representasjoner av digital sletting, trenger vi ikke lenger disse metaforene - hva Chimero kaller "polstring" (i referanse til ekstrabelegget på en aspirinpille utover den aktive ingrediensen som gjør det enkelt å forstå).
Fra stykket:
Så mens størrelsen på en aspirinpille er begrenset av dine stubbe små fingre, kan hjernen din normalisere mønstrene til et grensesnitt og gjøre plass for mer nyanserte abstraksjoner.
Med det sagt, la oss ta en titt på et godt eksempel på et digitalt digitalt designelement ansatt av Crowdpilot.
Den relativt enkle siden har en stor spillknapp, og skjermen er delt horisontalt av to fargede trekanter. Ved å klikke på avspillingsknappen avsløres en fullskjermvideo bak trekantene.
Vi skal gjenskape denne effekten.
Crowdpilots hemmelige saus er to veldig enkle SVGer. Vi har tatt kildekoden til en av disse SVGene rett fra koden deres:
Vi kan se på dette ene stykket om gangen.
Accentsconagua
enable-background = "new 0 0 100 100"Denne egenskapen er i stor grad ikke støttet, og refererer til bakgrunnssammensetning, som ikke er faktisk relevant for denne brukstilfellet, så vi vil utelate det fra vårt eksempel.
høyde breddeVi vil også ignorere bredden og høydeattributtene til SVG, da vi kan bruke CSS egenskaper for å oppnå effekten sett i eksempelet.
preserveAspectRatio = "none", viewBox = "0 0 100 100"Dette gjør at SVG kan skaleres til et hvilket som helst forhold. Våre viewBox-verdier setter opp et lerret for vårt SVG, og brukes mest for referanse til barnpolygonelementet. SVG lerretet (ikke forveksles med lerret element) i dette tilfellet er 100x100 vilkårlig enheter. (En god gjetning: Den som opprettet Crowdpilot-splash-siden ønsket å bruke en 100x100 viewBox for å angi "100 prosent".)
polygonpunkter = "100,0 0,100 0,0"Dette skaper et polygon på steder oppført som x / y-koordinater, som produserer: x = 100, y = 0 (øverst til høyre) x = 0 y = 100 (nederst til venstre) x = 0, y = 0 (øverst til venstre)
Denne polygonkombinasjonen med vår firkantede ViewBox i svg foreldre tag er det som skaper vår trekant.
En forenklet versjon av vår SVG vil se slik ut:
Så merkelig som det kan virke, kan vi plassere dette direkte i vår kroppsdel.
For vårt eksempel legger vi en logo i midten og avslører et bakgrunnsbilde når du klikker på logoen, og lukker gardinen ved å klikke på logoen igjen. For dette vil vi bare legge til en ankermerke og plassere den helt i midten av skjermen.
.envato-logo width: 120px; høyde: 120px; posisjon: absolutt; topp: 50%; venstre: 50%; bakgrunnsbilde: url (envato-logo.png); bakgrunnsstørrelse: deksel; margin-venstre: -60px; margin-topp: -60px;
For vår avslørende animasjon kan vi bruke litt av JavaScript for å lytte etter et klikk på ankerelementet, og bytte en klasse på kropp.
$ (". envato-logo"). på ("klikk", funksjon (e) e.preventDefault (); $ ("body"). toggleClass ("gardinåpent");); Vi vil da sørge for at polygonene våre har en CSS-transformasjon og overgang påført. Siden vi vet at vi også vil animere farge senere, la oss bruke alle verdi for eiendommen å bli animert.
.gardin-åpen polygon: første barn transform: translate3d (0, -100%, 0); .curtain-åpen polygon: siste barn transform: translate3d (0, 100%, 0); polygon posisjon: relativ; overgang: alle 0,4s;
Vær oppmerksom på at disse reglene også må være forhåndsdefinert nettleser.
Hint: prøv noe som Prefix Free for å løse prefixet ditt.
En viktig ting å forstå her er at all vår animasjonskraft er oppnådd med CSS. Dette gjør vårt JavaScript veldig lett og vår presentasjon fleksibel.
For å bla gjennom forskjellige farger for den øverste, venstre trekant, vil vi sette opp et intervall for å løse gjennom en rekke opplysninger. I eksemplet fra Crowdpilot ser vi en roterende bakgrunnsfarge på topp trekant, samt roterende tekst øverst til venstre. Her er en rask forklaring på hvordan du oppnår dette.
Først vil vi sette opp en rekke objekter hver med bakgrunnsfarger og tekst.
// meldingsdata var cycle_array = [color: "# c479b7", tekst: "Her er litt tekst og hva som helst." , color: "# c4a179", tekst: "SVG er utrolig kraftig." , color: "# 222", tekst: "Diagonaler er inne." ]
Deretter vil vi sette opp et intervall for å sykle gjennom farger og meldinger hvert annet sekund.
var i = 0, messageHolder = $ (". message"), poly = $ ("svg polygon"). første (); varintervall = setInterval (funksjon () i = i% cycle_array.length; var nextObj = cycle_array [i]; $ ("svg polygon"). først (). css (fill: nextObj.color); $ ".message"). html (nextObj.text); i ++;, 2000); Vi bruker et smart trick i den andre linjen av setInterval funksjon. Vi satte opp Jeg å iterere til det siste elementet, og vi stiller det tilbake til 0 ved hjelp av moduloperatøren %, som returnerer resten av en divisjon. Med andre ord, på den tredje iterasjonen, Jeg vil være lik 3; 3/3 har ingen rest, så Jeg vil bli satt tilbake til 0.
Resten av denne koden er relativt enkel; Vi antar at det er et element med klassen av budskap. Du har kanskje også lagt merke til at vi setter inn CSS-egenskapen (og ikke bruker funksjonen jQuery animere); Dette skyldes at vi allerede har satt opp overganger i vårt CSS.
Visst, du vil sikkert ha farger som teksten ser bra ut på. Men hvis du vil ha en tilfeldig farge, la oss bruke et kult triks funnet på Paul Irlands blogg for å generere en tilfeldig heks. Den tidligere brukte JavaScript ville endres til dette:
var i = 0, messageHolder = $ (". message"), poly = $ ("svg polygon"). første (); varintervall = setInterval (funksjon () i = i% cycle_array.length; var nextObj = cycle_array [i]; $ ("svg polygon"). først (). css (fill: '#' + Math.floor Math.random () * 16777215) .toString (16)); $ (".melding"). Html (nextObj.text); i ++;, 2000); Hvis du ikke trenger å støtte hver nettleser og vil miste vekt ved å gå jQuery-less, kan du gjøre det med denne koden.
// jQuery-less versjon (funksjon () // logo klikk, polygon move var envatoLogo = document.querySelector (". envato-logo"); envatoLogo.onclick = function () document.querySelector ("body"). classList.toggle ("curtain-open"); // meldingsdata var cycle_array = [color: "# c479b7", tekst: "Her er litt tekst og whatnot.", color: "# c4a179" "SVG er utrolig kraftig.", Farge: "# 222", tekst: "Diagonaler er i."] // meldingsintervaller var i = 0, messageHolder = document.querySelector (". Message"), poly = document.querySelector ("polygon"); varintervall = setInterval (funksjon () i = i% cycle_array.length; var nextObj = cycle_array [i]; poly.style.fill = nextObj.color; document.querySelector (". melding "). innerHTML = nextObj.text; i ++;, 3000); ()); Vi har byttet ut mange jQuery-baserte samtaler med vanlig JavaScript, takket være den utviklende innfødte seleksjonen og DOM-manipulerings-APIer.
Enkelheten til digitale digitale grensesnitt kombinert med fleksibiliteten og kraften til SVG- og CSS3-animasjoner gir oss muligheten til å bygge opp erfaringer, som den som settes på Crowdpilot, med minimal innsats.
Det er viktig å holde noe informert om utviklende APIer og teknologier; For å oppnå samme effekt som det vi har opprettet i omtrent 100 kodelinjer, måtte vi stole på mye vanskeligere, ineffektive måter å skape relativt enkle former på. Når nettverket utvikler seg, så gjør verktøyene vi bruker til å bygge det. dette eksempelet viser hvor kraftig disse verktøyene har blitt.
