Preprosti drsniki z uporabo primerov css. Prilagodljiv drsnik CSS z ustvarjalnim učinkom. Čudovita diaprojekcija jQuery "Skitter".
Drsnik brez JavaScripta s kul učinkom obračanja diapozitivov. Popolnoma se prilagaja vsaki napravi. Razpoložljivi viri.
Funkcija: CSS drsnikČisti drsnik CSS je že pripravljen drsnik s samodejnim preklapljanjem med diapozitivi brez pomoči skriptov JS. To vrsto drsnikov praviloma cenijo razvijalci začetniki ali v primerih, ko ni možnosti/potrebe vključiti knjižnice.
Seveda je lažje uporabiti posebne vtičnike za ustvarjanje drsnikov (teh je veliko, na primer jQuery). Toda ta drsnik zapelje z nenavadnim učinkom listanja po diapozitivih. Poleg tega z visoko produktivnostjo.
Kako uporabiti ta primer na svojem spletnem mestuNa zgornji povezavi lahko prenesete arhiv, v katerem bo datoteka slider-css.html. Teoretično je vse, kar potrebujete za zagon drsnika CSS na vašem spletnem mestu, v tej datoteki. Tukaj je vaš algoritem dejanj:
1. Kopirajte vse sloge bloka drsnika, so v oznaki
...
|
Upoštevajte, da ima container.untitled lastnosti position: absolute in ga boste morda morali nekoliko prilagoditi zase.
2. Vsi diapozitivi so oviti
...
< div class = "untitled" > < div class = "untitled__slides" > . . . < / div > < / div > |
3. Ni težko razumeti kode HTML samega diapozitiva.
Profil London Scout Unsplash
< div class = "untitled__slide" > < div class = "untitled__slideBg" > < / div > < div class = "untitled__slideContent" > < span >London< / span > < span >skavt< / span > < a class = "button" href = "https://unsplash.com/@scoutthecity" target = "/black" >Profil Unsplash< / a > |
Ko sem delal na knjigi o jquery, sem naletel na dejstvo, da me je veliko mojih naročnikov prosilo, naj v njej povem, kako napisati drsni skript v jquery. Oprostite, dragi prijatelji! To je 21. stoletje in na našo srečo so nam na voljo vse užitke CSS3, kar nam omogoča implementacijo takšnih stvari brez ene vrstice javascripta.
1. del.Za začetek bom tistim, ki ne vedo, razložil, kaj je drsnik. Drsnik je blok določene širine, ki zavzema del spletne strani ali njeno celotno stran. Njegova glavna značilnost je vsebina, ki se samodejno ali ročno spreminja. Vsebina je lahko grafična podoba ali besedilo.
Seveda se lahko sprašujete: zakaj bi znova izumljali kolesje, če je v javascriptu veliko implementacij drsnikov? Tukaj so moji argumenti:
Torej, za naš primer potrebujete štiri slike, čeprav lahko v svojem projektu naredite trak s toliko slikami, kot jih potrebujete. Edini pogoj je, da morajo biti vse slike enake velikosti. Poleg tega sem vam pozabil povedati, da bo naš drsnik prilagodljiv (ja, Prilagodljiva postavitev, prav ste prebrali) in ga lahko uporabite v katerem koli svojem projektu za katero koli napravo. Ampak dovolj klepetanja, me že srbi, da bi napisal megakodo. Začnimo s HTML-jem:
Atribut alt sem pustil prazen zaradi prihranka prostora, lahko pa ga izpolnite sami glede na vaše SEO poizvedbe in za obveščanje uporabnikov, ki so onemogočili prikaz slik v brskalniku. Prav tako bi vas rad opozoril na dejstvo, da je prva slika ( alladin.jpg) bo prisoten tudi na koncu traku, kar bo našemu drsniku omogočilo ciklično pomikanje brez sunkov.
Zaradi udobja je širina 80 % okna, največja širina pa je velikost vsake posamezne fotografije (1000 slikovnih pik v našem primeru), saj ne želimo, da je slika raztegnjena:
Drsnik (širina: 80 %; največja širina: 1000 slikovnih pik; )
V naši kodi CSS je širina figure izražena kot odstotek div, v katerem se nahaja. To pomeni, da če slikovni trak vsebuje pet fotografij in div ustvari samo eno, se širina figure poveča za petkrat, kar je 500 % širine vsebnika div:
Nastavitev font-size: 0 posrka ves zrak iz slike in odstrani prazen prostor okoli in med slikami. položaj: relativno omogoča preprosto premikanje figure med animacijo.
Fotografije znotraj slikovnega traku moramo enakomerno razdeliti. Formula je zelo preprosta: če predpostavimo, da je širina figure 100 %, mora vsaka slika zavzeti 1/5 vodoravnega prostora:
Uporabiti je treba naslednja pravila CSS:
Slikovni trak img (širina: 20 %; višina: samodejno; )
Zdaj pa spremenimo lastnost prelivanja za div:
Drsnik (širina: 80 %; največja širina: 1000 slikovnih pik; preliv: skrit)
Na koncu moramo doseči, da se slikovni trak premakne od leve proti desni. Če je širina div vsebnika 100 %, bo vsak premik traku slike v levo izmerjen kot odstotek te razdalje:
@keyframes drsno ( 20 % ( levo: 0 %; ) 25 % ( levo: -100 %; ) 45 % ( levo: -100 %; ) 50 % ( levo: -200 %; ) 70 % ( levo: -200 %; ) 75 % ( levo: -300 %; ) 95 % ( levo: -300 %; ) 100 % ( levo: -400 %; ) )
Vsaka slika na drsniku bo zaprta v div in se bo premaknila za 5 %.
Slika drsnika (položaj: relativna; širina: 500 %; animacija: 30-s drsna neskončna; velikost pisave: 0; oblazinjenje: 0; rob: 0; levo: 0; )
2. del.Naredili smo mega kul drsnik brez javascripta. Dodajmo mu gumbe za upravljanje, preden zaspimo na lovorikah. Natančneje, ne v to (sem že preveč len, da bi se ukvarjal z njo), ampak ustvarimo novo.
Torej, naša koda HTML:
Zdaj pa poskrbimo za animiranje naših diapozitivov. Na žalost bo drugače za različno število diapozitivov:
/* za drsnik dveh diapozitivov */ @keyframes slider__item-autoplay_count_2 ( 0%(opacity:0;) 20%(opacity:1;) 50%(opacity:1;) 70%(opacity:0;) 100% (opacity:0;) ) /* za drsnik treh diapozitivov */ @keyframes slider__item-autoplay_count_3 ( 0%(opacity:0;) 10%(opacity:1;) 33% (opacity:1;) 43% ( opacity: 0;) 100%(opacity:0;) ) /* za drsnik s štirimi diapozitivi */ @keyframes slider__item-autoplay_count_4 ( 0%(opacity:0;) 8% (opacity:1;) 25% (opacity :1;) 33% (opacity:0;) 100%(opacity:0;) ) /* za drsnik petih diapozitivov */ @keyframes slider__item-autoplay_count_5 ( 0%(opacity:0;) 7% (opacity: 1;) 20 % (motnost:1;) 27 % (motnost:0;) 100 %(motnost:0;) )
Žalostno, kajne? Poleg tega ne pozabite, da morate za Opera, Chrome, IE in Mozilla vse napisati enako, vendar z ustrezno predpono. Zdaj pa napišimo kodo za animiranje naših diapozitivov (v nadaljevanju bo prikazana koda za tri diapozitive. Kodo za več spletnih mest si lahko ogledate v vzorčni kodi):
Slider_count_3 .item ( -moz-animation: slider__item-autoplay_count_3 15 s neskončno; -webkit-animation: slider__item-autoplay_count_3 15 s neskončno; -o-animacija: slider__item-autoplay_count_3 15 s neskončno; animacija: slider__item-autoplay_count_3 15 s neskončno ; .ite) m: nth -of-type(2) ( -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s; ) .item:nth-of- tip (3) ( -moz-animation-delay:10s; -webkit-animation-delay:10s; -o-animation-delay:10s; animation-delay:10s; )
Kot lahko vidite, se za prvi par ničelni odmik ne spremeni. Poleg tega odmik ni odvisen od števila diapozitivov, zato ga je mogoče opisati enkrat za največje število diapozitivov. Zdaj pa poskrbimo, da se diapozitivi ne spremenijo, ko uporabnik premakne miško nad naš drsnik:
Slider:hover .item ( -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; )
Končno smo morali zamenjati diapozitive. Kot veste, obstaja več dogodkov, ki vam omogočajo spreminjanje lastnosti elementa s pomočjo CSS. Za klik miške nam lahko pomagajo psevdorazredi :focus, :target ali :checked na enem od elementov strani. Psevdorazred :focus ima lahko le en element na stran, :target zamaši zgodovino brskalnika in zahteva prisotnost oznake; Psevdorazred:preverjeno si zapomni stanje, preden zapusti stran, in ga je v primeru izbirnih gumbov mogoče izbrati samo na enem elementu v skupini. Izkoristimo to. Preden vstavite naslednjo kodo HTML
In potem :
1 2 3
/* Slog drsnikov v stanju "ni izbrano" */ .slider .item ~ .item ( motnost: 0.0; ) /* Slog drsnikov v stanju "izbrano" */ .slider input:nth-of-type( 1):preverjeno ~ .item:nth-of-type(1), .slider input:nth-of-type(2):preverjeno ~ .item:nth-of-type(2), .slider input:nth- of-type( 3):preverjeno ~ .item:nth-of-type(3), .slider input:nth-of-type(4):preverjeno ~ .item:nth-of-type(4), .slider input:nth-of-type(5):preverjeno ~ .item:nth-of-type(5) ( motnost: 1,0; )
Uporabili smo preklop lastnosti nepreglednosti diapozitiva vsebnika s sliko. To je posledica dejstva, da lahko za razliko od elementa img v vsebnik div postavite kakršne koli dodatne informacije (na primer naslov diapozitiva). Seveda, če bi uporabljali Javascript, bi lahko uporabili atribut podatkov. Ampak smo se strinjali, se spomniš?)) Za diapozitive bomo določili lastnosti prehoda, tako da bo preklop potekal gladko in ne sunkovito.
Drsnik .item ( -moz-transition: nepreglednost 0,2 s linearno; -webkit-transition: motnost 0,2 s linearno; -o-transition: motnost 0,2 s linearno; prehod: motnost 0,2 s linearno; )
Ustavitev animacije vseh diapozitivov in gumbov pri izbiri katerega koli diapozitiva lahko izvedete z naslednjo kodo CSS:
Vnos drsnika: označeno ~ .item ( motnost: 0,0; -moz-animacija: nobena; -webkit-animacija: nobena; -o-animacija: nobena; animacija: nobena; )
Da bi podprli nekatere starejše brskalnike, ne animiramo prvega diapozitiva, temveč ga nastavimo na motnost: 1.0, vendar imamo težavo: ko druga dva diapozitiva gladko preklapljata med seboj, prvi diapozitiv zasije. Če želite odpraviti to napako, nastavite zakasnitev prehoda za vse diapozitive, razen za izbranega, in zanj bomo naredili indeks z večji od tistega za vse druge diapozitive:
Drsnik .item ( motnost: 1,0; -moz-transition: motnost 0,0 s linearno 0,2 s; -webkit-transition: motnost 0,0 s linearno 0,2 s; -o-transition: motnost 0,0 s linearno 0,2 s; prehod: motnost 0,0 s linearno 0,2s;) .slider input:nth-of-type(1):checked ~ .item:nth-of-type(1), .slider input:nth-of-type(2):checked ~ .item:nth -of-type(2), .slider input:nth-of-type(3):preverjeno ~ .item:nth-of-type(3), .slider input:nth-of-type(4):preverjeno ~ .item:nth-of-type(4), .slider input:nth-of-type(5):preverjeno ~ .item:nth-of-type(5) ( prehod: nepreglednost 0,2 s linearno; -moz-prehod : nepreglednost 0,2 s linearna; nepreglednost 0,2 s linearna;
Da zagotovimo, da diapozitivi niso v nasprotju z drugimi elementi spletnega mesta (na primer, da ne prekrivajo spustnega menija z indeksom z, manjšim ali enakim 6), ustvarimo lasten kontekst za blok tako, da nastavimo najmanjši z-indeks, potreben za vidnost:
Drsnik ( položaj: relativno; z-indeks: 0; )
To je pravzaprav vse. Vse, kar ostane, je, da postavimo naše elemente z naslednjo kodo CSS in lahko ste srečni:
Drsnik (položaj: relativni; z-indeks:0;) .vnos drsnika (zaslon: noben;) .oznaka drsnika (dno: 10 slikovnih pik; zaslon: vstavljeni blok; z-indeks: 2; širina: 26 slikovnih pik; višina: 27 slikovnih pik; ozadje: #e6e6e6; obroba: #bfbfbf; vstavljena 0 1px #000000 , tahoma; barva: #333; .slider .selector_list (position: absolute; bottom: 15px; z-index: 11; ) .slider .item (position: relative; width:100%; ) .slider. item ~ .item ( položaj: absolutno; zgoraj: 0px; levo: 0px; )
To je vrsta prilagodljivega drsnika brez Javascripta z uporabo CSS3, ki bi ga morali imeti na koncu.
Pozdravljeni dragi začetniki spletni mojstri.
Tukaj je najpreprostejši čisti drsnik CSS na svetu.
Prednosti takega drsnika so lahkotnost in varnost, pa tudi dejstvo, da ga lahko izdela in namesti na svojo spletno stran tudi najbolj začetni spletni skrbnik.
Pomanjkljivost je, da je nemogoče ponoviti zanko samo z uporabo CSS.
Če pa upoštevate, da se osem slik pomika več kot 30 sekund, potem je ta čas povsem dovolj, da si obiskovalec ogleda stran.
In če je drsnik nameščen v glavi spletnega mesta, ga zagotovo nihče ne bo pogledal pol minute.
Učinke videza slik lahko spremenite po svojih željah in v skladu z zmožnostmi CSS3. Poglejmo, kje in kako je to mogoče storiti.
CSS drsnik
/* Drsni blok */
#zdrs (
/* Nastavi relativni položaj */
položaj: relativni;
/*Velikost bloka in okvir*/
širina: 400px;
višina: 200 slikovnih pik;
obroba : 2px polna #333 ;
polmer obrobe: 5px;
}
/* Izbirnik skupine za 7 slik */
.image1,
.image2,
.image3,
.slika4,
.image5,
.image6,
.slika7 (
/* Položaj absolutno glede na blok */
položaj: absolutno;
/* Naj bodo popolnoma prosojni */
motnost: 0;
širina: 400px;
višina: 200 slikovnih pik;
}
/* Poveži animacijo s prvo sliko */
.slika1 (
animacija : ena slika 8s 1s enostavnost zamenjava ;
}
/* Animacija naslednjih slik se izvede z začetnim zamikom, potrebnim za pomikanje prejšnjih slik */
.slika2 (
animacija : dve sliki 8s 5s enostavnost zamenjava ;
}
.slika3 (
animacija : tri slike 8 s 10 s enostavno zamenjavo ;
}
.slika4 (
animacija : štiri slike 8s 14s enostavno zamenjava ;
}
.slika5 (
animacija: pet slik 8s 18s enostavno zamenjava;
}
.slika6 (
animacija : šest slik 8 s 22 s enostavno zamenjava ;
}
.slika7 (
animacija : sedem slik 8s 26s enostavno zamenjava ;
}
/* Zadnja slika, ki ni prosojna, ostane vidna po drsenju */
.slika8 (
položaj: absolutno;
širina: 400px;
višina: 200 slikovnih pik;
animacija : osem slik 34s enostavno izmenično ;
}
/* Animacije za prvo sliko */
@keyframes ena slika (
/* Nastavite spremembo prosojnosti. Tukaj lahko dodate rotacijo, premikanje izven meja bloka ali pojav iz središča (skaliranje) */
0%
{
motnost: 1;
}
50%
{
motnost: 1;
}
100%
{
motnost: 0;
}
}
/* Animacija za naslednjih 6 slik */
@keyframes dve sliki (
0%
{
motnost: 0;
}
50%
{
motnost: 1;
}
100%
{
motnost: 0;
}
}
@keyframes tri slike (
0%
{
motnost: 0;
}
50%
{
motnost: 1;
}
100%
{
motnost: 0;
}
}
@keyframes štiri slike (
0%
{
motnost: 0;
}
50%
{
motnost: 1;
}
100%
{
motnost: 0;
}
}
@keyframes pet slik (
0%
{
motnost: 0;
}
50%
{
motnost: 1;
}
100%
{
motnost: 0;
}
}
@keyframes šest slik (
0%
{
motnost: 0;
}
50%
{
motnost: 1;
}
100%
{
motnost: 0;
}
}
@keyframes sedem slik (
0%
{
motnost: 0;
}
50%
{
motnost: 1;
}
100%
{
motnost: 0;
}
}
/* Animacija za osmo sliko */
@keyframes osem slik (
/* ostane pregleden, dokler se prejšnji ne pomaknejo */
0%
{
motnost: 0;
}
87%
{
motnost: 0;
}
/*Postane vidno na koncu drsnika */
100%
{
motnost: 1;
}
}
In za vsak slučaj, da lahko znova premikate drsnik, lahko dodate naslednjo kodo:
varCLN; onload = funkcija () (CLN = document.getElementById("slaid").cloneNode(3))
V tem primeru se pod drsnikom pojavi gumb, ki ga lahko poljubno poimenujete in oblikujete v CSS.
P.S. Če poskusite prilagoditi intervale za prikaz slik v @keyframes, lahko vrtiljak naredite neprekinjen.
Uspel sem. Lahko pogledaš tukaj. Besedilo v pasicah se pomika z lastnostmi animacije brez skripta.
Resnica je bila, da mi je to uspelo le s tremi slikami.
P.P.S. Zdaj so podobne pasice na tem spletnem mestu pod glavo spletnega mesta.
Želim vam ustvarjalni uspeh.
1. Odlična diaprojekcija jQueryVelika, spektakularna diaprojekcija z uporabo tehnologij jQuery.
2. Vtičnik jQuery “Scale Carousel”Razširljiva diaprojekcija z uporabo jQuery. Nastavite lahko velikosti diaprojekcije, ki vam najbolj ustrezajo.
3. Vtičnik jQuery “slideJS”Drsnik slike z besedilnim opisom.
4. Vtičnik “JSliderNews” 5. CSS3 jQuery drsnikKo miškin kazalec premaknete nad navigacijske puščice, se prikaže krožna sličica naslednjega diapozitiva.
6. Lep drsnik jQuery »Presentation Cycle«.drsnik jQuery z indikatorjem nalaganja slik. Zagotovljeno je samodejno menjavanje diapozitivov.
7. Vtičnik jQuery »Drsnik za paralakso«Drsnik z volumetričnim učinkom ozadja. Vrhunec tega drsnika je premikanje ozadja, ki je sestavljeno iz več plasti, od katerih se vsaka premika z različno hitrostjo. Rezultat je imitacija volumetričnega učinka. Izgleda zelo lepo, lahko se prepričate sami. Učinek je bolj gladko prikazan v brskalnikih, kot so Opera, Google Chrome, IE.
8. Svež, lahek drsnik jQuery “bxSlider 3.0”Na predstavitveni strani v razdelku »primeri« najdete povezave do vseh možnih uporab tega vtičnika.
9. jQuery slikovni drsnik, vtičnik »slideJS«.Eleganten drsnik jQuery lahko zagotovo okrasi vaš projekt.
10. Vtičnik za diaprojekcijo jQuery “Easy Slides” v1.1Preprost vtičnik jQuery za ustvarjanje diaprojekcij.
11. Vtičnik jQuery SlidyLahek vtičnik jQuery v različnih različicah. Zagotovljeno je samodejno spreminjanje diapozitivov.
12. jQuery CSS galerija s samodejnim menjavanjem diapozitivovČe obiskovalec v določenem času ne klikne puščic »Naprej« ali »Nazaj«, se bo galerija začela samodejno premikati.
13. Drsnik jQuery “Nivo Slider”Zelo profesionalen, visokokakovosten, lahek vtičnik z veljavno kodo. Na voljo je veliko različnih učinkov prehoda med diapozitivi.
14. drsnik jQuery “MobilySlider”Svež drsnik. jQuery drsnik z različnimi učinki spreminjanja slike.
15. Vtičnik jQuery “Slider²”Lahek drsnik s samodejnim menjalnikom diapozitivov.
16. Svež drsnik javascriptDrsnik s samodejno menjavo slike.
Vtičnik za izvedbo diaprojekcij s samodejnim menjavanjem diapozitivov. Zaslon je mogoče upravljati s pomočjo sličic slik.
drsnik za slike jQuery CSS z uporabo vtičnika NivoSlider.
19. Drsnik jQuery “jShowOff”Vtičnik za rotacijo vsebine. Tri možnosti uporabe: brez navigacije (s samodejno spremembo formata diaprojekcije), z navigacijo v obliki gumbov, z navigacijo v obliki sličic slik.
20. Vtičnik »Shutter Effect Portfolio«.Svež vtičnik jQuery za oblikovanje fotografskega portfelja. Galerija ima zanimiv učinek menjave slik. Fotografije si sledijo z učinkom, podobnim delovanju zaklopa objektiva.
21. Lahek javascript drsnik CSS »TinySlider 2«Implementacija slikovnega drsnika z uporabo javascripta in CSS.
22. Čudovit drsnik »Tinycircleslider«Eleganten okrogel drsnik. Prehod med slikami izvedemo tako, da drsnik v obliki rdečega kroga povlečemo po obodu. Popolnoma se bo prilegal k vaši spletni strani, če boste v dizajnu uporabili okrogle elemente.
23. Drsnik za slike z jQueryLahek drsnik “Slider Kit”. Drsnik je na voljo v različnih izvedbah: navpični in vodoravni. Izvedene so tudi različne vrste navigacije med slikami: z uporabo gumbov »Naprej« in »Nazaj«, s kolescem miške, s klikom miške na diapozitiv.
24. Galerija z miniaturami “Slider Kit”Galerija "Slider Kit". Drsenje po sličicah se izvaja navpično in vodoravno. Prehod med slikami se izvaja s pomočjo: miškinega kolesca, klika miške ali premikanja kazalca nad sličico.
25. Drsnik vsebine jQuery “Slider Kit”Navpični in vodoravni drsnik vsebine z uporabo jQuery.
26. Diaprojekcija jQuery “Slider Kit”Diaprojekcija s samodejnim spreminjanjem diapozitivov.
27. Lahek profesionalni drsnik javascript CSS3Lep drsnik jQuery in CSS3, ustvarjen leta 2011.
jQuery diaprojekcija s sličicami.
29. Preprosta diaprojekcija jQueryDiaprojekcija z navigacijskimi gumbi.
30. Čudovita diaprojekcija »Skitter« jQueryVtičnik jQuery Skitter za ustvarjanje osupljivih diaprojekcij. Vtičnik podpira 22 (!) vrst različnih animacijskih učinkov pri menjavi slik. Lahko deluje z dvema možnostma navigacije po diapozitivih: z uporabo številk diapozitivov in z uporabo sličic. Bodite prepričani, da si ogledate predstavitev, zelo kakovostna najdba. Uporabljene tehnologije: CSS, HTML, jQuery, PHP.
31. Diaprojekcija “Nerodno”Funkcionalna diaprojekcija. Diapozitivi so lahko: preproste slike, slike z napisi, slike z opisi orodij, videi. Za navigacijo lahko uporabljate puščice, povezave s številkami diapozitivov in levo/desno tipko na tipkovnici. Diaprojekcija je na voljo v več različicah: s sličicami in brez njih. Za ogled vseh možnosti sledite povezavam Demo #1 - Demo #6, ki se nahajajo na vrhu predstavitvene strani.
Zelo izviren dizajn drsnika za sliko, ki spominja na pahljačo. Animirani prehod med diapozitivi. Navigacija med slikami se izvaja s puščicami. Na voljo je tudi samodejni premik, ki ga je mogoče vklopiti in izklopiti z gumbom Predvajaj/Premor na vrhu.
Animirani drsnik jQuery. Slike ozadja se samodejno spremenijo, ko spremenite velikost okna brskalnika. Za vsako sliko se pojavi blok z opisom.
34. Drsnik »Flux Slider« z uporabo jQuery in CSS3Nov drsnik jQuery. Več kul animiranih učinkov pri menjavi diapozitivov.
35. Vtičnik jQuery “jSwitch”Animirana galerija jQuery.
Lahka diaprojekcija jQuery s samodejnim spreminjanjem diapozitivov.
37. Nova različica vtičnika “SlideDeck 1.2.2”Drsnik za profesionalne vsebine. Obstajajo možnosti s samodejnim spreminjanjem diapozitivov, pa tudi možnost uporabe kolesca miške za premikanje med diapozitivi.
38. drsnik jQuery “Sudo Slider”Lahek slikovni drsnik z uporabo jQuery. Možnosti izvedbe je veliko: vodoravno in navpično spreminjanje slik, s povezavami na številko diapozitiva in brez njih, z in brez napisov slik, različni učinki spreminjanja slik. Obstaja funkcija samodejnega spreminjanja diapozitivov. Povezave do vseh primerov izvedbe najdete na predstavitveni strani.
39. jQuery CSS3 diaprojekcijaDiaprojekcija s sličicami podpira način samodejnega spreminjanja diapozitivov.
40. Drsnik jQuery “Flux Slider”Drsnik s številnimi učinki spreminjanja slike.
41. Preprost drsnik jQueryEleganten drsnik za slike, ki uporablja jQuery.
Z razvojem CSS3 se zmogljivosti postavitve eksponentno povečujejo. Vedno več funkcionalnosti je mogoče implementirati z uporabo "čistega" CSS. Ta objava prikazuje postopek razvoja interaktivnega drsnika zanke brez ene same vrstice JavaScripta. Samodejno vrtenje, izbira katerega koli diapozitiva z gladkim prehodom - z uporabo "čistega" CSS. Primer v akciji
Splošne informacije Standardi in predpone Lastnosti prehod, animacija in transformacija so že dolgo implementirane v takšni ali drugačni obliki v vseh priljubljenih brskalnikih. 6. junija 2012 je W3C objavil, da se ta del razvijajočega se standarda CSS 3.0 ne bo dramatično spremenil, in priporočil, da ga vsi brskalniki implementirajo danes.Za front-end razvijalce to pomeni standard, na katerem je treba graditi. Zdaj se vam ni treba bati, da bo v prihodnosti kakšen brskalnik opustil svojo nestandardno lastnost predpone - navsezadnje jo bo podvojila standardna lastnost in jo po potrebi zamenjal.
Zastarele različice Internet Explorerja, ki bo kmalu vključeval celo različico 9, ne podpirajo prehoda, animacije in transformacije v nobeni obliki. Toda njihov delež še vedno presega 10 %. Za IE7-9 je na voljo js "škrabina", ni pa nič za učinek gladkega preklapljanja med diapozitivi.
Zakaj CSS in ne JS?
Obstaja veliko nalog, ki jih je mogoče rešiti s pomočjo CSS: interaktivne galerije, večnivojski spustni meniji, izdelava in animacija tridimenzionalnih grafikonov ... Zakaj bi uporabljali CSS, ko lahko vse naredite v JS, še posebej glede na množico pripravljenih - narejen razvoj? Glavni argumenti so lahko: - V večini primerov so učinki CSS hitrejši, ker njihovo izvajanje izvajajo izključno motorji brskalnika. To je še posebej opazno na mobilnih napravah.
- Za izvedbo naloge ne potrebujete znanja JS ali katerega koli programskega jezika na splošno. Urejanje CSS je praviloma na voljo tudi povprečnemu uporabniku. Poleg tega je "razbijanje stvari" v CSS veliko težje kot v JS.
Razredi drsnikov:
.slider /* Blok, ki vsebuje vir slik */ .slider__radio /* Izbirni gumb */ .slider__item /* Diapozitiv */ .slider__img /* Slika znotraj diapozitiva */ .slider__number-list /* Vsebnik s preklopnimi gumbi */ . slider__number /* Gumb za omogočanje povezanega diapozitiva */ .slider__number-after /* implementiran za podporo IE7 in IE8, ki ne podpirata psevdoelementov :after oziroma ::after */ .slider_count_X /* Modifikator, ki določa številko diapozitivov X */
@keyframes slider__item-autoplay_count_3 ( 0%(opacity:0;) 10%(opacity:1;) 33% (opacity:1;) 43% (opacity:0;) 100%(opacity:0;) )
Posebnost izvedbe drsnika je, da je vsem diapozitivom in vsem gumbom dodeljena enaka animacija:
slider_count_3 .slider__item, slider_count_3 .slider__number-after ( -moz-animation: slider__item-autoplay_count_3 15 s neskončno; -webkit-animation: slider__item-autoplay_count_3 15 s neskončno; -o-animacija: slider__item-autoplay_count_3 15 s neskončno; a nimacija: slider__item -autoplay_count_3 15 s neskončno ;)
Ta pristop vam omogoča, da resno zmanjšate količino kode, ker je treba vse animacije še vedno podvojiti z različicami predpone (@-webkit-keyframes, @-moz-keyframes in @-o-keyframes) in vsak tak "sklad" pravila je treba posebej opisati za vsako potrebno število diapozitivov (s strani stranke). Če opišete animacijo posebej za vsak diapozitiv, potem lahko količina kode znaša več deset kilobajtov.
Da bi se temu izognili, vendar zaporedno animirate vse diapozitive in gumbe z eno animacijo, je dovolj, da nastavite odmik začetka animacije v času za vsak par diapozitiv + gumb:
.slider__item:nth-of-type(2), .slider__number:nth-of-type(2) > .slider__number-after ( -moz-animation-delay:5s; -webkit-animation-delay:5s; -o- animation-delay:5s;) .slider__item:nth-of-type(3), .slider__number:nth-of-type(3) > .slider__number-after ( -moz-animation-delay:10s) -webkit-animation-delay:10s;
Za prvi par ostane privzeta vrednost - ničelni odmik.
Pomembno je tudi, da odmik ni odvisen od števila diapozitivov in ga je mogoče opisati enkrat za največje število diapozitivov.
Kot rezultat, gladek animirani prehod med diapozitivi izgleda takole:
.slider:hover .slider__item, .slider:hover .slider__number-after ( -moz-animation-play-state: zaustavljeno; -webkit-animation-play-state: zaustavljeno; -o-animation-play-state: zaustavljeno; animacija -play-state: paused; ) Kliknite preklop Obstaja več "dogodkov" CSS, ki preklopijo stanje elementa html. Če govorimo o kliku miške, potem je to pojav psevdorazredov: focus, :target ali: označen na enem od elementov strani. Pseudo-class:focus lahko ima največ en element na stran hkrati; pseudo-class:target zamaši zgodovino brskalnika in zahteva prisotnost oznake »a«; pseudo-class:checked si zapomni stanje, preden zapusti stran, poleg tega je v primeru izbirnih gumbov diskretno stikalo, ko je mogoče izbrati samo en element določene skupine - to je tisto, kar je potrebno.
.slider__radio (slogi za neizbrani izbirni gumb) .slider__radio:preverjeno (slogi za izbrani izbirni gumb)
V izbirnikih pod nivojem 4 lahko preklapljate stanje poljubnega elementa (na primer motnost diapozitiva) samo v povezavi z izbirnim gumbom z uporabo sosednjih izbirnikov + in ~. Zamenjate lahko tako sloge soseda kot sloge sosedovih potomcev, v vsakem primeru pa se mora sosed nahajati za izbirnim gumbom.
/* Slog prvega diapozitiva v stanju »ni izbrano« */ .slider__radio:nth-of-type(1) ~ .slider__item:nth-of-type(1) ( motnost: 0,0; ) /* Slog prvi diapozitiv v izbranem stanju" */ .slider__radio:nth-of-type(1):checked ~ .slider__item:nth-of-type(1) ( motnost: 1.0; )
Motnost diapozitiva, vsebnika, ki vsebuje sliko, je bila spremenjena. To je bolj univerzalna metoda kot preklapljanje lastnosti slike, saj lahko vsebnik div, za razliko od praznega elementa img, vsebuje kakršne koli dodatne informacije (na primer naslov diapozitiva ali soroden opis, vključno s povezavami).
Diapozitivi imajo lastnosti prehoda, ki vam omogočajo gladko preklapljanje med njimi.
.slider__item ( -moz-transition: nepreglednost 0,2 s linearno; -webkit-transition: motnost 0,2 s linearno; -o-transition: motnost 0,2 s linearno; prehod: motnost 0,2 s linearno; )
Ker ima vsak diapozitiv animacijo, čeprav po strukturi enaka, in mora biti animacija vseh diapozitivov izklopljena (sicer bodo pri gladkem prehodu sodelovali trije diapozitivi), morajo biti vsi radijski gumbi postavljeni pred prvi diapozitiv.
...
...
Poleg tega morajo biti vsi gumbi (oznake izbirnih gumbov) združeni v ločen blok in postavljeni za izbirnimi gumbi, sicer lahko pride do težav pri univerzalnem pozicioniranju oznak za poljubno število diapozitivov.
Ustavitev animacije vseh diapozitivov in gumbov pri izbiri katerega koli diapozitiva je nastavljena na naslednji način:
.slider__radio:preverjeno ~ .slider__item, .slider__radio:preverjeno ~ .slider__number-list > .slider__number-after ( motnost: 0,0; -moz-animation: brez; -webkit-animation: brez; -o-animacija: brez; animacija: nič;
.slider_count_X
kjer je X število diapozitivov.
Za podporo nekaterim starejšim brskalnikom prvi diapozitiv ni animiran. Zaradi tega ima vsebnik prve slike vedno motnost 1,0. Pojavi se težava: pri gladkem preklapljanju dveh drugih diapozitivov med seboj prvi zasije (to je lahko tudi ozadje nadrejenega bloka drsnika). Če želite odstraniti učinek sijaja, nastavite zakasnitev prehoda za vse diapozitive razen za izbranega; za izbranega je z-indeks nastavljen večji kot za vse ostale:
.slider__item ( motnost: 1,0; položaj: relativno; -moz-transition: motnost 0,0 s linearno 0,2 s; -webkit-transition: motnost 0,0 s linearno 0,2 s; -o-transition: motnost 0,0 s linearno 0,2 s; prehod: motnost 0,0s linearno 0,2s; nth-of-type(2), .slider__radio:nth-of-type(3):preverjeno ~ .slider__item:nth-of-type(3), .slider__radio:nth-of-type( 4): označeno ~ . slider__item: nth-of-type (4), .slider__radio: nth-of-type (5): označeno ~ .slider__item: nth-of-type (5) ( -moz-transition: neprozornost 0,2 s linearno; motnost 0,2 s linearno; prehod 0,2 s linearno;
Da zagotovimo, da diapozitivi niso v nasprotju z drugimi elementi spletnega mesta (na primer, da ne prekrivajo spustnega menija z indeksom z, manjšim ali enakim 6), ustvarimo lasten kontekst zlaganja za blok tako, da nastavitev najmanjšega indeksa z, potrebnega za vidnost:
.drsnik (z-indeks: 0; )
Delujoč primer si lahko ogledate