Html.

S vývojem CSS3 rostou uspořádání exponenciálně. Více a více funkční lze implementovat na "čisté" CSS. Tento příspěvek ukazuje vývojový proces. interaktivní Cyklický posuvník bez jediného řádku JavaScript. Automatický otáčení, výběr libovolného snímku s hladkým přechodem - na "čisté" css. Příklad v akci

Obecná informace.

Normy a předpony

Vlastnosti Přechod, animace a transformace byly dlouhodobě implementovány v jednom nebo jiném, implementovaném ve všech populárních prohlížečích. 6. června 2012, W3C oznámila, že tato část rozvinutého standardu CSS 3.0 by se dramaticky nezměnila a doporučila se implementovat na všechny prohlížeče dnes.

Pro vývojáře front-end to znamená vzhled standardu, ke kterému se můžete spolehnout. Nyní není nutné se bát, že v budoucnu bude každý prohlížeč odmítnout jeho prefix nestandardní vlastnosti - protože bude duplikován standardní vlastností a v případě potřeby jej vyměňte.

Zastaralý internetová verze Explorer, který bude brzy přičítán i 9. verzi, nepodporuje přechod, animaci a transformovat žádným způsobem. Jejich podíl je však stále přesahující 10%. IE7-9 je nabízen JS- "Plug" a účinek hladkého přepínání mezi skluzavkami není nic.

Proč CSS, ne js?

Existuje mnoho úkolů, které lze vyřešit, když cSS HELP.: Interaktivní galerie, multi-level rozbalovací nabídky, budova a animace trojrozměrných diagramů ... Proč používat CSS, když můžete udělat vše na JS, zejména s ohledem na masu hotového vývoje? Hlavní argumenty mohou být takové:

• Většinou, Účinky CSS. Práce rychleji, protože následují jejich prohlížeče výhradně. To je obzvláště dobře znatelné na mobilních zařízeních.
• Chcete-li úkol implementovat, nepotřebujete znalosti JS a obecně všechny programovací jazyky. Upravit CSS, zpravidla je také k dispozici pro běžný uživatel. A "okouzlující palivové dříví" v CSS je mnohem složitější než v JS.

Odbyt

Bem

Takže metodika modifikátor bloku prvku (BEM) byl použit k pojmenování tříd CSS. Dolní řádek je, že rozložení je založeno na rozložení stránky z nezávislých bloků. Podle Bem, blok může mít prvky, ale pouze uvnitř bloku.

Sliderové kurzy:
.slider / * blok obsahující obrazovou pásku * / .Slider__radio / * rádiový bod * / .slider__item / * Slide * / .slider__img / * Obrázek uvnitř snímku * / .Slider__Number-list / * kontejner s přepínacími tlačítky * / .Slider__Number / * Začlenění tlačítko přidruženého snímku * / .Slider__Number-po / * je vloženo na podporu IE7 a IE8, které nepodporují pseudo-prvky: po a :: po, resp. * / .Slider_count_x / * modifikátor definující počet diapozitivy x * /

Animace

Sekvence animace pro klíčové personál pro tři snímky vypadá takto:
@Keyframes slider__Item-autoplay_count_3 (0% (opacita: 0;) 10% (opacita: 1;) 33% (opacita: 1;) 43% (opacita: 0;) 100% (opacita: 0;) 100% (opacita: 0;))
Funkce implementace posuvníku je, že všechny diapozitivy a všechna tlačítka jsou přiřazena stejná animace:
Slider_count_3 .Slider__item, slider_count_3 .Slider__Number-po (-moz-animaci: slider__Item-autoplay_count_3 15s Infinite; -webkit-animace: slider__Item-autoplay_count_3 15s Infinite; -o-animace: slider__Im-autoplay_count_3 15s Infinite; animace: slider__Item-autoplay_count_3 15s nekonečný ;)
Tento přístup vám umožňuje vážně snížit množství kódu, protože všechny animace je stále musí duplikovat je s verzemi prefixu (@ -webkit-keyframes, @ -moz-keyframes a @ -o-keyframes) a každý takový "zásobník" Pravidla musí být popsána samostatně pro každý počet požadovaných snímků (zákazníkem). Pokud také samostatně popisují animaci pro každý snímek, objem kódu může být desítky kilobajtů.

Aby se tomu zabránilo, ale důsledně animovat všechny snímky a tlačítka pomocí jedné animace, stačí nastavit začátek animace v čase pro každý párový snímek +
.SLIDER__ITEM: nt-of-type (2), .Slider__Number: ntt-of-type (2)\u003e .slider__number-po (-Moz-animaci-zpoždění: 5s; -Owbkit-animace-zpoždění: 5s; -O- Zpoždění animace: 5s; Animace-zpoždění: 5s;) .Slider__item: NT-typ-typu (3), .Slider__Number: NTH-typ-typu (3)\u003e .Slider__Number-po (-Moz-animaci-zpoždění: 10s ; -Webkit-animace-zpoždění: 10s; -o-animace-zpoždění: 10s; Animace-zpoždění: 10s;) ...
Pro první pár zůstává výchozí hodnota - nulový posun.

Je také důležité, aby offset nezávisí na počtu diapozitivů, a může být popsán jednou pro jejich maximální množství.

Výsledkem je, že hladký animovaný přechod mezi diapozitivem vypadá takto:

Pauza, když se vznáší kurzor

Pro případ chce uživatel držet snímek na obrazovce, ale nechce otáčení vypnout, můžete použít režim pauzy pro vznášení přes snímek:
.SLIDER: vznášet. -Play-State: pozastaven;)

Přepnutí na Click.

Existuje řada CSS "událostí" přepínání hTML Element.. Pokud hovoříme o kliknutí myši, pak se jedná o vzhled pseudo-třídy: zaměření: Cíl, nebo: zkontrolován na jednom z prvků stránky. Pseudo-Class: Zaostření může být více než jeden prvek na stránku najednou; Pseudo-Class: Cílové vrhy Historie prohlížeče a vyžaduje přítomnost značky "A"; Pseudo-Class: Checked si pamatuje podmínku před opuštěním stránky, plus, v případě rozhlasových bazénů je diskrétní spínač, když může být vybrán pouze jeden prvek určité skupiny - co je potřeba.
.SLIDER__RADIO (Styly, které nejsou vybrány rozhlasové doky) .slider__radio: zaškrtnuté (styly vybraných radiokopérů)

V selektoři pod úrovní 4, přepněte stav libovolného prvku (například opacita skluzavky) je možné pouze ve svazku s rádiovým tlačítkem, s pomocí selektorů sousedů + a ~. Můžete přepnout styly souseda a styly potomků souseda, ale v každém případě by měl být soused po radiokopérech.
/ * Styl prvního snímku je "není vybrán" * / .SLIDER__RADIO: ntt-typu (1) ~ .slider__item: ntt-of-type (1) (opacity: 0,0;) / * styl První snímek ve stavu "Vybrané" * / .SLIDER__RADIO: ntt-of-type (1): zkontrolováno ~ .slider__Item: ntt-of-type (1) (opacita: 1.0;)
Používá se spínací sklíčko opacity, který obsahuje obrázek. To je více univerzální cestanež přepínání vlastností obrazu, protože v nádobě DIV, na rozdíl od prázdného prvku IMG, může být umístěn libovolné dodatečné informace (Například název snímku nebo související popis, včetně odkazů).
Pro diapozitivy jsou uvedeny vlastnosti přechodu, které umožňují přepínat mezi nimi.
.SLIDER__ITEM (-Moz-přechod: Opacity 0.2s lineární; -webkit-přechod: Opacita 0,2s lineární; -o-přechod: Opacity 0,2s lineární; přechod: Opacity 0,2s lineární;)

Zastavení otáčení při výběru snímku

Když vyberete uživatele jakéhokoliv snímku, musíte zastavit animaci všech snímků a tlačítek. Důvodem je skutečnost, že priorita hodnot vlastností běžící animace jsou vždy především nad všemi dalšími hodnotami stejných vlastností (můžete přerušit i inline vlastnosti s! Důležité `om).

Vzhledem k tomu, že animace, i když je struktura stejná, je zde každý sklíčko a je nutné vypnout animaci všech snímků (jinak hladký přechod Zúčastní se tři diapozitivy), všechny rádiové kanály by měly být umístěny před prvním snímkem.
...

Kromě toho, všechna tlačítka (rádiové štítky) musí být seskupeny do samostatné jednotky a umístěny po rozhlasových bazénech, jinak mohou nastat problémy s univerzálním umístěním štítků pro libovolný počet snímků.

Zastavte animaci všech snímků a tlačítek při výběru libovolného snímku je nastaveno následovně:
.SLIDER__RADIO: Zaškrtnuta ~ .slider__item, žádný;)

Sklouznutí libovolného čísla

Udělejte univerzální jezdec pod libovolným počtem snímků je nemožné, protože pro každé číslo je to vlastní "zásobník" CSS-Pravidla animace. Každý takový "zásobník" (pokud je popsáno) může být připojen přes modifikátor posuvníku:
.slider_count_x.
kde X je počet snímků.

Podporovat některé staré prohlížeče, první snímek není animován. Z tohoto důvodu má kontejner prvního obrazu opacita vždy rovná 1,0. Existuje problém: s hladkým přepínáním dvou dalších diapozitivů mezi sebou, první je posunut (to může být rodič rodiče posuvníku). Chcete-li odstranit přenosový efekt, je zpoždění zpoždění přechodu pro všechny snímky, s výjimkou vybraného; Pro vybrané, Z-index je instalován více než kdokoliv jiný:
.SLIDER__ITEM (Opacity: 1.0; Pozice: Relativní; -moz-přechod: Opacity 0,0s lineární 0,2s; 0,0s lineární 0,2s;) .slider__radio: ntt-of-typu (1): zkontrolováno ~ .slider__Item: ntt-of-typu (1), .Slider__radio: NTT-typu (2), Slider__Item: NTT-typ typu (4), : Opacity 0,2s lineární; -o-přechod: Opacity 0,2s lineární; přechod: Opacity 0,2s lineární; Z-index: 6;)
Takže snímky nejsou v rozporu s jinými prvky webu (například nepřekrýval rozevírací nabídku s Z-indexem menší nebo rovnou 6), vytvořte svůj vlastní kontext (stohování kontext) pro blokovací blok je minimálně nezbytná pro viditelnost, Z-index`a:
.slider (Z-index: 0;)

tak

Už dnes, bez programovacích dovedností a specializovaných knihoven, CSS 3.0 vám umožní provádět komplexní a zajímavé úkoly. Popsaný interaktivní posuvník, v současné době je plně funkční u 80% uživatelů runetu. Pro většinu zbývajících uživatelů, a to pro uživatele prohlížečů IE7-9, můžete použít JS- "Plug", což implementuje hlavní funkčnost jezdce.

Pracovní příklad lze vidět

3. března 2015 v 18:15

Zajímavé a zároveň jednoduchý posuvník Čisté CSS.3

• Vývoj webových stránek,
• CSS,
• Html.

Nebudu otevřít Ameriku nikomu, nebudu překvapit veřejnost s novým zaměřením a nervícka mozku pro ty, kteří plavou v CSS3 jako Aqualant. Řeknu vám jednoduchý způsob, jak vytvořit jezdec pomocí jednoduchých funkcí CSS3 bez nutnosti použití Javascript.

1. Pohyb nadace

Pro implementaci jezdce budeme potřebovat poměrně jednoduchý soubor značek, které budou zase reagovat na prvky jezdce.

Zde vidíme, že celkový blok "wrapper" obsahuje blok "posuvník" s 5 diapozitivy, uvnitř, který lze umístit libovolný html kód, který bude umístěn na snímku. Před společnou jednotkou existují rádiová tlačítka, která budou následně skryta vytvářet své vlastní diapozitivy navigačního panelu, se kterým nám štítky v bloku ovládacích prvků pomohou.

2. Vyvolávání jezdce

Zastavíme se a zvažujeme malé CSS. Vezměte prosím na vědomí, že pro některé vlastnosti jsou přednastaveny prefixy křížového prohlížeče na všechny moderní prohlížeče Porozumět jim.

* (Marže: 0; polstrování: 0; -webkit-box-dimenzování: hraniční schránka; -moz-box-dimenzování: hraniční box; -o-box-velikost: hraniční box; box-dimenzování: hraniční box; ) Tělo (obrázek pozadí: URL (http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7EAD2A.png););)
S návrhem pozadí a sdílených stylů je vše jasné.

Wrapper (výška: 350px; marže: 100px auto 0; poloha: relativní; šířka: 700px;) .slider (barva pozadí: #ddd; výška: dědictví; přetečení: skryté; pozice: relativní; šířka: dědic; -webkit box -Shadow: 0 0 20px RGBA (0, 0, 0, .5); -Moz-Box-Shadow: 0 0 20px RGBA (0, 0, 0, .5); -O-Box-Shadow: 0 0 20px RGBA (0, 0, 0, .5); Box-Shadow: 0 0 20px RGBA (0, 0, 0, .5););
Společná jednotka a blok s posuvníkem mají stejné rozměry pro dokonale monitorovat polohu posuvníku na stránce. Zatímco tam nejsou žádné skluzavky, posuvník jsme dočasně namalováni ve světle šedé barvě.

Wrapper\u003e vstup (zobrazení: žádný;)
Rádiová tlačítka Skrýt. Budeme je později potřebovat.

Výsledek tento moment takový:

3. Dělat snímky

Zde předkládáme společné styly pro diapozitivy a každý snímek odděleně:

Snímky: Absolutní; šířka: dědic;) .Slide1 (pozadí obrázku: URL (http://habrastorage.org/files/3f2/628/bd5/3F2628BD58C8452db516195C0C9BFC9.jpg);) .Slide2 (pozadí -Image: URL (http : //habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f9807f49a14f97ba0e.jpg)) .slide3 (background-image: URL (http://habrastorage.org/files/663/6b1/ D4F /.jpg) ;) .Z Soubory / 53C / FF6 / C1C / 53CFF6C1CAF842368C70B8EF892D8402.jpg););)
Pro všechny skluzavky jsme poukázali na absolutní polohování, takže můžete hrát s účinky vzhledu. Rozměry snímků jsou odebrány z velikosti jezdce samotné tak, aby neměly být předepsány na několik míst.

4. Provádíme navigaci na diapozitivech

Vzhledem k tomu, že rádiová tlačítka jsou skrytá a potřebujeme jako přepínače, vypracujeme připravené etikety:

Wrapper .Controls (vlevo: 50%; marže vlevo: -98px; poloha: absolutní;) .wrapper štítek (kurzor: ukazatel; zobrazení: inline-blok; výška: 8px; marže: 25px 12px 0 16px; pozice: relativní; Šířka: 8px; -webkit-border-poloměr: 50%; -Moz-hraniční poloměr: 50%; -O-border-poloměr: 50%; okruh hranice: 50%;) ..wrapper štítek: po (hranice: 2PX Solid #ddd; Obsah: "" Displej: blok; výška: 12px; vlevo: -4px; poloha: absolutní; nahoru: -4px; šířka: 12px; -webkit-border-poloměr: 50%; -moz-hranice - Poloměr: 50%; -o-border-poloměr: 50%; okruh hranice: 50%;)
Děláme navigační klasiku. Každé tlačítko je oblast ve tvaru kruhu, uvnitř které s aktivním sklíčkem je částečně natřena prázdná oblast. Mezitím máme následující výsledek:

5. Naučíme tlačítko kliknout

Je čas učit jezdec přepnout snímky kliknutím na konkrétní tlačítko:

Wrapper Label (kurzor: ukazatel; zobrazení: inline-blok; výška: 8px; okraj: 25px 12px 0 16px; poloha: relativní; šířka: 8px; -webkit-border-poloměr: 50%; -Moz-hraniční okruh: 50% %; -O-Border-poloměr: 50%; okruh hranice: 50%; Přechod: Snadná situace .5s; Přechod: Pozadí Snadné vstupy .5S;). Checked ~ .Controls Štítek: NTT-typu (2), # Slide3: Zkontrolováno ~ .Controls Štítek: NT-typu (3), # Slide4: Zkontrolováno ~ .Controls Štítek: NTT-typ-typu (4) # Slide5: Checked ~ .controls Štítek: NTT-typu (5) (pozadí: #ddd;)
V navigačních tlačítkách přidejte hladké barvení v nich. Také přidávejte podmínky, při které aktivním tlačítkem a tlačítko, na kterém bude kurzor bezproblémově zbarven. Naše vlastní rádiová tlačítka jsou připravena:

6. Engineering Slider.

No, teď tak učiníme, že skluzavky konečně přepnuto:

Snímky (výška: dědic; opacity: 0; poloha: absolutní; šířka: dědictví; z-index: 0; -webkit-transformace: měřítko (1,5); -Moz-transformace: měřítko (1,5); -o-transformace: měřítko (1.5); transformace: měřítko (1,5); -webkit-přechod: transformovat snadnost-in-out .5s, opacity uvolnění .5s; -Moz-přechod: transformovat snadnost-in-out .5s, uvolnění opacity -In-out .5s; -o-přechod: transformovat snadnost-in-out .5s, opacity uvolnění-in-out .5s; přechod: transformovat snadnost-in-out .5s, uvolnění opacity uvolnění .5s ;5s ;5s ;5s; ) # Slide1: Checked ~ .slider\u003e .slide1, # Slide2: Zkontrolováno ~ .slider\u003e .slide2, # Slide3: Zkontrolováno ~ .slider\u003e .slide3, # Slide4: Zkontrolováno ~ .Slider\u003e .slide4, # Slide5: Zkontrolováno ~ .slider\u003e .slide5 (opacita: 1; z-index: 1; -webkit-transformace: měřítko (1); -Moz-transformace: měřítko (1); -O-transformace: měřítko (1); transformace: měřítko (1); jeden); )
Přidáváme vlastnosti ve společných slidech stylů, ve kterých se všechny diapozitivy stanou neviditelnými a jdou na pozadí. Také jsme přidali mírný nárůst skluzavek, zatímco oni jsou neviditelné, aby se ve jezdci zajímavá.

Výsledek lze prohlížet zde.

Posuvníky CSS mají nějakou výhodu přes posuvníky na JavaScriptu. Jedním z těchto výhod je rychlost stahování. Nejen, že jsou použity snímky pro posuvníky. velké velikosti (Pokud neexistuje žádná optimalizace pro různé obrazovky), je také vynaloženo na stahování skriptů po určitou dobu. Ale v článku uvidíte pouze posuvníky na čistých CSS.

To je to, co jsem našel na místě na téma posuvníků:

1. Slider CSS3

Posuvník na CSS, který používá k navigaci. Tyto rozhlasové bazény jsou pod posuvníky. Kromě rozhlasových bazénů se také navigace provádí pomocí střelce vlevo a vpravo. Chcete-li sledovat, jaký obrázek je nyní zobrazen - používají se pseudo-školy: zkontrolováno.

2. Slider CSS3 Snímky s miniatury

Na rozdíl od posledního posuvníku na CSS, místo rádiových bazénů v dolní části jsou miniatury všech snímků, které jsou také vhodné při vytváření galerie obrázků. Snímky jsou nahrazeny druhem účinku: hladce zmizí při zvyšování.

3. Galerie na CSS

Tento posuvník na CSS je však ideální pro prodej stránek. Zpravidla mnoho webových vývojářů ve vývoji půjček (prodejních stránek) umístí posuvník na samém začátku tak, že na první obrazovce (bez rolování), návštěvník okamžitě viděl všechny výhody, které je na této stránce. Kromě toho je tento posuvník adaptivní, což také potěší.

4. Slider CSS bez odkazů

Ihned chci všimnout, že tento jezdec nepoužívá odkazy! Ve výchozím nastavení, kromě hlavního obrazu (snímek), 2 další diapozitivy jsou viditelné. Jsou umístěny za hlavní. Změna diapozitivů dochází v krásném režimu: Nejprve se oba snímky pohybují a skluz se stává středem, které se pak stane hlavním. Potom se snímek zvyšuje a umístí před ostatními.

5. Adaptivní jezdec na CSS3

Další adaptivní jezdec, jehož kontrola je založena na radiokopérech. Chcete-li zjistit, jak se tento jezdec podívat různá zařízeníaH - Můžete buď nezávisle změnit okno prohlížeče nebo na posuvní stránce existují speciální ikony různých zařízení, kliknutím na které uvidíte, bude vypadat posuvník v počítači, tabletu nebo na smartphonu.

*** BONUS SIDER ***

Kromě všech posuvníků, které jsou uvedeny výše, chci vás potěšit jinou. Tento posuvník je ideální pro vytváření obrazové galerie. Slova nevysvětlují, co dělá, takže je lepší sledovat všechno na videu:

1. Vynikající JQuery Slideshow

Velký velkolepý prezentace pomocí technologií JQuery.

2. JQuery "měřítko karusel" plugin

Škálovatelné slideshow pomocí jQuery. Můžete nastavit velikosti pro prezentace, které jste nejvhodnější.

3. JQuery Plug "SlideJs"

Posuvník obrázků s popisem textu.

4. Plugin "Jslidernews"

5. CSS3 JQuery jezdec

Když se dostanete kurzor na navigační šipky, objeví se kulatá miniatura následujícího snímku.

6. Roztomilý jquery jezdec "prezentační cyklus"

jquery jezdec S ukazatelem načítání obrazu. Existuje automatická změna snímku.

7. JQuery plugin "Paralax Slider"

Posuvník s volumetrickým efektem efektu. Vrcholem tohoto jezdce v pozadí pozadí, který se skládá z několika vrstev, z nichž každá je rolována různá rychlost. V důsledku toho ukazuje imitaci prostorového efektu. Vypadá to velmi krásně, můžete se o tom ujistit. V takových prohlížečích se zobrazí hladce efektu jako: Opera, Google Chrome., TJ.

8. Čerstvé, lehké jQuery jezdec "BXSLIDER 3.0"

Na stránce Demo v sekci "Příklady" naleznete odkazy na všechny možnosti možností Tento plugin použijte.

9. JQuery jezdec obrázků, plugin "Slidejs"

Stylový jquery jezdec jistě bude schopen ozdobit váš projekt.

10. JQuery Plugin Slideshow "Easy Slides" v1.1

Snadné použití JQuery plugin pro vytvoření prezentace.

11. plugin "jquery slidy"

Easy JQuery plugin v různých provedeních. Existuje automatická změna snímku.

12. JQuery CSS Galerie s automatickou změnou snímku

Pokud návštěvník během určité doby nestiskneš "vpřed" nebo "Zpět" šipky, galerie se automaticky spustí.

13. JQuery jezdec "nevo jezdec"

Velmi profesionální vysoce kvalitní světelný plugin s platný kód. Existuje mnoho různých účinků změny skluzavek.

14. JQuery jezdec "mobilyslider"

Čerstvý jezdec. JQuery jezdec s různými účinky změny obrazu.

15. JQuery plugin "Slider²"

Snadný posuvník s automatickou změnou snímku.

16. Čerstvý JavaScript jezdec

Posuvník s automatickým posunem obrazu.

Plugin pro implementaci prezentace s automatickou změnou snímku. Je možné spravovat displej pomocí miniatur obrázků.

jquery css. Snímek snímku pomocí pluginu Nivoslider.

19. JQuery jezdec "jšiwoff"

Plugin k otáčení obsahu. Tři možnosti pro použití: Bez navigace (s automatickým posunem ve formátu prezentace), s navigací ve formě tlačítek, s navigací ve formě obrázků.

20. Portfolio závěrky Portfolio

Fresh Jquery plugin pro portfolio fotografa. Galerie realizovala zajímavý efekt změn obrazu. Fotografie se navzájem nahradit s účinkem podobným pracím uzávěru objektivu.

21. Snadný JavaScript CSS jezdec "Tinyslider 2"

Implementace posuvníku obrázků s použití JavaScript. a CSS.

22. Vítr jezdce tinycircleslider

Stylový kulatý posuvník. Přechod mezi obrazy se provádí tažením kolem kluzného posuvníku jako červeného kruhu. Skvělé fit do vašich stránek, pokud jste v návrhu používat kulaté prvky.

23. Posuvník obrázků na jQuery

Snadný posuvník "Posuvník". Posuvník je reprezentován v různých provedeních: vertikální a horizontální. Realizoval také různé typy navigace mezi obrázky: pomocí tlačítek "vpřed" a "Zpět" pomocí kolečka myši pomocí kliknutí myši na snímek.

24. Galerie s miniatury "Posuvník"

Galerie "Posuvník". Scroll Miniature se provádí jak ve vertikálním i horizontálním směru. Přechod mezi obrazy se provádí pomocí: kolečka myši, kliknutí myší nebo miniaturní kurzor.

25. JQuery Slider Kit Slider

Vertikální a horizontální jezdec obsahu na jQuery.

26. JQuery Prezentace "Slider Kit"

Slideshow s automatickou změnou snímku.

27. Snadný profesionální JavaScript CSS3 jezdec

Úhledný posuvník na jQuery a CSS3, vytvořený v roce 2011.

jQuery Slideshow s miniatury.

29. Jednoduchý jQuery Slideshow

Slideshow s navigačními tlačítky.

30. Šokovaný slideshow jquery "Skitter"

jQuery plugin "Skitter" vytvořit ohromující prezentaci. Plugin podporuje 22 (!) Zobrazení různých animačních efektů při změně snímků. To může pracovat se dvěma možnostmi navigace pro snímky: pomocí čísel snímků a miniatury. Nezapomeňte se podívat na demonstraci, velmi kvalitní nález. Použité technologie: CSS, HTML, JQuery, PHP.

31. Slideshow "trapné"

Funkční slideshow. Ve formě diapozitivů lze provést: jednoduché obrázky, Snímky s podpisy, obrázky s pop-up tipy, videoklipy. Můžete použít šipky, odkazy na posunutí čísla a tlačítek doprava / vlevo na klávesnici pro navigaci. Slideshow je vyrobena v několika verzích: s miniatury a bez nich. Chcete-li zobrazit všechny možnosti, procházejte podél odkazů Demo # 1 - Demo # 6 se nachází nahoře na stránce Demo.

Velmi originální designové posuvníky, připomínající ventilátor. Animovaná změna snímku. Navigace mezi obrázky se provádí pomocí šipek. Poskytuje také automatický posun, který lze zapnout a vypnout pomocí tlačítka PLAY / PAUSE umístěném nahoře.

Animovaný jquery jezdec. Snímky na pozadí se automaticky mění při změně okna prohlížeče. Pro každý obraz se vznáší blok s popisem.

34. "posuvník toku" jezdec na jQuery a css3

Nový jquery jezdec. Několik chladných animovaných efektů při změně snímků.

35. JQuery "JSwitch" plugin

Animovaná jquery galerie.

Light Slideshow na jQuery s automatickou změnou snímku.

37. Nová verze pluginu "Slidedeck 1.2.2"

Profesionální jezdec obsahu. Možnosti jsou možné s automatickým posuvným posunem, stejně jako volbou pomocí kolečka myši pro přechod mezi snímky.

38. JQuery jezdec "Sudo jezdec"

Snadný obraz pomluvy na jquery. Velmi mnoho možností implementace: horizontální a vertikální změna obrázků, s odkazy na posuvné číslo a bez nich, s podpisy snímků a bez, různé efekty změny obrazu. Existuje funkce automatické změny snímku. Odkazy na všechny příkladné implementace naleznete na stránce Demo.

39. JQuery CSS3 Slideshow

Slideshow s miniatury podporuje režim automatického posunu posunu.

40. JQuery "Flux jezdec"

Posuvník s více efekty změny obrazu.

41. Jednoduchý jquery jezdec

Stylový jezdec obrazu na jquery.

Chci říct jednoduchý způsob, jak vytvořit jezdec, bez použití JS, s pomocí CSS animace.

1) Chcete-li začít, budete psát HTML, předpokládejme, že 4 snímky budou nahrazeny v jezdci.

2) Dále umístíme velikost bloku a několik dalších nastavení, pozice: Příbuzný je nutný, aby se vytvořil kontext formátování, pak bude jasné, proč.

Posuvník (šířka: 500px; výška: 300px; marže: auto; okraj-top: 25px; hranice: 1px pevná černá; poloha: relativní; přetečení: skryté;)
3) Definujeme také některé vlastnosti pro samotné skluzavky:

Slide (šířka: 500px; výška: 300px; poloha: absolutní; top: 0; vlevo: 0;)
Jak je vidět z CSS, umístíme všechny diapozitivy v levém horním rohu posuvníku, čímž se určují stejnou zdrojovou polohu.

1. Snímek je na zdrojové poloze, je demonstrován uživatelem.

2. Snímek se přesune doleva, dokud se nevypne zcela v zahraničí posuvník (posuvník je také indikován výše, přetečení: skryté, resp. Slouzání se nespustí na okolní objekty).

5. Snímek sestupuje po jedné úrovni posuvníkem

6. Snímek se přesune do výchozí polohy
Jinými slovy (záběry, podle čísel ze seznamu výše):

@KeyFrames Slide (od (top: 0; vlevo: 0;) 1 (transformace: přeložit (0Px, 0px);) 2 (transformace: přeložit (-500px, 0);) 3 (transformace: přeložit (-500px, 300px );) 4 (transformace: přeložit (500px, 300px);) 5 (transformace: přeložit (500px, 0);) k (transformace: (0px, 0px);))
5) Tak to bylo jasné, jak vypadá cesta šoupátka. Každé snímky "kruhy" kolem svého kontejneru je posuvník - a vrací se do originálu. Tak můžeme nekonečně otočit libovolný počet snímků. Ale jeden nuance zůstala, což je v tomto schématu nejdůležitější věcí - čas. Je nutné správně vypočítat vyprávění animace v čase a nastavit správné zpoždění pro každý snímek tak, aby nebylo také současně animováno. Abychom pochopili, jak nastavit zpoždění správně a vypočítat čas animace, šel jsem níže.

Vezměme si označení kroků z předchozího bodu a pochopíte, co se stane v každém kroku. V podstatě jsou kroky číslo 1, 2 a 6 ty kroky, ve kterých se skluzavka dostane do viditelného prostoru. Ze skutečnosti, že diapozitivy by se měly pohybovat neoddělitelně a, protože se navzájem tlačili ze jezdce, lze dospět k závěru, že doba trvání kroků 2 a 6 by měla být stejná. Okamžitě proveďte rezervaci, kterou jsem podařilo úspěšně pracovat tento design pouze s podmínkou, že doba trvání prvního kroku je rovněž rovna trvání 2. a 6.. Co se stane během kroků 3.4 a 5, je v podstatě technické potřeby a pro jednoduchost, pojďme sjednotit tyto tři kroky v 1.

Po zjednodušení máme:

1. Krok - Posuvník je demonstrován na zdroji
2. Krok - Posuvník se posouvá doprava
3. Krok - Posuvník dělá technické pohyby
4. Krok - Posuvník se posune doleva, vrací se do počáteční polohy

Chcete-li zajistit incident k diapozitivům, v okamžiku, kdy se snímek spustí krok 2, musí nastartovat další snímek krok 4.

Je-li čas, kruh všech animací je t;
Počet snímků - n;
Trvání 3 kroky - y;
Doba trvání kroků je 1,2 a 4 - x;
Krok zpoždění animace pro n-skluzu - Z;
Pak:

Y \u003d (100 * n - 150) / n;
x \u003d (100 - y) / 3;
X a Y musí být přeloženy do zájmu a pak:
z \u003d 2 * x * t;

Pro případ, kdy n \u003d 4, jako v příkladu výše, dostaneme:

3. hřiště - 62,5%, 1, 2 a 4 - 12,5%. Krok zpoždění animace pro každou následující skluzu - 25%.

Které intervaly budou mezi etapy ve třetím kroku - nezáleží na tom.

6) Teď, když všichni počítali a víme, že všechny hodnoty mohou být poskytnuty konečný kód.

Animace:

@Keyframes Slide (od (top: 0; vlevo: 0;) 12,5% (transformace: přeložit (0Px, 0px);) 25% (transformace: přeložit (-500px, 0);) 36% (transformace: překládat) (- 500px, 300px);) 37% (transformace: překládat (500px, 300px);) 87,5% (transformace: přeložit (500px, 0);) (transformace: (0Px, 0px);))
Snímky:

Slide1 (Pozadí: URL (1.jpg); Zpoždění animace: 7,5s;) .Slide2 (pozadí: URL (2.jpg); Animace-zpoždění: 5s;) .Slide3 (pozadí: URL (3.jpg); Zpoždění animace: 2,5s;) .slide4 (pozadí: URL (4.jpg); Animace-zpoždění: 0s;)
Obecné CSS pro všechny snímky:

Slide (šířka: 500px; výška: 300px; poloha: absolutní; top: 0; vlevo: 0; animace-name: sklouznutí; animace-trvání: 10s; animace-časování - funkce: lineární; animace-iterace-počet: nekonečná; )
Zde ve skutečnosti všechno! Díky všem, kteří čtou na konci.