Najenostavnejši primer uporabe te kombinacije si lahko ogledate malo nižje na tej strani. Najbolj zanimivo je, da ta lepota (drsna animacija) deluje BREZ jQueryja. Izkazalo se je, da so temu scenariju vsa vrata odprta ... In kot primer, pomaknite se navzdol ... Bolj pogumno ...
Z zaupanjem vam lahko povem, da zdaj drseča animacija postaja ZELO priljubljena in ta učinek lahko pogosto vidite na prodajnih mestih uspešnih internetnih podjetnikov. Takšni "triki" ZELO poživijo spletna mesta in pomagajo usmeriti pozornost obiskovalca nanje pomembne točke za katero želite, da vas najprej vidijo.
Animacija drsenja: kombinacija
« WOW.js" in " Animate.css» na wordpressu...
* za ponovitev animacije ponovno naložite stran.
Kako nastaviti?
KORAK 1 Za začetek prenesite ti dve datoteki ("WOW.js" in "Animate.css")
POSODOBLJENO(25. julij 2019): wow.min.js v1.2.1| animate.min.css v3.7.2 2. KORAK V korensko mapo spletnega mesta postavimo mapo "wow-animacija". Seveda ga lahko postavite kamor koli, če le določite pravilno pot do datotek. Še vedno je priporočljivo, da to mapo postavite v korensko mapo: index.html. Če je WordPress, potem mapo postavite kamor koli želite. (glavna stvar je določiti pravilno pot do njega).
3. KORAK Postavimo v
ta vrstica:
"vau-animacija/animate.min.css">
* Seveda določimo pravilno pot do datoteke. Če nameščate na WordPress, priporočam, da navedete polna pot, tj. začenši s httpS://VašaDomena itd. Če želite preveriti, ali ste datoteko pravilno povezali - kopirajte URL, ga vnesite v naslovno vrstico in pritisnite "Enter". Če se odpre datoteka z nerazumljivo kodo, potem je vse v redu 🙂
KORAK 4 Postavljeno čisto na dno strani prej
te vrstice:
<skript src="wow-animation/wow.min.js" >
* Določite tudi pravilno pot do datoteke in preverite v brskalniku.
<div class = "wow fadeInRight" > Določene informacijediv >
6. KORAK Napredne nastavitve. Dodajanje funkcij: data-wow-trajanje: spremenite trajanje animacije; data-wow-delay: Zakasnitev pred začetkom animacije; podatkovni-vau-odmik: razdalja pred začetkom animacije (glede na dno okna brskalnika); data-wow-iteracija: Ponovite animacijo "tolikokrat".
<div class="wow slideInLeft" data-wow-duration ="3,5s" data-wow-delay ="1s" data-wow-offset ="120" > Določene informacijediv >
<h1 class = "wow slideInLeft" data-wow-duration ="3,5 s" data-wow-delay ="1 s" data-wow-offset ="120" > Določene informacijeh1 >
Zdravo. Naj vas spomnim, da sem že pisal, vendar je bilo samo osnovna načela. Zdaj predlagam, da se seznanite z že pripravljenim naborom lastnosti animacije v eni datoteki animate.css. To ni generator, ampak knjižnica, ki deluje povsem pravilno v vseh priljubljenih brskalnikih. In te primere si lahko ogledate tukaj.
Povezovanje Animate.css
Če želite narediti CSS animacijo slike, besedila ali gumbov za spletno mesto in vse to implementirati brez uporabe Javascripta, potem morate samo vključiti eno datoteko, ki je bila že omenjena zgoraj, na standarden način, tj. med oznakama glave.
Tako so zapisane lastnosti animacije predmetov. , animirano je potrebno, tada pa je eden od učinkov. Toda potrebujemo sam cikel in zdaj bomo to storili. To lahko storite tako, da ustvarite nov razred in mu ali obstoječemu dodelite posebne lastnosti.
Zanka animacije Animate.css
.new ( animation-iteration-count : neskončno ; )
Novo (štetje animacij-iteracij: neskončno;)
In da vam bo še bolj jasno, kaj sem tukaj poskušal razložiti, potem si oglejte ta videoposnetek, kjer na resničnem primeru nazorno pokažem, kako deluje, in prenesete tudi same sloge.
Vse pogosteje lahko na številnih pristajalnih ali promocijskih straneh najdete različne animacijske učinke. Konec koncev naredijo stran bolj zanimivo in privlačno.
V bistvu so ti učinki nastavljeni bodisi ob nekem dogodku (klik ali lebdenje na element) bodisi v trenutku drsenja po strani. Mislim, da ste že videli taka spletna mesta, ko se pomikate po strani, različne elemente videti gladko in lepo.
Prej ste morali za izvajanje teh učinkov uporabiti samo JS, vendar razvoj ne miruje in z izdajo CSS3 je mogoče na njem implementirati vse te učinke.
V tej lekciji se bomo seznanili z zelo zanimivim orodjem, imenovanim animate.css. To je že pripravljen slogovni list CSS, ki ima v svojem arzenalu več kot 50 različnih učinkov in vsi ti učinki so implementirani v CSS3.
Če ga želite uporabiti, morate samo nastaviti določen razred za zahtevani element in učinek animacije bo uporabljen za ta element. Kot sem že rekel, je ta animacija implementirana v CSS3, zato bodo ti učinki delovali v vseh sodobnih brskalnikih.
Zdaj pa si poglejmo podrobneje animate.css.
Osnovna oznaka HTML
Oglejte si video vadnico
odbiti
bliskavica
utrip
elastika
pretresite
gugalnica
nihanje
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
zbledeti
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
tečaj
rollIn
rollOut
približaj
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
pomanjšanje
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
Neskončna animacija
Če ste naredili vse, kot je opisano zgoraj, potem bo v trenutku, ko se stran naloži, ta učinek uporabljen za element in to je to, animacija se bo tam končala.
Kaj pa, če želite, da se animacija nadaljuje brez ustavljanja?
Če želite to narediti, dodajte še en razred za naš animirani element. Ta razred je neskončno.
glava
Nastavite animacijo, ko miško premaknete nad element
Oglejte si video vadnico
Vsi prej opisani primeri nastavijo animacijo takoj po nalaganju strani, vendar je v praksi to redko potrebno. V praksi je zelo pogosto treba nastaviti animacijo, ko lebdimo nad elementom, zato sem spodaj podal že pripravljeno kodo za to izvedbo.
HTML
HTML naša oznaka se je nekoliko spremenila, zdaj nam ni treba nastaviti razreda, ki je odgovoren za določeno animacijo. To vrednost moramo določiti v posebnem atributu podatkovni učinek. Bodite pozorni na to, zelo pomembno je.
glava
Tukaj je majhna koda za jQuery, ki bo sledil dogodku premikanja kazalca miške nad element in v primeru pojava tega dogodka mu bo skript dodal razred, katerega vrednost je podana v atributu podatkovni učinek. Z dodajanjem tega razreda bo uporabljena animacija.
Seveda lahko ta scenarij poljubno spremenite, na primer spremenite dogodek v njem mouseenter na kliknite. Potem se v tem primeru animacija ne bo zgodila v trenutku, ko miško premaknete nad element, ampak v trenutku klika.
Izdelava animacije pri listanju strani
Oglejte si video vadnico
In končno, poglejmo še en primer, kjer se lahko preprosto prijavite animate.css.
Elementom lahko namreč nastavite različne učinke pri listanju strani. Za te namene poleg animate.css, potrebujemo še en poseben skript wow.js.
CSS3 animacija naredi spletna mesta dinamična. Oživi spletne strani in izboljša uporabniško izkušnjo. Za razliko od prehodov CSS3 ustvarjanje animacije temelji na ključnih sličicah, ki vam omogočajo samodejno predvajanje in ponavljanje učinkov za določen čas ter zaustavitev animacije znotraj zanke.
Animacijo CSS3 je mogoče uporabiti za skoraj vse elemente html, pa tudi za psevdoelemente :before in :after. Seznam animiranih lastnosti je podan na strani. Pri ustvarjanju animacije ne pozabite na možne težave z zmogljivostjo, saj spreminjanje nekaterih lastnosti zahteva veliko virov.
Ključni okvirji se uporabljajo za določanje vrednosti lastnosti animacije na različnih točkah animacije. Ključni okvirji definirajo vedenje posamezne zanke animacije; animacija se lahko ponovi nič ali večkrat.
Ključni okvirji so podani s pravilom @keyframes, definiranim na naslednji način:
@keyframes ime animacije ( seznam pravil )
Ustvarjanje animacije se začne z namestitvijo ključni kadri pravila @keyframes. Okvirji določajo, katere lastnosti bodo animirane v katerem koraku. Vsak okvir lahko vključuje enega ali več deklaracijskih blokov enega ali več parov lastnosti in vrednosti. Pravilo @keyframes vsebuje ime animacije elementa, ki povezuje pravilo in blok deklaracije elementa.
Ključne sličice so ustvarjene s ključnimi besedami od in do (enakovredno 0 % in 100 %) ali odstotki, ki jih je mogoče nastaviti na poljubno število. Kombinirate lahko tudi ključne besede in odstotne točke. Če imajo okvirji enake lastnosti in vrednosti, jih je mogoče združiti v eno deklaracijo:
Če okvirji 0 % ali 100 % niso določeni, jih uporabnikov brskalnik ustvari z uporabo izračunanih (prvotno nastavljenih) vrednosti lastnosti, ki se animira.
Če je definiranih več pravil @keyframes z istim imenom, se bo sprožilo zadnje v vrstnem redu dokumenta, vsa prejšnja pa bodo prezrta.
Ko deklariramo pravilo @keyframes, se lahko nanj sklicujemo v lastnosti animacije:
Ni priporočljivo animirati neštevilskih vrednosti (z redkimi izjemami), saj je lahko rezultat v brskalniku nepredvidljiv. Prav tako ne postavljajte vrednosti lastnosti ključne sličice, ki nimajo sredine, kot so vrednosti lastnosti color: pink in color: #ffffff, width: auto in width: 100px ali border-radius: 0 in border- radius: 50% (v tem primeru bi bilo pravilno določiti border-radius: 0%).
1.1. Funkcija merjenja časa za ključne sličice
Pravilo sloga ključne sličice lahko tudi deklarira časovno funkcijo, ki se uporablja pri premikanju animacije na naslednjo ključno sličico.
Za animacijo z imenom "bounce" je določenih pet ključnih sličic. Med prvo in drugo ključno sličico (to je med 0 % in 25 %) se uporablja funkcija upočasnitve. Med drugo in tretjo ključno sličico (to je med 25 % in 50 %) se uporablja funkcija gladkega pospeševanja. In tako naprej. Element se bo premaknil po strani navzgor za 50 slikovnih pik in se upočasnil, ko bo dosegel svojo vrednost najvišja točka, nato pa pospeši, ko pade na 100 slikovnih pik. Druga polovica animacije se obnaša podobno, le da premakne element za 25 slikovnih pik navzgor po strani.
Časovna funkcija, določena v ključni sličici do ali 100 %, je prezrta.
2. Ime animacije: lastnost ime-animacije
Lastnost animation-name podaja seznam animacij, ki jih je treba uporabiti za element. Vsako ime se uporablja za izbiro ključne sličice v pravilu, ki zagotavlja vrednosti lastnosti za animacijo. Če se ime ne ujema z nobenim ključnim okvirjem v pravilu, ni lastnosti za animacijo, ni imena animacije, animacija se ne bo izvajala.
Če več animacij poskuša spremeniti isto lastnost, se izvede animacija, ki je najbližje koncu seznama imen.
Ime animacije razlikuje med velikimi in malimi črkami, ni dovoljeno ključna beseda nobeden Priporočljivo je, da uporabite ime, ki odraža bistvo animacije, lahko pa uporabite eno ali več besed, navedenih z vezajem - ali podčrtajem _.
Lastnost animation-duration določa trajanje enega cikla animacije. Podano v sekundah s ali milisekundah ms. Če je za element nastavljenih več kot ena animacija, lahko nastavite drugačen čas za vsako z navedbo vrednosti, ločenih z vejicami.
4. Časovna funkcija: lastnost animacijske-časovne funkcije
Lastnost animation-timing-function opisuje, kako bo animacija napredovala med vsakim parom ključnih sličic. Med zamikom animacije se funkcije ne uporabljajo.
Nepremičnina se ne deduje.
funkcija-časovne-animacije
Vrednote:
linearni
Linearna funkcija, animacija poteka enakomerno skozi ves čas, brez nihanj v hitrosti.
Bezierjeve funkcije
enostavnost
Privzeta funkcija, animacija se začne počasi, hitro pospeši in se na koncu upočasni. Ujema se s cubic-bezier(0,25,0,1,0,25,1) .
olajšanje
Animacija se začne počasi in se na koncu gladko pospeši. Ujema se s cubic-bezier(0,42,0,1,1) .
olajšanje
Animacija se začne hitro in se na koncu počasi upočasni. Ustreza cubic-bezierju (0,0,0,58,1) .
ease-in-out
Animacija se začne počasi in počasi konča. Ujema se s cubic-bezier(0,42,0,0,58,1) .
cubicbezier(x1, y1, x2, y2)
Omogoča vam, da ročno nastavite vrednosti od 0 do 1. Lahko zgradite poljubno trajektorijo hitrosti spreminjanja animacije.
stopenjske funkcije
korak začetek
Nastavi animacijo korak za korakom, animacijo razdeli na segmente, spremembe se pojavijo na začetku vsakega koraka. Izračunano v korakih (1, začetek) .
korak-end
Animacija korak za korakom, spremembe se zgodijo na koncu vsakega koraka. Izračunano v korakih (1, konec) .
koraki (število korakov, položaj koraka)
Časovna funkcija koraka, ki ima dva parametra. Prvi parameter določa število intervalov v funkciji. Biti mora pozitivno celo število, večje od 0, razen če je drugi argument jump-none, v tem primeru mora biti pozitivno celo število, večje od 1. Drugi parameter, ki ni obvezen, določa položaj koraka, točko, na kateri se začne animacija, z uporabo ene od naslednjih vrednosti:
jump-start - prvi korak se pojavi pri vrednosti 0
jump-end - zadnji korak se pojavi pri vrednosti 1
jump-none - vsi koraki se zgodijo v območju (0, 1)
jump-both - prvi korak se pojavi pri vrednosti 0, zadnji - pri vrednosti 1
start - obnaša se kot jump-start
konec - obnaša se kot jump-end
Z vrednostjo start se animacija začne na začetku vsakega koraka, z vrednostjo end pa na koncu vsakega koraka z zamikom. Zakasnitev se izračuna kot rezultat deljenja časa animacije s številom korakov. Če drugi parameter ni podan, se uporabi privzeta vrednost end.
začetnica
dedovati
Sintaksa
Funkcija merjenja časa animacije: enostavnost; funkcija časovnega usmerjanja animacije: poenostavitev; funkcija-časovne-animacije: umiritev; funkcija-časovne-animacije: olajšanje-in-out; funkcija-časovne-animacije: linearna; funkcija-časovne-animacije: korak-start; funkcija-časovne-animacije: korak-end; funkcija-časovne-animacije: cubic-bezier(0,1, 0,7, 1,0, 0,1); funkcija-časovne-animacije: koraki(4, konec); funkcija za merjenje časa animacije: enostavnost, postopni začetek, kubični-bezier (0,1, 0,7, 1,0, 0,1); funkcija-časovne-animacije: začetna; funkcija-časovne-animacije: dedovanje;
Animacijo po korakih lahko uporabite za ustvarjanje zanimivih učinkov, kot je tipkanje besedila ali indikator nalaganja.
5. Ponavljanje animacije: lastnost števila iteracij animacije
Lastnost animation-iteration-count določa število predvajanj animacijske zanke. Začetna vrednost 1 pomeni, da se bo animacija enkrat predvajala od začetka do konca. Ta lastnost se pogosto uporablja v povezavi z alternativno vrednostjo lastnosti animation-direction, ki povzroči, da se animacija predvaja v obratni vrstni red v izmeničnih ciklih.
Nepremičnina se ne deduje.
Sintaksa
Animation-iterations-count: neskončno; število ponovitev animacije: 3; število iteracij animacije: 2,5; število iteracij animacije: 2, 0, neskončno;
6. Smer animacije: lastnost smeri animacije
Lastnost animation-direction določa, ali naj se animacija predvaja vzvratno v nekaterih ali vseh zankah. Ko se animacija predvaja v obratni smeri, se obrnejo tudi časovne funkcije. Na primer, pri predvajanju nazaj se bo funkcija popuščanja obnašala kot popuščanje.
Nepremičnina se ne deduje.
režija animacije
Vrednote:
normalno
Vse animacije se ponavljajo, kot je določeno. Privzeta vrednost.
vzvratno
Vse ponovitve animacije se predvajajo nazaj od tega, kako so bile definirane.
nadomestni
Vsaka liha ponovitev animacijske zanke se predvaja v normalni smeri, vsaka soda ponovitev pa v nasprotni smeri.
nadomestno vzvratno
Vsaka liha ponovitev animacijske zanke se predvaja v obratni smeri, vsaka soda ponovitev pa v normalni smeri.
začetnica
Nastavi vrednost lastnosti na privzeto vrednost.
dedovati
Podeduje vrednost lastnosti od nadrejenega elementa.
Če želite ugotoviti, ali je ponavljanje zanke animacije sodo ali liho, se štetje ponovitev začne pri 1 .
Lastnost animation-play-state določa, ali se bo animacija začela ali zaustavila. Zaustavitev animacije znotraj zanke je možna z uporabo te lastnosti v skriptu JavaScript. Animacijo lahko ustavite tudi, ko miškin kazalec premaknete nad predmet — stanje:hover .
9. Stanje elementa pred in po predvajanju animacije: lastnost animation-fill-mode
Lastnost animation-fill-mode določa, katere vrednosti animacija uporabi zunaj časa izvajanja. Ko se animacija konča, se element vrne v prvotne sloge. Privzeto animacija ne vpliva na vrednosti lastnosti, ko je animacija uporabljena za element - ime-animacije in zakasnitev-animacije. Poleg tega animacija privzeto ne vpliva na vrednosti lastnosti trajanja animacije in števila iteracij animacije, ko se konča. Lastnost animation-fill-mode lahko preglasi to vedenje.
Nepremičnina se ne deduje.
animation-fill-mode
Vrednote:
nič
Privzeta vrednost. Stanje elementa se ne spremeni pred ali po predvajanju animacije.
naprej
Ko se animacija konča (kot je določeno z vrednostjo števila iteracij animacije), bo animacija uporabila vrednosti lastnosti do konca animacije. Če je animation-iteration-count večje od nič, se uporabijo vrednosti za konec zadnje dokončane ponovitve animacije (namesto vrednosti za začetek naslednje ponovitve). Če je animation-iteration-count nič, bodo uporabljene vrednosti tiste, ki začnejo prvo ponovitev (enako kot animation-fill-mode: nazaj;).
nazaj
Za obdobje, določeno z animation-delay, bo animacija uporabila vrednosti lastnosti, definirane na ključni sličici, ki bo začela prvo ponovitev animacije. Te so bodisi iz vrednosti ključnih okvirjev (če je smer animacije: običajna ali smer animacije: nadomestna) ali vrednosti ključnih okvirjev (če je smer animacije: obratna ali smer animacije: nadomestna).
oboje
Omogoča elementu, da ostane na prvi ključni sličici, dokler se animacija ne začne (ne upošteva pozitivne vrednosti zakasnitve) in ostane na zadnji sličici do konca zadnje animacije.
Vse možnosti predvajanja animacije lahko združite v eno lastnost - animation , tako da jih navedete ločene s presledkom: animacija: ime-animacije animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
Za predvajanje animacije je dovolj, da določite le dve lastnosti - ime-animacije in trajanje-animacije, ostale lastnosti bodo imele privzete vrednosti. Vrstni red lastnosti ni pomemben, edina stvar je, da mora biti animation-duration pred animation-delay.
11. Več animacij
Za en element lahko nastavite več animacij, tako da navedete njihova imena, ločena z vejicami:
Div (animacija: senca 1 s poenostavitev 0,5 s izmenično, premik 5 s linearno 2 s;)
Danes se bomo naučili, kako hitro in enostavno animirati objekte spletnega mesta z uporabo dveh skriptov. Ime katerega lahko vidite zgoraj, v naslovu tega članka. Najprej pa naj vam povem, čemu je vsak od njih namenjen.
WOW.js je majhna knjižnica, ki vam omogoča, da omogočite animacijo na določeni stopnji listanja strani. Tehta zelo malo, poleg tega pa je popolnoma neodvisen - to pomeni, da ni treba povezovati jQueryja ali drugih pošasti.
Animate.CSS- scenarij, ki je neposredno odgovoren za samo animacijo. Pravzaprav wow.js vzame animacije iz te stvari. In teh je na desetine.
Slaba stran animate.css je, da je le preprost niz pravil CSS, ki temeljijo na animaciji. To pomeni, da se predvajajo takoj po nalaganju strani. In če animirani elementi niso vidni na "prvem" zaslonu, obiskovalci preprosto ne bodo videli vse te lepote. Konec koncev bo predvajan, preden stran previjejo na pravo mesto.
In v prvem zapisu (povezava v naslednjem odstavku), da se to ne zgodi, sem vam pokazal, kako in kam napisati js kode, da bi se animacija predvajala na določeni stopnji listanja strani. Bilo je zelo neprijetno, vendar je delovalo s pokom
Zato vam, preden začnete, svetujem, da si ogledate lekcijo "". Ker bom že namigoval, da znate uporabljati animacijo na spletnem mestu. Hkrati vam bo takoj jasno, kako wow.js olajša stvari. Navsezadnje nam zdaj ne bo treba pisati in se poglabljati v kodo js. Poveži in pozabi
In tako je uvoda konec. Zdaj pa se približajmo "telesu". Posnel sem video lekcijo na to temo, a pred ogledom želim pokazati, kaj dobite, če greste lekcijo do konca v praksi. Tako rekoč za večjo motivacijo
No, si pogledal? To je tisto, kar "zababahat" z lastnimi rokami. Zdaj pa tecite pogledat video.
Lekcija: WOW.js in Animate.CSS – več zabave skupaj!
Drznite si!
Nastavitev WOW.js
Kako prenesti in povezati.
1 korak. Prenesite skripta wow.js in animate.css z uradnih spletnih mest (glejte zgornje povezave pod videoposnetkom) in ju postavite v mapo svojega projekta.
2 korak. Skripte povežemo s preprosto kodo HTML na strani v oznaki
:
Opomba naročnika kanala Master-CSS:
Oznaka skripta mora biti vedno dodana na konec telesa. To se naredi za pospešitev nalaganja strani. Vsakič, ko brskalnik zadene oznako skripta, bo celotno spletno mesto zamrznilo nalaganje in upodabljanje, dokler se skript ne naloži. Iz tega pogosto vidimo spletna mesta, ki za dolgo časa samo bel list. In tudi, če je skript postavljen na konec telesa, imate zagotovilo, da je telo pripravljeno in skript bo zagotovo deloval. Hvala Romanu Belyaevu za podrobne razlage povezovalnih skriptov na spletnem mestu.
3. korak Skript morate inicializirati z dodajanjem naslednje kode takoj po povezavi:
S tem je povezava končana in čas je za drugo stopnjo.
Uporaba wow.js
Korak 1. Izberite element, ki ga želimo animirati, in mu dodajte razred class="wow". V spodnji kodi sem to prikazal s primerom slike:
2. korak Izberite animacijo in jo dodajte kot dodatni razred našemu psu:
3. korak Po potrebi dodajte nastavitve za animacijo z uporabo posebnih podatkovnih atributov:
V zgornji kodi sem določil, da se mora animacija sprožiti, ko slika preseže 200 slikovnih pik od dna zaslona. Toda hkrati bo imela zakasnitev pol sekunde, sama animacija pa bo trajala točno 2 sekundi.
Nastavitve animacije WOW.js prek atributov
data-wow-duration - določite čas predvajanja animacije data-wow-delay - nastavite zamik pred predvajanjem animacije data-wow-offset - vklopite animacijo, ko element preide določeno število slikovnih pik od dna zaslona data -wow-iteracija - število ponovitev animacije
Upoštevajte, da so ti atributi neobvezni. Če jih ne določite, se bo animacija preprosto predvajala privzeto takoj, ko se element pojavi na zaslonu, ko se pomikate po oknu brskalnika.
No, fantje. To je verjetno vse. Če imate kakršna koli vprašanja - vprašajte v komentarjih;)
