Share
Mange mennesker vil legge til subtile animasjoner på deres nettside som svar på klikk eller andre handlinger av sine besøkende. Men ikke alle er godt kjent med å bruke CSS eller JavaScript. Noen vet bare hvordan man endrer HTML og har endringen reflektert på nettsiden.
Vanligvis er dette den delen der utviklere tar over og legger til nødvendig JavaScript og CSS for å gjøre nettstedet ditt skiller seg ut. Men hvis du vil kunne bygge et animert nettsted selv, uten å kodes, ville et bibliotek kalt AniJS hjelpe en god del.
AniJS lar deg lage animert styling for nettstedet ditt uten JavaScript eller CSS-koding! Du kan angi alle animasjonene dine med HTML ved hjelp av en enkel Hvis-På-Gjøre-Til syntaks.
Før du kan begynne å animere elementene på nettsiden din med data-anijs attributter, må du inkludere de nødvendige filene. Tre forskjellige filer er nødvendig for å få tilgang til all funksjonalitet i AniJS. Disse filene er kjernen JS-biblioteket, CSS-filen for animasjonene, og en annen JavaScript-hjelpeperson for bruk av spesiell AniJS-syntaks som $ addClass, $ toggleClass, og $ removeClass.
Du kan også installere biblioteket ved hjelp av Bower ved å kjøre følgende kommando:
bower install anijs - save
Når du har tatt med alle nødvendige filer, vil elementene på nettsiden være klar for animasjon.
I sin grunnleggende form bruker AniJS følgende syntaks til å animere bestemte elementer basert på en hvilken som helst hendelse.
Hvis (noe som skjer), På (et hvilket som helst element), Gjør (noe som animer, legg til / fjern klasse), Til (dette eller noe annet element)
Her, den Hvis del spesifiserer hendelsen som vil utløse animasjonen eller klassemanipuleringen. De På Del spesifiserer elementet hvis hendelser AniJS skal høre på. Dette kan være forskjellig fra det elementet du har konfigurert data-anijs Egenskap. De Gjøre Del spesifiserer handlingen som skal tas. Her kan du angi navnet på animasjonen du vil søke på, etc. Endelig, Til del er brukt til å spesifisere elementet som må animeres eller manipuleres.
De Hvis En del er nødvendig for AniJS-setningen som du legger til for å animere noe element. De På En del er valgfri, og hvis den ikke er spesifisert, bruker den gjeldende elementet som standardverdien. De Gjøre del er også nødvendig da det forteller nettleseren hva du skal gjøre når den angitte hendelsen skjer. De Til En del er også valgfri og standard til det nåværende elementet når det ikke er angitt.
Du kan også bruke Før og Etter kroker for å spesifisere hva som skal skje før og etter AniJS gjør saken nevnt i Gjøre del.
AniJS lar deg kjøre en animasjon ved å utløse den på en hvilken som helst aktuell hendelse som er oppført på MDN-siden. På samme måte kan du bruke på og til å målrette mot hvilket som helst element du vil bruke CSS selectors. For eksempel kan du spesifisere at du vil lytte til en hendelse på div.promotion eller delen div p.first, etc. Den gjøre En del kan brukes til å angi animasjonen du vil søke på forskjellige elementer. AniJS har mange animasjoner som kan brukes til ethvert element du vil ha.
Følgende HTML-kodestykke viser deg hvordan du bruker noen animasjoner på elementer som vil bli utløst på bestemte hendelser.
I hvert tilfelle er alt du trenger å gjøre, å skrive uttalelsene i data-anijs attributt, og biblioteket skal ta vare på resten. (Vi har hoppet over til del i alle disse animasjonene, slik at animasjonen blir brukt på elementet som vi har angitt i data-anijs Egenskap.)
De siste fire boksene har forskjellige verdier for på del. Dette betyr for eksempel at animasjonen på den grønne boksen bare vil skje når musen beveger seg over den brune boksen. På samme måte begynner sprett animasjonen på den gule boksen å spille når en bruker dobbeltklikker hvor som helst inni kroppen.
Du kan prøve disse animasjonene ut selv i den innebygde CodePen-demoen.
AniJS lar deg gjøre mer enn bare animere forskjellige elementer. For eksempel kan du bruke den til å legge til, fjerne eller bytte klasser som er brukt til forskjellige elementer. På samme måte kan du også fjerne HTML-elementer eller klone dem uten å legge til en enkelt linje med JavaScript. Biblioteket gir deg også mulighet til å krysse DOM ved hjelp av spesielle reserverte søkeord.
La oss begynne med klassemanipulering. AniJS har tre reserverte søkeord for manipulering av klasser. Disse er $ addClass, $ removeClass, og $ toggleClass. Som navnet antyder, kan du bruke dem til å legge til, fjerne og veksle en eller flere klasser av et element henholdsvis. Alt du trenger å gjøre er å spesifisere klassenavnene etter de reserverte søkeordene.
På samme måte kan du bruke reservert søkeord som $ forelder, $ forfedre, $ nærmeste, $ finne, og $ barn å krysse DOM.
Du kan bruke disse to settene med reserverte søkeord sammen for å gjøre noe som å legge til en bestemt klasse for alle barn av et element etter at en besøkende dobbeltklikker det bestemte elementet.
Men hvilke barn du refererer til, kan være tvetydige i visse tilfeller. For eksempel kan du ha brukt data-anijs attributt til ett element, men sett verdien av På del til noe annet ved hjelp av CSS-selektorer. I denne situasjonen vil AniJS ikke ha mulighet til å vite om klassen må legges til barna til elementet som refereres av CSS-väljeren eller elementet du har brukt på data-anijs Egenskap.
I slike tilfeller kan du fjerne tvetydigheten ved å bruke et annet reservert søkeord som hetermål. Her, mål refererer til elementet påpekt av CSS velgeren.
Vurder følgende tre eksempler der AniJS har blitt brukt til å bytte klasser av forskjellige elementer:
I eksemplet ovenfor har jeg omformatt HTML-koden for å gjøre det lettere å lese og se hva som skjer.
La oss begynne med den første div. I dette tilfellet har vi utelatt begge på og til deler av data-anijs attributt verdi. Derfor er de begge standard til dagens div seg selv. Hvis du prøver å klikke på dette bestemte div, det vil veksle oransje klassen, som igjen endrer boksen til oransje.
I tilfelle av den andre div, Vi forteller AniJS å bytte klassen som heter rød for alle elementer som er barn av det aktuelle div. Dette vil rotere alle barna span elementer og endre fargen til rødt, mens du stiller grenseradien til null.
Vi har levert to forskjellige uttalelser inne i data-anijs attributt til den tredje div. Begge disse utsagnene bytter det samme gul klasse. Effektene er imidlertid helt forskjellige på grunn av bruken av mål søkeord.
I det første tilfellet har vi lagt til mål søkeord etter $ forelder søkeord. Dette forteller AniJS at vi vil bytte klassen til foreldrene til elementene som er pekt på av skjell klasse. I andre tilfelle har vi hoppet over mål Søkeord, slik at AniJS endrer bakgrunnen til foreldrenes foreldre div. Siden forelderen til div er den kropp seg selv, hele siden blir gul.
Du kan prøve å klikke på forskjellige elementer og se hvordan de påvirker siden i den innebygde CodePen-demoen.
En ting verdt å merke seg er at selv om data-anijs Attributt for den tredje boksen har to erklæringer, å klikke på boksen selv har ingen effekt. Dette er fordi vi har instruert AniJS for å lytte til klikkhendelsene på span elementer med klassen skjell i begge tilfellene.
En annen måte å manipulere HTML-elementer på en nettside ved hjelp av AniJS ville være å klone eller fjerne dem. Biblioteket har reservert søkeordene $ remove og $ klone som vil fortelle om du vil fjerne et element eller klone det.
Du kan sende flere valg til $ remove for å fjerne flere elementer fra nettsiden. Husk at forskjellige CSS-selektorer må separeres med røret | karakter.
De $ klone søkeord aksepterer også to parametere. Den første er CSS-velgeren for å spesifisere elementet du vil klone. Den andre er et tall for å angi hvor mange kopier du vil lage. For eksempel, $ klone .shells | 10 vil lage 10 kopier av elementene med klassen skjell og legg dem som barn av det elementet som data-anijs Attributtet er spesifisert. Hvis kopiene må legges til et annet element, kan du peke AniJS til det ved å angi riktig CSSvelger etter til i AniJS-setningen.
Målet med denne opplæringen var å hjelpe deg med å komme i gang med AniJS så raskt som mulig. Som du kanskje har lagt merke til, er biblioteket veldig enkelt å bruke. Alt du trenger å gjøre er å angi de riktige attributtverdiene, og AniJS skal ta vare på alt annet som å endre klasser, manipulere DOM og animere eventuelle endringer.
Biblioteket tilbyr mange andre funksjoner som vi ikke har dekket i denne opplæringen. Du bør gå gjennom den offisielle dokumentasjonen for å lære mer om det og bruke det til sitt fulle potensiale.
Accentsconagua