Uprava za CSS HTML klizač. Adaptivni klizač na CSS-u sa kreativnim efektom

  • Html

    • Uz razvoj CSS3, izgled se eksponencijalno rastu. Sve više funkcionalnije mogu se implementirati na "čisti" CSS. Ovaj post prikazuje razvojni proces. interaktivan Ciklički klizač bez jednog linije JavaScript. Automatska rotacija, izbor bilo kojeg slajda sa glatkim tranzicijom - na "čistom" CSS-u. Primjer u akciji

    Opće informacije.

    Standardi i prefiksi
    Prelaz nekretnine, animacija i transformacija dugo se implementiraju u jednoj ili drugoj, implementirani u svim popularnim preglednicima. 6. juna 2012. godine, W3C je najavio da se ovaj dio CSS 3.0 razvijenog standarda ne promijeni dramatično i preporučio ga je provesti u svim preglednicima danas.

    Za prednjeg programera to znači pojavu standarda na koji se možete osloniti. Sada nije potrebno bojati da će u budućnosti bilo koji preglednik odbiti svoj prefiks nestandardniji nekretnina - jer će ga biti duplicirano standardnim svojstvom i po potrebi ga zamijeniti.

    Zastario internet verzija Explorer, koji će se uskoro pripisati čak i na 9. verziju, ne podržavajte tranziciju, animaciju i transformišite na koji način. Ali njihov udio i dalje veći od 10%. IE7-9 nudi JS-"utikač", a efekat glatko prebacivanja između slajdova nije ništa.

    Zašto CSS, a ne JS?
    Postoji mnogo zadataka koji se mogu riješiti kada cSS pomoć: Interaktivne galerije, višestruke padajuće menije, zgrada i animacija trodimenzionalnih dijagrama ... Zašto koristiti CSS kada možete učiniti sve na JS, posebno s obzirom na masu gotovih kretanja? Glavni argumenti mogu biti takav:
    • U većini slučajeva, CSS efekti Radite brže, jer ih prate isključivo njihovi preglednici. To se posebno vidi na mobilnim uređajima.
    • Da biste implementirali zadatak, ne treba vam znanje JS i uopšte nijedan programski jezici. Uređivanje CSS-a, u pravilu je takođe dostupan običnom korisniku. I "šarmantna ogrevna drveta" u CSS-u mnogo je složenija nego u JS-u.

    Prodaja

    Bem
    Dakle, modifikator metodološke bloka (BEM) korišten je za imenovanje CSS klasa. Donja linija je da se izgled temelji na izgledu stranice od neovisnih blokova. Prema Bemu, blok može imati elemente, ali samo unutar bloka.

    Klizači:
    .Slider / * blok koji sadrži sliku * / .Slider__radio / * radio point * / .Slider__item / * slajd * / .sLider__img / * slika unutar klizača * / .Slider__BRUMB-LIST / * spremnik sa tasterima za prebacivanje * / .Slider__broj / * Dugme inkluzije pridruženog slajda * / .Slider__broj-nakon / * ugrađen je u podršku IE7 i IE8, koji ne podržavaju pseudo-elemente: nakon i :: Nakon, respektivno * / .slider_count_x / * modifikator koji definira broj slajdovi x * /

    Animacija
    Slijed animacije za ključno osoblje za tri slajdove izgleda ovako:
    @Keyframes kliznik__item-autoplay_count_3 (0% (neprozirnost: 0;) 10% (neprozirnost: 1;) 33% (neprozirnost: 1;) 43% (neprozirnost: 0;))
    Značajka implementacije klizača je da su svi slajdovi i svi gumbi dodijeljeni istu animaciju:
    Slider_count_3 .Slider__item, klider_count_3-a (-moz-animacija:--wount_3 15s beskonaiment_count_3 15s beskoplay_count_3 15s beskoplay; animacija: kliznik__item-autoplay_count_3 15s beskonačan ;)
    Ovaj pristup omogućava vam ozbiljno smanjenje količine koda, jer sve animacije još uvijek moraju da ih dupliciraju sa prefiks verzijama (@ -webkit-keyframes, @ -moz-ključframes i @ -o-keyframes) i svaki takav "hrp" Pravila moraju biti opisane odvojeno za svaki broj prezentacija (od strane kupca). Ako također zasebno opišite animaciju za svaki slajd, jačinu kôda može biti desetine kilograma.

    Da biste to izbjegli, ali dosljedno animirajte sve tobogane i tipke koristeći jednu animaciju, dovoljan je da se kreće animacije na vrijeme za svaki gumb + gumb +
    .Slider__item: nth-tipa (2), .Slider__broj: nth-tipa (2)\u003e .Slider__broj-nakon (-Moz-animacija-kašnjenje: 5s;--Obkit-animacija-kašnjenje: 5s; -O----------------------------- Animacija: 5s; animacija-kašnjenje: 5S;).).) .Slider__item: nth-tipa (3), .Slider__broj: NTH-Type (3)\u003e .Slider__broj-nakon (-Moz-animacija-kašnjenje: 10S ; -Webkit-animacija-kašnjenje: 10S; -o-animacija-kašnjenje: 10S; animacija-kašnjenje: 10S;) ...) ...) ...) ...) ...
    Za prvi par ostaje zadana vrijednost - nulta pomak.

    Također je važno da pomak ne ovisi o broju dijapozitiva, a može se opisati jednom za njihov maksimalni iznos.

    Kao rezultat toga, glatki animirani tranzicija između slajdova izgleda ovako:


    Pauzirajte kada lebdi kursor
    Za slučaj kada korisnik želi držati klizač na ekranu, ali ne želi isključiti rotaciju, možete koristiti režim pauze za lebdeći prezentaciju:
    .sLider: Hover .Slider__item, .sLider: lebdeći.-a (-Moz-animacija-play stanje: pauzirana; -webkit-animacija-reprodukcija: pauzirana; pauzirana; animacija; animacija; animacija -Play-State: zastaje;)
    Prebacivanje na klik
    Postoji nekoliko CSS "događaja" hTML element. Ako govorimo o kliku miša, onda je to pojavljivanje pseudo klase: fokusirajte :: Cilj ili: provjereno na jednom od elemenata stranice. Pseudo-Class: Fokus ne može biti više od jednog elementa po stranici u trenutku; Pseudo-Class: Ciljana legla povijest pretraživača i zahtijeva prisustvo oznake "A"; Pseudo-klasa: Provjereno pamćenje stanja prije nego što napustite stranicu, plus, u slučaju radio baze, diskretan je prekidač kada se može odabrati samo jedan element određene grupe - što je potrebno.
    .Slider__radio (stilovi nisu odabrani radio docks) .Slider__Radio: provjereno (stilovi odabranih radiokoptera)

    U selektorima ispod nivoa 4 prebacite stanje proizvoljnog elementa (na primjer, neprozirnost klizača) moguća je samo u snopu sa radio gumbom, uz pomoć selektora susjeda + i ~. Možete prebaciti i stilove susjeda i stilova potomka susjeda, ali u svakom slučaju, komšija bi trebao biti nakon radiokoptera.
    / * Stil prvog slajda je "nije odabran" * / .Slider__Radio: nth-of-tipa (1) ~ .Slider__item: nth-tipa (1) (neprozirnost: 0,0;) / * stil Prvi slajd u državi "Odabrani" * / .Slider__radio: nth-tipa (1): provjereno ~ .Slider__item: nth-tipa (1) (neprozirnost: 1.0;)
    Koristi se prebacivanje otpornosti s neprozirnošću, koji sadrži sliku. Ovo je više univerzalni načinnego prebacivanje svojstava slike, jer u kontejnera DIP, za razliku od praznog IMG elementa, može se postaviti bilo koji dodatne informacije (Na primjer, naziv tobogana ili pridruženi opis, uključujući veze).
    Za slajdove, naznačene su svojstva tranzicije koja vam omogućuju prebacivanje između njih.
    .Slider__item (-moz-tranzicija: Opacity 0,2S linearna; Opacitet 0,2s linearna; -o-tranzicija: neprozirnost 0,2s linearna; tranzicija: neprozirnost 0,2s linearna;)

    Zakretanje rotacije kada odaberete klizač
    Kada odaberete korisnik bilo kojeg slajda, morate zaustaviti animaciju svih slajdova i tipki. To je zbog činjenice da su prioritet vrijednosti svojstava pokretanja animacije uvijek iznad svih ostalih vrijednosti istih svojstava (možete prekinuti čak i inline Svojstva sa! Važno je).

    Budući da je animacija, čak i ako je struktura ista, postoji svaki slajd, a potrebno je isključiti animaciju svih slajdova (u suprotnom glatka tranzicija Učestvovat će tri slajdova), svi radio kanali trebaju biti postavljeni prije prvog slajda.
    ...

    ...

    Štaviše, svi tasteri (naljepnice za radio gumb) moraju se grupirati u zasebnu jedinicu i postaviti nakon radio bazena, u protivnom se problemi mogu pojaviti sa univerzalnim pozicioniranjem naljepnica za proizvoljni broj slajdova.

    Zaustavite animaciju svih slajdova i tipki prilikom odabira bilo kojeg slajda postavljen je na sljedeći način:
    .Slider__Radio: provjereno ~ .Slider__Item, .Slider__radio: lista ~ .Slider__Braj-after (neprozirnost: 0,0; -Moz-animacija: nema; -o-animacija: nema; animacija: nema;)

    Klizni brojevi od strane proizvoljnog broja
    Napravite univerzalni klizač pod bilo kojim brojilima nemoguća, jer za svaki broj poduzima vlastiti "snop" CSS-pravila animacije. Svaka takva "hrpa" (ako je opisana) može se povezati putem kliznog jedinice modifikatora:
    .Slider_count_x.
    gde je x broj slajdova.

    Da biste podržali neke stare pretraživače, prvi slajd nije animiran. Iz tog razloga, kontejner prve slike ima neprozirnost uvijek jednak 1,0. Postoji problem: sa glatkim prebacivanjem dva druga tobogana među sobom, prva se pomaknula (ovo može biti roditelj roditelja bloka klizača). Da biste uklonili efekt prijenosa, kašnjenje tranzicije postavljeno je za sve slajdove, osim odabranog; Za odabrani, Z-Indeks je instaliran više od bilo koga drugog:
    .Slider__item (neprozirnost: 1.0; Pozicija: Relativna; Opacity 0,0s linearna 0,2s; -webkit-tranzicija: Opacity 0,0s linearna 0,2s; -o-tranzicija: neprozirnost 0,0s linearna 0,2s; Tranzicija: Proporcija: Proporcija 0,0s linearna 0,2s;) .Slider__Radio: nth-of-tipa (1): provjereno ~ .Slider__item: nth-tipa (1), .Slider__Radio: nth-of-tipa (2): provjereno ~ .Slider__item: Nth-of (2), .Slider__Radio: nth-of-tipa (3): provjereno ~ .Slider__item: nth-tipa (3), .Slider__Radio: nth-of-tipa (4): provjereno ~. Slider__Item: nth-tipa (4), .Slider__Radio: nth-of-tipa (5): provjereno ~ .Slider__item: nth-of-tipa (5) (-moz-tranzicija: neprozirnost 0,2s linearna; -webkit tranzicija : Neprozirnost 0,2s linearna; -o-tranzicija: neprozirnost 0,2s linearna; tranzicija: neprozirnost 0,2s linearna; z-indeks: 6;)
    Dakle, tobogani ne su u sukobu sa drugim elementima stranice (na primjer, nisu preklapali padajući izbornik sa Z-Indexom manjem ili jednakom 6), stvorite svoj kontekst (kontekst slaganja) za vezu koji minimalno je potreban za vidljivost, Z-Index`a:
    .Slider (Z-indeks: 0;)

    tako

    Već danas, bez programskih vještina i specijaliziranih biblioteka, do svoje konačne standardizacije, CSS 3.0 omogućava vam implementaciju složenih i zanimljivih zadataka. Opisani interaktivni klizač, trenutno, u potpunosti je operativan u 80% korisnika runteta. Za većinu preostalog korisnika, naime za korisnike pregledača IE7-9, možete koristiti JS-"utikač", koji provodi glavnu funkcionalnost klizača.

    Može se vidjeti radni primjer

    3. marta 2015. u 18:15

    Zanimljivo i istovremeno jednostavan klizač na Čisti CSS.3

    • Razvoj web stranica,
    • CSS,
    • Html

    Neću otvoriti Ameriku nikome, neću iznenaditi javnost novim fokusom i ne odmori se mozak za one koji plivaju u CSS3 kao akvalant. Ispričat ću vam jednostavan način za stvaranje klizača pomoću jednostavnih CSS3 funkcija bez potrebe za korištenjem JavaScripta.

    1. Kretanje temelja

    Da bismo implementirali klizač, trebat će nam prilično jednostavan skup oznaka, koji će zauzvrat odgovoriti na elemente klizača.


    Ovdje vidimo da cjelokupni blok "omotača" sadrži "klizač" blok sa 5 slajdova, unutar kojih se može postaviti bilo koji HTML kôd koji će se nalaziti na slajdu. Prije zajedničke jedinice postoje radio tipke, koji će naknadno skriveni za stvaranje vlastite pločice za navigaciju s kojima će nam pomoći naljepnicama u bloku kontrola.

    2. Izrađivanje klizača

    Ovdje ćemo zaustaviti i uzeti u obzir malo CSS-a. Imajte na umu da su za neka svojstva prefiksi unakrsnog pregledača pričvršćeni na sve moderni preglednici Mogao ih razumjeti.

    * (Marža: 0; - -webkit-box-dimenzioniranje: bombox; -moz-box-dimenzioniranje: obrub; -o-box-dimenzioniranje: pogranična kutija; bombola; ) Tijelo (pozadina-slika: URL (http://habrastorage.org/files/996/D76/D04/996D76D0410D422FA54CC433CE7AD2A.PNG);)
    Sa dizajnom pozadine i zajedničkim stilovima sve je jasno.

    Omotač (visina: 350px; marža: 100px Auto 0; Pozicija: Relativna; Širina: 700px;). Slider (pozadina: Visina: Skrivena; Pozicija: Intretit; -Werit; -Webkit; -Webkit -Shadow: 0 0 20px rgba (0, 0, 0, .5); -moz-box-sjena: 0 0 20px rgba (0, 0, 0, .5); -O-box-sjena: 0 0 20px Rgba (0, 0, 0, .5); kutija-sjena: 0 0 20px RGBA (0, 0, 0, .5);)
    Zajednička jedinica i blok sa klizačem imaju iste dimenzije da savršeno nadgledaju položaj klizača na stranici. Iako nema slajdova, klizač koji smo privremeno oslikali u svijetlosivoj boji.

    Omotač\u003e ulaz (ekran: nijedan;)
    Radio tipke Sakrijte se. Trebat će nam kasnije.

    Rezultirati ovaj trenutak Takav:

    3. Izrada slajdova

    Ovdje predsjedavamo zajedničkim stilovima za slajdove i svaki slajd odvojeno:

    Slajdovi: apsolutna; širina: nasljeđivanje;) .Slide1 (pozadina-slika: URL (http://habrastorage.org/files/3F2828/BD5/3F2628BD58C8452DB5165CBB0C9BFC9.jpg);) .Slide2 (pozadina -Image: URL (HTTP : //habrastorage.org/files/3e1/95d/c7f/3e195dc7f4a64469807f49a14f9807f49a14f97ba0e.jpg);) .Slide3 (pozadina-slika: URL (http:/files/663/6B1B1D4F8E643D29EAB8C192FC1Cea3.jpg) ;) .Slide4 (pozadina-slika: URL (http://habrastorage.org/files/e59/424/c04/e59424c046be4dab89a.j84ab015c87ea.jpg);) .Slide5 (pozadina-slika: url (http: //habrastorage.org/ datoteke / 53c / ff6 / c1c /.jpg);)
    Za sve slajdove, istakli smo apsolutno pozicioniranje tako da se možete igrati sa efektima izgleda. Dimenzije dijapozitiva uzimaju se iz veličine samog klizača tako da ih ne bi trebalo propisati na nekoliko mjesta.

    4. Napravljamo navigaciju na slajdovima

    Budući da su radio tasteri skriveni i potrebni su nam kao prekidači, izvlačimo pripremljene naljepnice:

    Omot .Controls (Lijevo: 50%; margin-left: -98px; position: absolute;) .wrapper Label (kursora: Pointer; Ekran: inline-block; Visina: 8px; margina: 25px 12px 0 16px; poziciju: relativna; Širina: 8px; -webkit-granični radijus: 50%; -Moz-granični radijus: 50%; -o-granični radijus: 50%; granični radijus: 50%;).). (Granica: 2px solid #ddd; Sadržaj: "" Prikaz: blok; visina: 12px; lijevo: -4px; Pozicija: apsolut; širina: 12px; -webkit-granični radijus: 50%; -Moz-granica - Radijus: 50%; -o-granični radijus: 50%; granični radijus: 50%;)
    Napravimo navigacijsku klasiku. Svako dugme je područje u obliku kruga, unutar kojeg, sa aktivnim klizačem, prazno područje je djelomično obojeno. U međuvremenu, imamo sljedeći rezultat:

    5. Naučimo dugme za klik

    Vrijeme je da naučite klizač za prebacivanje slajdova klikom na određeno dugme:

    Obrazac za omota (pokazivač: Ekran: Inline-Block; Visina: 8px; Marža: 25px 12px 0 16px; Pozicija: Relativna; Širina: 8pk-granični radijus: 50%; -moz-granični radijus: 50%; %; -O-granični radijus: 50%; granični radijus: 50%; -webkit-tranzicija: pozadinski out-out-out .5s; -moz-tranzicija: pozadinsko lakoća .5s; Tranzicija: Pozadinska lakoća .5s; Tranzicija: pozadinska lakoća .5s;).).).).).). HOVER, # slajd1: provjereno ~. Zvučni naljepnica: NTH-of-tipa (1), # slajd2: Provjeri ~. Zvuk (2), # Slide3: Provjereno ~ .Za naljepnica: NTH-Type (3), # Slide4: Provjereno ~. Zvučni naljepnica: NTH-of-Type-a (4) # Slajd5: provjereno ~ .Za naljepnica: nth-of-tipa (5) (pozadina: #ddd;)
    U navigacijskom tipkama dodajte glatko bojenje unutar njih. Takođe dodajte uslove na kojima će aktivno dugme i dugme na kojem se pokazivač ne može obojiti. Naši vlastiti radio tipke su spremni:

    6. Slider inženjering

    Pa, sad to radimo da su to slajdovi konačno prebacili:

    Slajdovi (visina: nasljedstvo; 0; Pozicija: Apsolut; širina: nasljeđivanje; z-indeks: 0; -webkit-transformacija: skala (1,5); -o-transformacija: skala (1,5); transformacija: skala (1.5); -webkit-tranzicija: transformirati out-out-out-out .5s, neprozirnost lakoća .5s; -moz-tranzicija: transformirati out-out-out .5s, neprozirnost -O-tranzicija: transformirati out-out-out .5s, neprozirnost lakoća .5S; Tranzicija: transformirati out-out-out .5s, neprozirnost. ) # Slide1: provjereno ~ .Slider2: provjereno ~ .Slider\u003e ..Slide2, # ..Slider\u003e. Ched ~ .Slider\u003e ..Slide4, # klizač5: provjereno ~ .Slider\u003e .sLide5 (neprozirnost: 1; Z-indeks: 1; -webkit-transformacija: skala (1); -moz-transformacija: skala (1); -o-transformacija: skala (1); transformacija: transformacija: jedan););
    Dodajemo nekretnine u zajedničkim stilovima krastaca, u kojima svi slajdovi postaju nevidljivi i idu u pozadinu. Takođe smo dodali neznatan porast slajdova, dok su oni nevidljivi da bi se u klizaču dali zanimljiv izgled.

    Rezultat se može pogledati ovdje.

    CSS klizači imaju prednost u odnosu na klizače na JavaScript-u. Jedna od tih prednosti je brzina preuzimanja. Ne koriste se samo slike za klizače. velike veličine (Ako ne postoji optimizacija za različite ekrane), to se takođe troši na preuzimanje skripti neko vrijeme. Ali u članku ćete vidjeti samo klizače na čistim CSS-om.

    To sam našao na mjestu na temu klizača:

    1. CSS3 klizače slike

    Klizač na CSS-u koji koristi radio gumb za pomicanje za navigaciju. Ovi radio bazeni su pod klizačima. Takođe, pored radio-bazena, navigacija se vrši pomoću pucača s lijeve i desne strane. Da biste pratili koja se sada prikazuje slika - Pseudo-Škole se koriste: provjereno.

    2. CSS3 klizače slike sa minijaturama

    Za razliku od prošlog klizača na CSS-u, ovdje umjesto radio bazena na dnu nalazi se minimalne slike svih slika, koje su i prikladne prilikom kreiranja galerije slika. Slike se zamjenjuju s vrstom efekta: nesmetano nestaju dok se povećavaju.

    3. Galerija na CSS-u

    Ali ovaj klizač na CSS savršen je za prodaju stranica. U pravilu su mnogi web programeri u razvoju kreditnih stranica (prodaja) stavljaju klizač na samom početku tako da je na prvom ekranu (bez pomicanja) posjetitelj odmah ugledao sve prednosti koje je na ovoj stranici. Pored toga, ovaj klizač je adaptivan, koji takođe zadovoljava.

    4. CSS klizač bez veza

    Odmah želim primijetiti da ovaj klizač ne koristi linkove! Po defaultu, pored glavne slike (klizač), vidljiva je još 2 slajdova. Nalaze se iza glavne. Promjena dijapozitiva događa se u prekrasnom režimu: prvo se dva tobogani pomjeraju, a slajd postaje centar, koji će tada postati glavni. Tada se klizanje povećava i postavlja se ispred ostatka.

    5. Adaptivni klizač na CSS3

    Još jedan adaptivni klizač čija se kontrola temelji na radiokoptrima. Da vidim kako će ovaj klizač pogledati različiti uređajiaH - Možete ili samostalno promijeniti prozor preglednika ili na klizaču na stranici postoje posebne ikone različitih uređaja, klikneći na koji ćete vidjeti, pogledajte klizač na vašem računalu, tabletu ili na pametnom telefonu.

    *** bonus klizač ***

    Pored svih klizača, koji su predstavljeni gore, želim vam ugoditi još jedan. Ovaj klizač je savršen za kreiranje galerije slika. Riječi ne objašnjavaju šta radi, pa je bolje gledati sve na videu:

    1. Odličan jQuery prezentacija

    Veliki spektakularni prezentacija pomoću jQuery tehnologija.

    2. jQuery "Plug" Parusel "

    Skalabilna prezentacija pomoću jQuery. Možete postaviti veličine za prezentacije koje ste najprikladniji.

    3. jQuery utikač "Slidejs"

    Klizač slika sa opis teksta.

    4. Plugin "Jslidernews"

    5. CSS3 jQuery klizač

    Kada pokažete pokazivač na navigacijskom strelicom, pojavljuje se okrugla sličica sljedećeg slajda.

    6. Slatki jQuery klizač "Prezentacijski ciklus"

    jQuery klizač Sa indikatorom za učitavanje slika. Postoji automatska promjena klizanja.

    7. JQuery dodatak "Parallax klizač"

    Klizač sa volumetrijskim pozadinskim efektom. Vrhunac ovog klizača u pozadini pozadine, koji se sastoji od nekoliko slojeva, od kojih se svaka pomakne sa različita brzina. Kao rezultat toga, pokazuje imitaciju surround efekta. Izgleda vrlo lijepo, možete se uvjeriti u to. U takvim preglednicima prikazan je više glatkog efekta kao: Opera, Google chrome., Tj.

    8. Svježi, lagani jQuery klizač "BXSLIDER 3.0"

    Na demonstraciji na demo "primjerima" možete pronaći veze na sve moguće opcije Koristite ovaj dodatak.

    9. jQuery klizač slika, dodatak "slajds"

    Moderan jQuery klizač će sigurno moći ukrasiti vaš projekt.

    10. jQuery dodatak za prezentaciju "Easy Slides" V1.1

    Jednostavan za korištenje jQuery dodatka za kreiranje prezentacije.

    11. Plugin "JQuery Slidy"

    Jednostavan jQuery dodatak u raznom dizajnu. Postoji automatska promjena klizanja.

    12. jQuery CSS galerija sa automatskim promjenama klizanja

    Ako posjetitelj u određenom vremenu ne pritisne strelice "Naprijed" ili "Natrag", Galerija će se automatski početi pomicati.

    13. jQuery klizač "Nivo klizač"

    Vrlo profesionalan visokokvalitetni svjetlosni dodatak sa važeći kod. Postoji mnogo različitih efekata promjene dijapozitiva.

    14. jQuery klizač "Mobilyslider"

    Svježi klizač. jQuery klizač sa različitim efektima promjene slike.

    15. jQuery dodatak "klizač²"

    Jednostavan klizač sa automatskim promjenama klizanja.

    16. Svježi javascript klizač

    Klizač sa automatskim smjenom slike.

    Dodatak za implementaciju prezentacije s automatskim promjenama klizanja. Moguće je upravljati zaslonom koristeći sličice slika.

    jQuery CSS. Klizač slike koristeći Nivoslider dodatak.

    19. jQuery klizač "Jshowoff"

    Dodatak za rotiranje sadržaja. Tri opcije za upotrebu: Bez navigacije (s automatskim pomicanjem u formatu prezentacije), s navigacijom u obliku tipki, s navigacijom u obliku slika.

    20. Portfolio efekte zatvarača

    Svježi jQuery dodatak za fotografski portfelj. Galerija je implementirala zanimljiv učinak promjene slika. Fotografije zamijenite jedni druge efektom sličnim radu zatvarača sočiva.

    21. Easy JavaScript CSS klizač "Tinyslider 2"

    Implementacija klizača slika sa korištenje JavaScripta i CSS.

    22. Vjetar Tinycircleslider klizač

    Moderan okrugli klizač. Prelaz između slika se vrši povlačenjem oko klizača kruga kao crvenog kruga. Odlično se uklapaju u vašu stranicu ako ste u dizajnu, koristite okrugle elemente.

    23. Klizač slika na jQuery

    Jednostavan klizač "Klizni komplet". Klizač je predstavljen u različitim dizajnom: vertikalno i horizontalno. Također implementirao različite vrste navigacije između slika: Korištenje tipki "Naprijed" i "Natrag" pomoću kotača miša pomoću miša kliknite na slajd.

    24. Galerija sa minijaturama "Klizni komplet"

    Galerija "Klizni komplet". Minijaturni za pomicanje vrši se i u vertikalnom i horizontalnom smjeru. Prelaz između slika se vrši pomoću: kotača miša, klikova miša ili minijaturni kursor.

    25. jQuery klizač klizača klizača

    Vertikalni i horizontalni klizač sadržaja na jQueryju.

    26. jQuery prezentacija "Klizni komplet"

    Prezentacija sa automatskim promjenama klizanja.

    27. Jednostavan profesionalni JavaScript CSS3 klizač

    Uredni klizač na jQuery i CSS3, kreiran 2011.

    jQuery prezentacija minijaturama.

    29. Jednostavno prezentacija jQuery

    Prezentacija s navigacijskim tipkama.

    30. Šokirani prezentacija JQuery "Skitter"

    jQuery dodatak "Skitter" za stvaranje zapanjujuće prezentacije. Dodatak podržava 22 (!) Pogled na različite efekte animacije prilikom promjene slika. Može raditi sa dvije navigacijske opcije za slajdove: koristeći dijapozitive brojeve i sa sličicom. Obavezno pogledajte demonstraciju, vrlo kvalitetan nalaz. Rabljene tehnologije: CSS, HTML, jQuery, PHP.

    31. prezentacija "nespretno"

    Funkcionalni prezentacija. U obliku slajdova može izvršiti: jednostavne slike, Slike sa potpisima, slike sa skočnim savjetima, video snimci. Možete koristiti strelice, veze za klizanje brojeva i tipki s desne / lijevo na tipkovnici za navigaciju. Projekcija se vrši u nekoliko verzija: sa sličicama i bez njih. Da biste pogledali sve opcije, prošetajte linkovima Demo # 1 - DEMO # 6 Smješten na vrhu na demo stranici.

    Vrlo originalno dizajnerske klizačke slike nalikuju ventilatoru. Animirana premještanja klizanja. Navigacija između slika vrši se pomoću strelica. Također pruža automatski pomak koji se može uključiti i isključiti pomoću gumba za reprodukciju / pauzu koja se nalazi na vrhu.

    Animirani jQuery klizač. Pozadinske slike automatski se skaliraju kada se promjene prozora pregledača. Za svaku sliku lebdi blok sa opisom.

    34. Klizač "Flux klizač" na jQuery i CSS3

    Novi jQuery klizač. Nekoliko cool animiranih efekata prilikom promjene dijapozitiva.

    35. jQuery "Jwitch" dodatak

    Animirana jQuery galerija.

    Slaba prezentacija na jQuery s automatskim promjenama klizača.

    37. Nova verzija dodatka "Slidedeck 1.2.2"

    Klizač profesionalnog sadržaja. Opcije su moguće sa automatskim premještanjem, kao i opcijom pomoću kotača miša za prijelaz između slajdova.

    38. jQuery klizač "sudo klizač"

    Jednostavna kleveta na jquery. Vrlo mnogo opcija implementacije: vodoravna i vertikalna promjena slika, s vezama do dijapozitivnog broja i bez njih, sa potpisima slika i bez, različitih efekata promjene slike. Postoji funkcija automatske promjene klizanja. Veze za svu uzornu implementaciju mogu se naći na demo stranici.

    39. jQuery CSS3 prezentacija

    Prezentacija s minijaturama podržava način automatskog smjene klizanja.

    40. jQuery "Flux klizač"

    Klizač sa više efekata promjene slike.

    41. Jednostavan jQuery klizač

    Moderan klizač slike na jQueryju.

    Želim da kažem jednostavan način za stvaranje klizača, bez upotrebe JS, uz pomoć CSS animacije.

    1) Za početak, napisat ćete HTML, pretpostavit ćete da će se 4 slika biti zamijenjene u klizaču.


    2) Zatim postavljamo veličinu bloka, a još nekoliko postavki, položaj: relativno je neophodno kako bi se stvorio kontekst formatiranja, a zatim bit će jasno zašto.

    Klizač (širina: 500px; visina: 300px; margina: auto; margin-top: 25px; granica: 1px čvrsta crna; položaj: relativna; sakrivena;)
    3) Također definiramo neke nekretnine za same slajdove:

    Klizanje (širina: 500px; visina: 300px; Pozicija: apsolut; vrh: 0; lijevo: 0;)
    Kao što se može vidjeti iz CSS-a, stavljamo sve tobogane u gornji lijevi ugao klizača, navodeći istu poziciju izvora.

    1. Klizač je na izvornom položaju, demonstrira korisnik.

    2. Pomicanje se pomiče ulijevo dok se ne ispadne potpuno u inostranstvu klizač (klizač je također naveden gore, preliv: Skriveni, respektivno, klizanje se ne pokreće u okolne objekte).

    5. Klizač spušta se niz jedan nivo sa klizačem

    6. Pomičite se pomičite na početni položaj
    Drugim riječima (snimke za sada, prema brojevima sa liste iznad):

    @Kekeframes slajd (od (top: 0; lijevo: 0;) 1 (Transform: prevedi (0px, 0px);) 2 (transformacija: prevesti (-500px, 0);) 3 (transformacija: prevesti (-500px, 300px );) 4 (Transformacija: prevesti (500px, 300px);) 5 (transformacija: prevesti (500px, 0);) do (transformacija: (0px, 0px);))
    5) Dakle, postalo je jasno kako izgleda put klizača. Svaki klizač "krugovi" oko njenog spremnika je klizač - i vraća se na original. Dakle, možemo beskonačno uviti bilo koji broj slajdova. Ali jedna nijansa je ostala, što je najvažnije u ovoj shemi - vrijeme. Potrebno je ispravno izračunati pripovijedanje animacije na vrijeme i postaviti ispravno kašnjenje za svaki klizanje tako da ne bude sve istovremeno animiran. Da bismo shvatili kako pravilno odrediti odgodu i izračunati vrijeme animacije, otišao sam u nastavku.

    Uzmimo oznake koraka iz prethodne točke i shvatit ćemo što se događa u svakom koraku. U suštini, koraci broj 1, 2 i 6 su oni koraci u kojima klizanje dolazi u vidljivo područje. Od činjenice da bi se klizni tobogani trebali kretati neraskidivo i, kao što je bilo, gurnite jedni druge od klizača, može se zaključiti da bi trajanje koraka 2 i 6 trebalo biti jednako. Odmah rezervirajte da sam uspio uspješno raditi ovaj dizajn samo uz uvjet da je trajanje prvog koraka jednak trajanju 2. i 6.. Ono što se događa tokom koraka od 3,4, a 5 su u osnovi tehničke potrebe i za jednostavnost, ujedinimo ova tri koraka u 1.

    Nakon pojednostavljenja imamo:

    1. Korak - klizač se pokazuje na izvoru
    2. Korak - klizač se prebacuje udesno
    3. Korak - klizač pravi tehničke pokrete
    4. Korak - klizač se smjene ulijevo, vraćajući se na početni položaj

    Da biste osigurali incident sa slajdovima, u trenutku kada klizanje započne korak 2, sljedeći slajd mora započeti korak 4.

    Ako je vrijeme, krug svih animacija je t;
    Broj slajdova - n;
    Trajanje 3 koraka - y;
    Trajanje koraka je 1,2 i 4 - x;
    Korak odgoja animacije za N-Slide - Z;
    Zatim:

    Y \u003d (100 * n - 150) / n;
    x \u003d (100 - y) / 3;
    x i y moraju biti prevedeni u kamate, a zatim:
    z \u003d 2 * x * t;

    Za slučaj kada n \u003d 4, kao u gornjem primjeru, dobivamo:

    3. nagib - 62,5%, 1, 2 i 4 - 12,5%. Korak odgoja animacije za svaki naredni klizanje - 25%.

    Koji će intervali biti između faza unutar trećeg koraka - to nije važno.

    6) Sada kada smo svi računali i znali da se sve vrijednosti mogu dati završni kod.

    Animacija:

    @Kekeframes slajd (od (top: 0; lijevo: 0;) 12,5% (transformacija: prevesti (0px, 0px);) 25% (transformacija: prevesti (-500px, 0);) 36% (transformacija: prevesti (- 500px, 300px);) 37% (Transformacija: prevođenje (500px, 300px);) 87,5% (Transformacija: prevedi (500px, 0);) do (0px, 0px);))
    Slajdovi:

    Slajd1 (pozadina: URL (1.jpg); animacija-kašnjenje: 7,5s;) .Slide2 (Pozadina: URL (2.jpg); animacija-kašnjenje: 5s;).); URL (3.jpg); Animacija-kašnjenje: 2,5s;) .Slide4 (Pozadina: URL (4.jpg); animacija-kašnjenje: 0s;)
    Opći CSS za sve slajdove:

    Klizanje (širina: 500px; visina: 300px; Pozicija: Apsolut; Top: 0; lijevo: 0; naziv animacije: 10S; animacija-vremenski funkcija: linearna; beskonačan; )
    Evo, u stvari, sve! Zahvaljujući svima koji su pročitali do kraja.

    Slični članci