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 >
Ta zbirka vsebuje najboljše in najkakovostnejše čipe CSS. Tukaj lahko najdete različne in neverjetne predstavitve in tehnike slavnih oblikovalcev postavitev in oblikovalcev, ki poskušajo dokazati, da je zdaj mogoče narediti skoraj vse s čistim CSS. Tukaj lahko najdete tudi več lekcij, ki podrobno opisujejo, kako narediti takšno kreacijo. Upam, da vam bo ta zbirka v pomoč.
CSS 3D oblaki
V tej predstavitvi boste lahko ustvarjali in urejali muhasti oblaki v 3D. Ti oblaki CSS nam dajejo jasno vedeti, da so možnosti spletnih tehnologij skoraj neomejene.
Čisti logotipi CSS
To so primeri logotipov, izdelanih samo s čistim CSS. Samo pomislite, slike niso bile uporabljene pri ustvarjanju. Samo nekaj je.
Abeceda z animacijo CSS
Odličen in umetniški primer uporabe CSS v abecedi
3D navigacija za spletno mesto
Preprosta, a zelo elegantna navigacijska vrstica za spletno stran, seveda izdelana samo s CSS3. brez slik in skriptov.
Doodle iz Googla na CSS
Eden od mnogih priložnostnih logotipov iz iskalnika Google, narejen v CSS. To je odličen primer dobre uporabe animacij CSS.
Drsnik
Dobro izdelan in kvaliteten drsnik za slike. Plus 4 primeri v predstavitvi.
Dvojni animirani prstan
Čudovit animiran in barvit prstan z ne zelo veliko kodo CSS
Zamegli s CSS
Zdi se mi zelo potreben filter, še posebej, ker je narejen na čistem CSS. Zameglitev lahko pritegne pozornost uporabnika na določeno točko.
Celoten vodnik po Flexboxu
Ta članek govori o odzivnih škatlah Flexbox. V celoti pove o teh blokih, čeprav je članek v angleščini.
Barvit in animiran meni CSS3
Čudovit spustni meni za spletno mesto z ikonami. Velik plus je, da je v celoti izdelan v CSS.
CSS filtri
Kakovosten material v angleščini, ki govori o uporabi filtrov CSS na slikah.
CSS obrazci
Objavite o obrazcih CSS s številnimi primeri
Vrstica napredka CSS
Vadnica o tem, kako ustvariti elegantne vrstice napredka s čistim CSS in animacijo. Ogledate si lahko tudi primer in prenesete izvorno kodo.
Animacija - Animate.css
Najbolj priljubljen projekt CSS animacije na spletu danes. In verjetno najpreprostejši in najbolj kakovosten, pa tudi brezplačen.
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.
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;)
