Domov › Telefon › Jednoduché příklady prezentací v html. Textové efekty "Typografické efekty". Celoobrazovková prezentace jQuery

Jednoduché příklady prezentací v html. Textové efekty "Typografické efekty". Celoobrazovková prezentace jQuery

1. Úžasná prezentace jQuery „Elastic Slideshow“

Prezentace s miniaturami a popisy snímků. Různé efekty změny obrazu. Existují dvě možnosti: s automatickou výměnou sklíčka a bez ní.

2. Čistý jezdec CSS3

Pěkný posuvník obrázků s popisem a automatickým měničem snímků. Když najedete na obrázek, rotace se zastaví. Zastavení je doprovázeno efektem CSS3.

3. Plugin jQuery „Photorama“

Pěkný posuvník galerie.

4. Textové efekty „Typografické efekty“

Zajímavé efekty pro práci s typografií pomocí CSS3 a jQuery. 7 různých cool efektů.

5. Plugin Darkbox

Malý lehký plugin pro zobrazování obrázků ve vyskakovacím bloku.

6. Efekt přechodu pomocí jQuery

Kruhový efekt při umístění kurzoru.

7. Animovaná tlačítka jQuery CSS3

Spousta různých animovaných efektů CSS3 pro vytvoření úžasných tlačítek pro váš web. Prostě skvělé efekty vznášení.

8. HTML5 jQuery mění obrázky na pozadí

Když kliknete na miniatury, obrázky na pozadí se navzájem nahradí efektem rozostření. Když změníte velikost okna prohlížeče, změní se velikost obrázku na pozadí.

8. Interaktivní typografické efekty

Zajímavé textové efekty pomocí HTML5 a jQuery (4 různé efekty). Efekt zobrazíte umístěním ukazatele myši na text.

9. Popisky vyskakovacích obrázků

Mnoho různých animovaných efektů vznášet se k implementaci popisků vyskakovacích obrázků.

10. Plugin „Portamento“

Plovoucí blok v jQuery. Vždy zůstane viditelný při posouvání stránky dolů.

11. Posouvače obsahu

Plugin jQuery pro zobrazení rolování v blocích pevné velikosti. Několik stylů.

jQuery implementace horizontálních a vertikální rolování obsah v bloku pevných velikostí.

13. Zásuvný modul Tiny Scrollbar

jQuery plugin pro implementaci vertikálních a horizontální rolování obsah.

14. Plugin „jScrollPane“

Posouvání obsahu v bloku napříč prohlížeči.

15. Plovoucí blok „Scroll Follow“

Plugin pro vytvoření bloku, který se bude rolovat při rolování stránky. Blokování je možné opravit kliknutím na odkaz.

16. Vyskakovací postranní lišty

Výsuvné panely na všech stranách webové stránky.

17. Efektivní řešení CSS3 pro návrh pahýlových stránek

Tři možnosti implementace animovaných efektů pro vytvoření útržku „Stránka ve vývoji“.

17. Efekt při rolování stránky

Úžasný efekt při posouvání stránky: prvky se pohybují mimo oblast za obrazovkou nebo se naopak skrývají za oblast obrazovky. Podobné řešení Perfektní pro použití na portfoliových webech, pro efektivní prezentaci dokončených projektů se stručným popisem.

19. Plugin „fancyBox 2“

Nová, zcela přepsaná verze známého plugin fancybox, pro zobrazování obrázků a dalšího obsahu v modálních oknech.

20. Galerie Minimit

Funkční plugin s širokou škálou funkcí: galerie, karusel, posuvník, menu, expandér, animovaná tlačítka.

21. jQuery News Ticker

Rotátor novinek na webu. Zprávy na sebe navazují a objevují se pomocí zajímavého efektu psací stroj. Změnu novinek můžete zastavit kliknutím na tlačítko „Pozastavit“. Pomocí šipek můžete přecházet z jedné zprávy do druhé.

22. Adaptivní obrazy

Škálovatelné obrázky pro zobrazení mobilní zařízení. Velikost obrázku závisí na velikosti okna. Použité technologie: javascript a PHP5.

23. vScroller

Vertikální jQuery, CSS3 scroller. Nastavitelná rychlost rolování a doba zpoždění.

24. Víceúrovňová rozbalovací nabídka „jQSimpleMenu“

Nový plugin jQuery pro vytváření víceúrovňových horizontálních rozevíracích nabídek na webu.

25. "jsCarousel 2.0"

Plugin jQuery pro implementaci vertikálních a horizontálních karuselů.

26. Rotátor „Dynamické zprávy“

Plugin jQuery pro pěkné zobrazení nejnovější zprávy z RSS kanálu.

27. Animované menu

Animovaný efekt při najetí myší na položku nabídky.

28. Efekt animovaného textu

Tři velkolepé příklady práce s CSS vlastností „background-clip: text“. Efekt CSS3 nefunguje ve starších prohlížečích.

29. Efekt rozostření CSS3 jQuery

Když najedete na blok, zvětší se a zbývající textové bloky se na pozadí rozostřují.

31. Popisky jQuery při najetí myší

33. CSS3 a HTML5 Sticky Notes

Implementace bloků podobných poznámkám s textem.

34. Rlightbox

Zobrazení mediálního obsahu ve vyskakovacích blocích: obrázky, videa, Flash.

35. bzučák jQuery

Zvětšení plochy náměstí.

36. Popis obrázku CSS3 jQuery

Plugin „Based Sliding Door Content Gallery“ pro implementaci popisů vyskakovacích obrázků. Když najedete kurzorem na některý z prezentovaných obrázků, a stručný popis s odkazem na celý článek. Při vznášení: efekt zvednutí garážových vrat.

37. Efekt „Před a po“ plugin jQuery „uCompare“

Přetažením závěsu můžete porovnat dva překrývající se obrázky. Ideální pro případy, kdy potřebujete na stránce zobrazit dvě verze něčeho: před a po.

39. Interaktivní mapy světa a Evropy a USA

1. Vynikající jQuery Slideshow

Velká, velkolepá prezentace využívající technologie jQuery.

2. plugin jQuery „Scale Carousel“

Škálovatelná prezentace pomocí jQuery. Můžete nastavit velikosti prezentace, které vám nejlépe vyhovují.

3. plugin jQuery „slideJS“

Posuvník obrázku s textovým popisem.

4. Plugin „JSliderNews“

5. Posuvník CSS3 jQuery

Když najedete na navigační šipky, zobrazí se kruhová miniatura dalšího snímku.

6. Pěkný posuvník „Presentation Cycle“ jQuery

posuvník jQuery s indikátorem načítání obrázku. K dispozici je automatická výměna sklíčka.

7. Plugin jQuery „Parallax Slider“

Posuvník s objemovým efektem pozadí. Vrcholem tohoto posuvníku je pohyb pozadí, které se skládá z několika vrstev, z nichž každá se posouvá jinou rychlostí. Výsledkem je imitace objemového efektu. Vypadá to moc krásně, můžete se sami přesvědčit. Efekt se zobrazuje plynuleji v prohlížečích, jako je Opera, Google Chrome,TJ.

8. Svěží, lehký posuvník jQuery „bxSlider 3.0“

Na ukázkové stránce v sekci „příklady“ naleznete odkazy na všechny možné možnosti pomocí tohoto pluginu.

9. Posuvník obrázků jQuery, plugin „slideJS“.

Stylový posuvník jQuery může jistě ozdobit váš projekt.

10. jQuery slideshow plugin “Easy Slides” v1.1

Snadno použitelný jQuery plugin pro vytvářet prezentace.

11. Plugin jQuery Slidy

Odlehčený plugin jQuery v různých verzích. K dispozici je automatická výměna sklíčka.

12. Galerie CSS jQuery s automatickým přepínáním snímků

Pokud návštěvník do určité doby neklikne na šipky „Vpřed“ nebo „Zpět“, galerie se začne automaticky posouvat.

13. Posuvník jQuery „Nivo Slider“

Velmi profesionální vysoce kvalitní lehký plugin s platný kód. K dispozici je mnoho různých přechodových efektů snímků.

14. Posuvník jQuery „MobilySlider“

Čerstvý posuvník. Posuvník jQuery s různými efekty změny obrazu.

15. Plugin jQuery „Slider²“

Lehký slider s automatickým měničem diapozitivů.

16. Čerstvý javascriptový posuvník

Posuvník s automatickou změnou obrazu.

Plugin pro implementaci prezentací s automatickou výměnou snímků. Displej je možné ovládat pomocí náhledů obrázků.

CSS jQuery image slider pomocí pluginu NivoSlider.

19. Posuvník jQuery „jShowOff“

Plugin pro rotaci obsahu. Tři možnosti použití: bez navigace (s automatickým přepínáním formát prezentace), s navigací ve formě tlačítek, s navigací ve formě náhledů obrázků.

20. Plugin “Shutter Effect Portfolio”.

Čerstvý plugin jQuery pro navrhování portfolia fotografa. Implementováno v galerii zajímavý efekt měnící se obrázky. Fotografie na sebe navazují s efektem podobným činnosti závěrky objektivu.

21. Lehký javascriptový posuvník CSS „TinySlider 2“

Implementace obrazového jezdce s pomocí javascriptu a CSS.

22. Úžasný posuvník „Tinycircleslider“

Stylový kulatý posuvník. Přechod mezi obrázky se provádí tažením posuvníku ve tvaru červeného kruhu po obvodu. Dokonale zapadne do vašeho webu, pokud ve svém designu použijete oblé prvky.

23. Obrazový posuvník s jQuery

Lehký posuvník „Slider Kit“. Posuvník je k dispozici v různých provedeních: vertikální a horizontální. Také implementováno různé typy navigace mezi obrázky: pomocí tlačítek „Vpřed“ a „Zpět“, pomocí kolečka myši, pomocí kliknutí myší na snímek.

24. Galerie s miniaturami „Slider Kit“

Galerie "Slider Kit". Posouvání náhledů se provádí svisle i vodorovně. Přechod mezi obrázky se provádí pomocí: kolečka myši, kliknutí myší nebo najetí kurzorem na náhled.

25. Posuvník obsahu jQuery „Slider Kit“

Vertikální a horizontální posuvník obsahu pomocí jQuery.

26. Prezentace jQuery „Slider Kit“

Prezentace s automatickou výměnou snímků.

27. Lehký profesionální javascriptový posuvník CSS3

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

Prezentace jQuery s miniaturami.

29. Jednoduchá prezentace jQuery

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

30. Úžasná prezentace jQuery „Skitter“.

Plugin jQuery Skitter pro vytváření úžasných prezentací. Plugin podporuje 22 (!) typů různých animačních efektů při změně obrázků. Může pracovat se dvěma možnostmi navigace snímků: pomocí čísel snímků a pomocí miniatur. Určitě se podívejte na demo, velmi kvalitní nález. Použité technologie: CSS, HTML, jQuery, PHP.

31. Prezentace „Nepříjemné“

Funkční prezentace. Snímky mohou být: jednoduché obrázky, obrázky s titulky, obrázky s popisky, videa. K navigaci můžete používat šipky, číselné odkazy a levé/pravé klávesy na klávesnici. Prezentace je k dispozici v několika verzích: s miniaturami a bez nich. Chcete-li zobrazit všechny možnosti, klikněte na odkazy Demo #1 - Demo #6 umístěné v horní části stránky s ukázkou.

Velmi originální design obrazový posuvník připomínající ventilátor. Animovaný přechod mezi snímky. Navigace mezi snímky se provádí pomocí šipek. Nechybí ani automatický posun, který lze zapnout a vypnout pomocí tlačítka Play/Pause umístěného na horní straně.

Animovaný posuvník jQuery. Obrázky na pozadí automaticky měřítko při změně velikosti okna prohlížeče. U každého obrázku se objeví blok s popisem.

34. Posuvník „Flux Slider“ využívající jQuery a CSS3

Nový posuvník jQuery. Několik skvělých animovaných efektů při výměně snímků.

35. Plugin jQuery „jSwitch“

Animovaná galerie jQuery.

Jednoduchá prezentace jQuery s automatickým přepínáním snímků.

37. Nová verze pluginu “SlideDeck 1.2.2”

Profesionální posuvník obsahu. K dispozici jsou možnosti s automatickým přepínáním snímků a také možnost použití kolečka myši pro pohyb mezi snímky.

38. Posuvník jQuery „Sudo Slider“

Lehký jezdec obrázků pomocí jQuery. Existuje mnoho možností implementace: horizontální a vertikální změna obrázků, s odkazy na číslo snímku a bez nich, s popisky obrázků a bez nich, různé efekty měnící se obrázky. Existuje funkce automatická změna diapozitivy. Odkazy na všechny příklady implementace naleznete na stránce demo.

39. Prezentace jQuery CSS3

Prezentace s náhledy podporuje režim automatické změny snímků.

40. Posuvník jQuery „Flux Slider“

Posuvník s mnoha efekty změny obrazu.

41. Jednoduchý posuvník jQuery

Stylový posuvník obrázků pomocí jQuery.

42. Prezentace jQuery „Craftyslide“.

43. Celoobrazovková prezentace jQuery

jQuery HTML5 slideshow, která se táhne přes celou šířku obrazovky se zvukem.

Jednoduchá prezentace jQuery.

Překlad
Konzultace

Díky CSS3 můžeme vytvářet animační efekty bez použití JavaScriptu, což usnadní práci mnoha vývojářům.
CSS3 bychom neměli nadužívat, protože starší prohlížeče nepodporují všechny jeho vlastnosti. Každopádně všichni vidíme potenciál CSS3 a v tomto článku budeme diskutovat o tom, jak vytvořit jezdec smyčkového obrázku pouze pomocí animace CSS3.

Části článku

Abyste pochopili proces od začátku do konce, níže je obsah článku. Upozorňujeme, že tento efekt bude správně fungovat pouze v moderní prohlížeče, které podporují použité vlastnosti CSS3.

Zavedení
Popis základních pojmů souvisejících s přechody CSS3 a animací klíčových snímků.
HTML značky
Vytváření značek HTML pro posuvník obrázků.
CSS styly
Vytvořte šablonu stylů pro zobrazení posuvníku.
Animace klíčových snímků CSS3
Přidání animace do posuvníku. Podíváme se na různé procesy, které zde probíhají.
Přidání ukazatele průběhu pro náš posuvník.
Přidání popisku k zobrazení titulků.
Přechody CSS3
Zobrazte nápovědu při umístění kurzoru pomocí přechodů CSS3
Pozastavit a restartovat
Demonstrace
Pojďme si ukázat posuvník v akci.
Závěr
Závěrečné myšlenky.

1. Úvod

Chcete-li použít tento tutoriál, budete potřebovat základní znalosti CSS, konkrétně přechodů CSS3 a animací klíčových snímků.
Operace s těmito jednoduché koncepty, uvidíme, jak na to funkční posuvník obrázky.

Základní pojmy Přechody CSS3

Obvykle, když podvádíte Hodnota CSS, změny se zobrazí staticky. Nyní můžeme díky vlastnosti přechodu snadno provádět změny z jednoho stavu do druhého.

Můžeme použít čtyři vlastnosti přechodu:

Přechodová vlastnost
Určuje jméno(a) CSS vlastnosti, na které by měly být přechody aplikovány.

Přechod-doba trvání
Definuje čas, během kterého by měl přechod nastat.

Funkce časování přechodu
Definuje způsob výpočtu střední hodnoty přechod.

Přechod-zpoždění
Určuje, kdy je přechod spuštěn.

V současné době jsou přechody CSS3 podporovány v prohlížečích Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ a IE 10. Protože je tato technologie stále relativně nová, Jsou vyžadovány předpony prohlížeče. Syntaxe je stejná pro všechny prohlížeče kromě přidání nezbytných předpon. V tomto článku je vynecháme, ale nezapomeňte do kódu zahrnout předpony.

Podívejme se, jak použít jednoduchý přechod na odkaz:
a ( barva: #000; vlastnost přechodu: barva; doba trvání přechodu: 0,7 s; funkce časování přechodu: náběh; zpoždění přechodu: 0,3 s; ) a:hover ( barva: #fff; )

Při přiřazování animace k prvku můžete také použít zkrácený formulář:
a ( barva: #000; přechod: barva 0,7 s náběh za 0,3 s; ) a:hover ( barva: #fff; )

Základní koncepty animací CSS3

Animace CSS nám umožňuje vytvářet animace bez JavaScriptu pomocí sady klíčových snímků.
Na rozdíl od přechodů CSS jsou animace klíčových snímků v současnosti podporovány pouze v prohlížečích WebKit, Firefox a brzy IE 10. Nepodporované prohlížeče budou kód animace jednoduše ignorovat.

Vlastnost animace má osm podvlastností:

Animace-zpoždění
Určuje, kdy se animace spustí.

Směr animace
Určuje, zda se má animace přehrávat pozpátku ve střídavých smyčkách.

Délka animace
Určuje dobu, kterou animace potřebuje k dokončení jedné smyčky.

Počet animací-iterací
Určuje počet cyklů animace před zastavením.

Název animace
Definuje název pravidla v @keyframes.

Animace-play-stav
Určuje, zda se animace přehrává nebo je pozastavena.

Režim animace
Definuje, jak má animace CSS aplikovat styly na svůj cíl před a po spuštění.

Podívejme se, jak aplikovat jednoduchá animace zablokovat:
/* Prvek, na který aplikujeme animaci. */ div ( název-animace: přesun; trvání-animace: 1 s; funkce časování animace: náběh-vypnutí; zpoždění animace: 0,5 s; počet-iterací animace: 2; směr-animace: alternativní; - moz-animation-name: move -moz-animation-duration: 1s -moz-animation-timing-function: easy-in-out -moz-animation-itation-count : 2; alternativní; -webkit-animation-name: -webkit-animation: delay: 0,5s; -webkit-animation-count: 2) /* Kód animace. */ @klíčové snímky se přesunou ( z ( transform: translateX(0); ) do ( transform: translateX(100px); ) ) @-moz-keyframes se přesunou ( z ( -moz-transform: translateX(0); ) do ( - moz-transform: translateX(100px) ) @-webkit-keyframes move ( from ( -webkit-transform: translateX(0); ) to ( -webkit-transform: translateX(100px); ) );

Můžeme použít zkratku k nastavení všech vlastností animace najednou:
div ( animace: pohyb 1s náběh 0,5s 2 střídavě; -moz-animace: tah 1s náběh 0,5s 2 střídání; -webkit-animace: tah 1s náběh 0,5s 2 střídání; )

Klíčové snímky

Každý klíčový snímek popisuje, jak by se měl animovaný prvek chovat v daném časovém bodě animace. Klíčové snímky mají procentuální hodnoty pro určení načasování: 0 % je začátek animace, zatímco 100 % je konec. Můžete dodatečně přidat mezirámy pro animace.

/* Animace od 0 % do 100 % */ @klíčové snímky se pohybují ( 0 % ( transformace: translateX(0); ) 100 % ( transform: translateX(100px); ) ) /* Animace se středním snímkem */ @klíčové snímky se pohybují ( 0 % ( transformace: translateX(0); ) 50 % ( transformace: translateX(20px); ) 100 % ( transformace: translateX(100px); ) )

W3C má mnoho užitečných a podrobné informace o animaci CSS3

Základní struktura našeho posuvníku

Nyní, když víme, jak přechody a animace fungují, pojďme se podívat na to, jak vytvořit náš posuvník pouze pomocí CSS3. Tato skica ukazuje, jak by měla animace fungovat:

Jak vidíte, posuvník bude kontejnerem, ve kterém se budou obrázky zobrazovat.
Animace je velmi jednoduchá: obrázek sleduje daný směr a mění vlastnosti „top“, „z-index“ a „opacity“.
Pojďme se vrhnout přímo na značku HTML a vytvořit posuvník.

2. HTML značení

HTML značení je velmi jednoduché. Je přehledně uspořádaný a přátelský k SEO. Nejprve se na to podíváme úplný kód, a pak se podrobně dozvíme, jak vše funguje.

Puma
Lvi
Snowalker
Vyjící
opalování

Div id="slider"
Toto je hlavní nádoba posuvníku. Nemá specifická funkce, ale potřebujeme to k pozastavení animace.

Div id="mask"
Tento blok použijeme ke skrytí všeho, co se děje mimo posuvník. Kromě toho nám maska umožňuje zobrazit obsah posuvníku.

Li id="first" class="firstanimation"
Každý prvek seznamu má ID a třídu. ID zobrazuje nápovědu a třída je svázána s animací, která se chystá.

Div class="tooltip"
Tento blok zobrazuje název obrázku. Můžete jej změnit podle svých potřeb, například tím, že na něj budete klikat nebo přidáte krátký popis.

Div class="progress-bar"
Tento blok obsahuje funkci, která ukazuje průběh animace.

Nyní je čas vygenerovat soubor CSS.

3. Styly CSS

Pojďme tvořit základní struktura posuvník. Bude mít stejnou velikost jako obrázek. Vlastnost border bude užitečná pro vytvoření ohraničení kolem obrázku.

/* Struktura posuvníku */ #slider ( pozadí: #000; ohraničení: 5px plný #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0,7); výška: 320px; šířka: 680px; okraj: 40px auto 0; viditelná poloha: relativní)

Třída "maska" skryje všechny prvky, které se nacházejí mimo posuvník. Jeho výška by měla být stejná výška posuvník.

/* Skrytí všeho mimo posuvník */ #mask ( overflow: hidden; height: 320px; )

Nakonec, abychom seznam obrázků seřadili, použijeme "position: absolute" a "top: -325px", takže všechny obrázky budou umístěny mimo posuvník.

/* Seznam obrázků */ #slider ul ( okraj: 0; výplň: 0; pozice: relativní; ) #slider li ( šířka: 680px; /* Šířka obrázku */ výška: 320px; /* Výška obrázku */ pozice: absolutní ; nahoře: -325px /* Výchozí pozice(mimo posuvník) */ list-style: none; )

Pomocí těchto několika řádků kódu jsme vytvořili označení posuvníku. Nyní zbývá přidat animaci.

4. Animace klíčových snímků CSS3

Než začneme s animací, musíme definovat některé parametry, aby byla animace správná.
Jak víme, celková délka animace bude 25 sekund, ale potřebujeme vědět, kolik klíčových snímků bude za 1 sekundu.
Pojďme vyřešit sérii operací, které nám poskytnou přesný počet klíčových snímků a celkovou dobu trvání animace. Zde jsou výpočty:
Určete celkový počet obrázků v posuvníku: 5 ;
Pro každý obrázek určíme dobu trvání animace: 5 sekund;
Celkové trvání animace určíme vynásobením celkového počtu obrázků dobou trvání každého z nich: 5 snímků × 5 sekund = 25 sekund;
Vypočítáme, kolik klíčových snímků (v procentech) bude za jednu sekundu.
Vydělte celkový počet klíčových snímků celkovou dobou trvání animace: 100%/25 = 4% ,
Během jedné sekundy jsou 4 klíčové snímky, neboli 1 sekunda se rovná 4 % animace.

Po všech těchto výpočtech můžeme nyní použít animaci CSS na posuvník. Můžeme vložit animaci nekonečná smyčka, protože Pro každý obrázek bude nastavena samostatná animace nezávislá na ostatních obrázcích.

#slider li.firstanimation ( animace: cyklus 25s linear infinite; ) #slider li.secondanimation ( animace: cycletwo 25s linear infinite; ) #slider li.thirdanimation ( animace: cyclethree 25s linear infinite; ) #slider li. cyclefour 25s linear infinite ) #slider li.fifthanimation ( animace: cyclefive 25s linear infinite; )

Jakmile jsou vlastnosti animace přiřazeny, musíme použít klíčové rámečky pro uvedení animace do pohybu.
Podle tohoto principu můžeme všechny animace vzájemně propojit, i když jsou na sobě nezávislé. Tím získáme nekonečnou smyčku.
Přidal jsem vlastnosti "opacity" a "z-index", aby byl přechod z jednoho obrázku na další atraktivnější.
Jak můžete vidět v kódu, první animace má více klíčových snímků než ostatní. Důvodem je to, že když je posuvník spuštěn, první obrázek uvolní místo pro druhý, ale když poslední obrázek dokončí svou animaci, první obrázek musí mít další klíčové snímky, aby nedocházelo k přerušení mezi smyčkami animace.

Zde je veškerý kód pro animace:
/* Animace */ Cyklus @klíčových snímků ( 0 % ( nahoře: 0px; ) /* Když se spustí posuvník, první obrázek je již viditelný */ 4 % (nahoře: 0px; ) /* Počáteční pozice */ 16 % ( nahoře : 0px; ) neprůhlednost:1; z-index:0 ) /* od 16 % do 20 % (1 sekunda) obrazový výstup */ 21 % ( nahoře: -325px; krytí: 0; z-index: -1; ) /* Návrat do původní pozice mimo masku */ 92 % ( nahoře: -325 pixelů; neprůhlednost: 0; z-index: 0; ) 96 % ( nahoře: -325 pixelů; neprůhlednost: 0; ) /* Od 96 % do 100 % (1 sekunda) – zadání */ 100 % (nahoře: 0px; neprůhlednost: 1; ) ) @klíčové snímky cycledwo ( 0% (nahoře: -325px; neprůhlednost: 0; ) /* Počáteční pozice mimo masku */ 16% (nahoře: -325px; neprůhlednost: 0; ) /* Začátek pohybu na 16 % * / 20 % ( nahoře: 0px; neprůhlednost: 1; ) 24 % (nahoře: 0px; neprůhlednost: 1; ) /* Od 20 % do 24 % (do 1 sekundy) - zadání * / 36 % ( nahoře: 0 pixelů; neprůhlednost: 1; z-index: 0; ) /* Od 24 % do 36 % (3 sekundy) je obrázek viditelný */ 40 % ( nahoře: 325 pixelů; neprůhlednost: 0; z- index: 0 ) /* Od 36 % do 40 % (1 sekunda) - ukončení */ 41 % ( nahoře: -325px; neprůhlednost: 0; z-index: -1; ) /* Návrat na původní pozici */ 100 %( nahoře: -325 pixelů; neprůhlednost: 0; z-index: -1; ) ) @keyframes cyclethree ( 0 % ( nahoře: -325 pixelů; neprůhlednost: 0; ) 36 % ( nahoře: -325px; neprůhlednost: 0 ) 40 % ( nahoře: 0px; neprůhlednost: 1; ) 44 % ( nahoře: 0px; neprůhlednost: 1; ) 56 % ( nahoře: 0px; neprůhlednost: 1; ) 60 % ( nahoře : 325px; neprůhlednost: 0 -1; ) ) @keyframes cyclefour ( 0 % ( nahoře: -325 pixelů; neprůhlednost: 0; ) 56 % ( nahoře: -325 pixelů; neprůhlednost: 0; ) 60 % ( nahoře: 0 pixelů; neprůhlednost: 1; ) 64 % ( nahoře: 0px; neprůhlednost: 1 ) 76 % ( nahoře: 0px; neprůhlednost: 1; z-index: 0; ) 80 % ( nahoře: 325px; neprůhlednost: 0; z-index: 0; ) 81 % ( nahoře: -325px; opacity: 0; z-index: -1; 0; ) 76 % ( nahoře: -325 pixelů; neprůhlednost: 0; ) 80 % ( nahoře: 0 pixelů; neprůhlednost: 1; ) 84 % ( nahoře: 0 pixelů; neprůhlednost: 1; ) 96 % ( nahoře: 0 pixelů; neprůhlednost: 1 ;

Jakmile vytvoříme animaci, musíme přidat ukazatel průběhu, který zobrazí dobu trvání každé animace.

Proces animace pro ukazatel průběhu je stejný jako pro posuvník. Vytvořme samotný ukazatel průběhu:

/* Progress bar */ .progress-bar ( pozice: relativní; nahoře: -5px; šířka: 680px; výška: 5px; pozadí: #000; animace: fullexpand 25s náběh nekonečno; )

Nebojte se syntaxe. Existuje stejná funkce jako „od do“. Můžete vidět, že klíčové snímky nastavují vzhled a zmizení každého obrázku.

/* Stavový řádek animace */ @keyframes fullexpand ( /* Animace je v těchto klíčových snímcích nehybná */ 0%, 20%, 40%, 60%, 80%, 100% (šířka: 0%; neprůhlednost: 0; ) / * V těchto - ožívá */ 4%, 24%, 44%, 64%, 84% ( šířka: 0%; neprůhlednost: 0,3; ) /* V těchto - se plní hladce */ 16%, 36 %, 56 %, 76 %, 96 % ( šířka: 100 %; neprůhlednost: 0,7; ) /* U těchto klíčových snímků ukazatel průběhu dokončil svou cestu */ 17 %, 37 %, 57 %, 77 %, 97 % ( width: 100% opacity : 0.3 ) /* U těchto klíčových snímků indikátor průběhu zmizí a poté se obnoví smyčka */ 18%, 38%, 58%, 78%, 98% ( šířka: 100%; neprůhlednost: 0; ))

Posuvník je víceméně kompletní. Pojďme přidat pár detailů, aby to bylo funkčnější. Vložíme popisky pro názvy obrázků, které budou viditelné při najetí myší.

Styly popisků:
#slider .tooltip ( pozadí: rgba(0,0,0,0.7); šířka: 300px; výška: 60px; pozice: relativní; dole: 75px; vlevo: -320px; ) #slider .tooltip h1 ( barva: #fff font-velikost: 24px; výška řádku: 60px;

Zde jsme zviditelnili pouze názvy obrázků, ale totéž můžete udělat pro jakýkoli text, odkazy nebo cokoli jiného, co chcete.

7. Přechody CSS3

Viděli jsme, jak aplikovat přechody CSS3 na prvky, nyní je uděláme pro popisky.
Pokud si pamatujete, ke každému seznamu jsme přidali ID („první“, „druhý“ atd.), takže při umístění kurzoru bude každý popisek spojen s samostatný obrázek, ale všechny výzvy se neobjevily najednou.

#slider .tooltip ( … přechod: všech 0,3 s náběh; ) #posuvník li#první: vznášení .tooltip, #slider li#second: hover .tooltip, #slider li#třetí: vznášení .tooltip, #slider li#fourth: hover .tooltip, #slider li#fifth: hover .tooltip (vlevo: 0px; )

8. Pozastavit a restartovat

Aby uživatelé mohli zastavit posuvník a zobrazit obsah, musíme zastavit animaci při umístění kurzoru myši. Také budeme muset zastavit animaci ukazatele průběhu.

#slider: hover li, #slider: hover .progress-bar ( animation-play-state: paused; )

9. Demonstrace

Konečně jsme se dostali na konec lekce. Posuvník je nyní 100% připraven!
(). Funguje ve Firefoxu 5+, Safari 4+ a Google Chrome, stejně jako na iPhonu a iPadu. Můžete si také stáhnout archiv ().
Díky Massimo Righi za jeho snímky.

10. Závěr

Efekt je působivý, ale tento posuvník není příliš univerzální. Například přidat více obrázků, musíte upravit všechny klíčové snímky. CSS3 má velký potenciál, ale má to své limity a někdy je v závislosti na cílovém publiku vhodnější JavaScript.
Tento posuvník má nějaké zajímavé funkce, jako je pauza (při najetí myší) a unikátní odkazy pro obrázky, které uživatelům umožňují interakci s posuvníkem. V případě potřeby plnou podporu všechny prohlížeče, pak použití CSS3 není možné, proto se doporučuje JavaScript. Animace CSS3 má bohužel mnoho omezení. Na momentálně,kvůli nedostatku flexibility jej nejsme schopni široce používat. Doufám, že vás tento článek povzbudí k dalšímu zkoumání CSS3.
Neváhejte se podělit o své myšlenky v komentářích.

Od překladatele:
Pokud najdete nějaké chyby v překladu, odhlaste se prosím v soukromých zprávách. Děkuju.

Štítky:

CSS3
prezentace

Přidejte značky

Překlad
Konzultace

Části článku

Abyste pochopili proces od začátku do konce, níže je obsah článku. Upozorňujeme, že tento efekt bude správně fungovat pouze v moderních prohlížečích, které podporují použité vlastnosti CSS3.

Zavedení
Popis základních pojmů souvisejících s přechody CSS3 a animací klíčových snímků.
HTML značky
Vytváření značek HTML pro posuvník obrázků.
CSS styly
Vytvořte šablonu stylů pro zobrazení posuvníku.
Animace klíčových snímků CSS3
Přidání animace do posuvníku. Podíváme se na různé procesy, které zde probíhají.
Přidání ukazatele průběhu pro náš posuvník.
Přidání popisku k zobrazení titulků.
Přechody CSS3
Zobrazte nápovědu při umístění kurzoru pomocí přechodů CSS3
Pozastavit a restartovat
Demonstrace
Pojďme si ukázat posuvník v akci.
Závěr
Závěrečné myšlenky.

1. Úvod

Chcete-li použít tento tutoriál, budete potřebovat základní znalosti CSS, konkrétně přechodů CSS3 a animací klíčových snímků.
S těmito jednoduchými koncepty uvidíme, jak vytvořit funkční posuvník obrázků.

Základní koncepty přechodů CSS3

Obvykle, když změníte hodnotu CSS, změny se zobrazí staticky. Nyní můžeme díky vlastnosti přechodu snadno provádět změny z jednoho stavu do druhého.

Můžeme použít čtyři vlastnosti přechodu:

Přechodová vlastnost
Určuje název (názvy) vlastností CSS, na které se mají použít přechody.

Přechod-doba trvání
Definuje čas, během kterého by měl přechod nastat.

Funkce časování přechodu
Určuje způsob výpočtu mezilehlých přechodových hodnot.

Přechod-zpoždění
Určuje, kdy je přechod spuštěn.

Při přiřazování animace k prvku můžete také použít zkrácený formulář:
a ( barva: #000; přechod: barva 0,7 s náběh za 0,3 s; ) a:hover ( barva: #fff; )

Základní koncepty animací CSS3

Vlastnost animace má osm podvlastností:

Animace-zpoždění
Určuje, kdy se animace spustí.

Směr animace
Určuje, zda se má animace přehrávat pozpátku ve střídavých smyčkách.

Délka animace
Určuje dobu, kterou animace potřebuje k dokončení jedné smyčky.

Počet animací-iterací
Určuje počet cyklů animace před zastavením.

Název animace
Definuje název pravidla v @keyframes.

Animace-play-stav
Určuje, zda se animace přehrává nebo je pozastavena.

Režim animace
Definuje, jak má animace CSS aplikovat styly na svůj cíl před a po spuštění.

Podívejme se, jak aplikovat jednoduchou animaci na blok:
/* Prvek, na který aplikujeme animaci. */ div ( název-animace: přesun; trvání-animace: 1 s; funkce časování animace: náběh-vypnutí; zpoždění animace: 0,5 s; počet-iterací animace: 2; směr-animace: alternativní; - moz-animation-name: move -moz-animation-duration: 1s -moz-animation-timing-function: easy-in-out -moz-animation-itation-count : 2; alternativní; -webkit-animation-name: -webkit-animation: delay: 0,5s; -webkit-animation-count: 2) /* Kód animace. */ @klíčové snímky se přesunou ( z ( transform: translateX(0); ) do ( transform: translateX(100px); ) ) @-moz-keyframes se přesunou ( z ( -moz-transform: translateX(0); ) do ( - moz-transform: translateX(100px) ) @-webkit-keyframes move ( from ( -webkit-transform: translateX(0); ) to ( -webkit-transform: translateX(100px); ) );

Klíčové snímky

Každý klíčový snímek popisuje, jak by se měl animovaný prvek chovat v daném časovém bodě animace. Klíčové snímky mají procentuální hodnoty pro určení načasování: 0 % je začátek animace, zatímco 100 % je konec. Volitelně můžete přidat mezilehlé snímky pro animace.

W3C má mnoho užitečných a podrobných informací o animaci CSS3

Základní struktura našeho posuvníku

Nyní, když víme, jak přechody a animace fungují, pojďme se podívat na to, jak vytvořit náš posuvník pouze pomocí CSS3. Tato skica ukazuje, jak by měla animace fungovat:

2. HTML značení

HTML značení je velmi jednoduché. Je přehledně uspořádaný a přátelský k SEO. Podívejme se nejprve na kompletní kód a poté podrobně zjistíme, jak vše funguje.

Puma
Lvi
Snowalker
Vyjící
opalování

Div id="slider"
Toto je hlavní nádoba posuvníku. Nemá specifickou funkci, ale potřebujeme ji k pozastavení animace.

Div id="mask"
Tento blok použijeme ke skrytí všeho, co se děje mimo posuvník. Kromě toho nám maska umožňuje zobrazit obsah posuvníku.

Li id="first" class="firstanimation"
Každý prvek seznamu má ID a třídu. ID zobrazuje nápovědu a třída je svázána s animací, která se chystá.

Div class="tooltip"
Tento blok zobrazuje název obrázku. Můžete jej změnit podle svých potřeb, například tím, že na něj budete klikat nebo přidáte krátký popis.

Div class="progress-bar"
Tento blok obsahuje funkci, která ukazuje průběh animace.

Nyní je čas vygenerovat soubor CSS.

3. Styly CSS

Vytvořme základní strukturu posuvníku. Bude mít stejnou velikost jako obrázek. Vlastnost border bude užitečná pro vytvoření ohraničení kolem obrázku.

Třída "maska" skryje všechny prvky, které se nacházejí mimo posuvník. Jeho výška by se měla rovnat výšce posuvníku.

/* Skrytí všeho mimo posuvník */ #mask ( overflow: hidden; height: 320px; )

Nakonec, abychom seznam obrázků seřadili, použijeme "position: absolute" a "top: -325px", takže všechny obrázky budou umístěny mimo posuvník.

/* Seznam obrázků */ #slider ul ( okraj: 0; výplň: 0; pozice: relativní; ) #slider li ( šířka: 680px; /* Šířka obrázku */ výška: 320px; /* Výška obrázku */ pozice: absolutní ; nahoře: -325px /* Počáteční pozice (mimo posuvník) */ styl seznamu: žádný )

Pomocí těchto několika řádků kódu jsme vytvořili označení posuvníku. Nyní zbývá přidat animaci.

4. Animace klíčových snímků CSS3

Po všech těchto výpočtech můžeme nyní použít animaci CSS na posuvník. Můžeme dát animaci do nekonečné smyčky, protože... Pro každý obrázek bude nastavena samostatná animace nezávislá na ostatních obrázcích.

Jakmile jsou vlastnosti animace přiřazeny, musíme k uvedení animace do pohybu použít klíčové snímky.
Podle tohoto principu můžeme všechny animace vzájemně propojit, i když jsou na sobě nezávislé. Tím získáme nekonečnou smyčku.
Přidal jsem vlastnosti "opacity" a "z-index", aby byl přechod z jednoho obrázku na další atraktivnější.
Jak můžete vidět v kódu, první animace má více klíčových snímků než ostatní. Důvodem je to, že když je posuvník spuštěn, první obrázek uvolní místo pro druhý, ale když poslední obrázek dokončí svou animaci, první obrázek musí mít další klíčové snímky, aby nedocházelo k přerušení mezi smyčkami animace.

Jakmile vytvoříme animaci, musíme přidat ukazatel průběhu, který zobrazí dobu trvání každé animace.

Proces animace pro ukazatel průběhu je stejný jako pro posuvník. Vytvořme samotný ukazatel průběhu:

/* Progress bar */ .progress-bar ( pozice: relativní; nahoře: -5px; šířka: 680px; výška: 5px; pozadí: #000; animace: fullexpand 25s náběh nekonečno; )

Nebojte se syntaxe. Existuje stejná funkce jako „od do“. Můžete vidět, že klíčové snímky nastavují vzhled a zmizení každého obrázku.

Posuvník je víceméně kompletní. Pojďme přidat pár detailů, aby to bylo funkčnější. Vložíme popisky pro názvy obrázků, které budou viditelné při najetí myší.

Zde jsme zviditelnili pouze názvy obrázků, ale totéž můžete udělat pro jakýkoli text, odkazy nebo cokoli jiného, co chcete.

7. Přechody CSS3

Viděli jsme, jak aplikovat přechody CSS3 na prvky, nyní je uděláme pro popisky.
Pokud si pamatujete, ke každému seznamu jsme přidali ID („první“, „druhý“ atd.), takže při umístění kurzoru bude každý popisek spojen se samostatným obrázkem, aniž by se všechny popisky zobrazily najednou.

8. Pozastavit a restartovat

Aby uživatelé mohli zastavit posuvník a zobrazit obsah, musíme zastavit animaci při umístění kurzoru myši. Také budeme muset zastavit animaci ukazatele průběhu.

#slider: hover li, #slider: hover .progress-bar ( animation-play-state: paused; )

9. Demonstrace

10. Závěr

Efekt je působivý, ale tento posuvník není příliš univerzální. Chcete-li například přidat další obrázky, musíte upravit všechny klíčové snímky. CSS3 má velký potenciál, ale má své limity a někdy je vhodnější JavaScript, v závislosti na cílovém publiku.
Tento posuvník má některé skvělé funkce, jako je pauza (při najetí myší) a jedinečné odkazy na obrázky, které uživatelům umožňují interakci s posuvníkem. Pokud je vyžadována plná podpora napříč všemi prohlížeči, pak použití CSS3 není možné, proto se doporučuje JavaScript. Animace CSS3 má bohužel mnoho omezení. V tuto chvíli ji kvůli nedostatečné flexibilitě nejsme schopni široce využívat. Doufám, že vás tento článek povzbudí k dalšímu prozkoumání CSS3.
Neváhejte se podělit o své myšlenky v komentářích.

Od překladatele:
Pokud najdete nějaké chyby v překladu, odhlaste se prosím v soukromých zprávách. Děkuju.

Štítky: Přidat štítky

Plugin pro tvorbu nejkrásnější slidery- iView. Spousta nastavení, navigace, časovač, API, podpora dotyková zařízení, vkládání videa a přizpůsobivost.

04.03.2013 1 692

Plugin pro vytvoření mikrogalerie na webu. Automatické zobrazení, možnost přidat popis ke každému obrázku a režim kruhového rolování, tzn. smyčkování.

01.02.2013 1 153

Plugin jQuery.popeye je elegantní a krásné řešení pro zobrazení galerie obrázků bez opuštění stránky. Na stránce se zobrazí pouze jedna fotografie, můžete procházet nebo zvětšovat všechny obrázky tato sada. Plugin se snadno instaluje a konfiguruje a byl vyvinut jako alternativa k běžně používaným lightbox2, fancybox nebo colorbox, které používají modální okna.

23.11.2012 7 286

Velký responzivní jQuery posuvník - FlexSlider. Zahrnuje možnost navigace pomocí odrážek (teček), umožňuje spolu s navigací používat miniatury, možnost vložit video jako snímek, možnost karuselu a plugin má i malé API.

12.09.2012 4 667

Mobilyslider je jednoduchý plugin jQuery vážící pouhých 5 Kb, ale vypadá minimalisticky a stylově. Je jich několik další možnosti, včetně povolení/zakázaní navigace, šipky vpřed/vzad, automatické prezentace, výběru typu přechodu atd.

07.06.2012 1 403

Vytvořme celoobrazovkovou prezentaci, jejíž hlavní myšlenkou je oříznout aktuálně otevřený snímek při přechodu na další nebo předchozí. Pomocí jQuery a CSS animace, můžeme získat jedinečné přechody mezi snímky.

09.05.2012 778

Prezentace v jQuery s hudební doprovod pomocí multiplatformní knihovny jPlayer. Snímky se v hudební skladbě mění v určených intervalech.

04.05.2012 892

Rhinoslider je poměrně flexibilní plugin pro prezentaci jQuery. Nejen, že jsou k dispozici různé efekty, ale je také možné je přidávat vlastní styly, efekty a funkce na posuvník. Na oficiální stránka Plugin má pohodlný generátor efektů - generátor - jakmile si vyberete, můžete si okamžitě stáhnout vygenerovaný funkční příklad.

03.05.2012 2 061

Slideshow plugin založený na jQuery a easing plugin. Přidána možnost posouvat snímky pomocí kolečka myši. Ukázkové stránky ukazují různé možnosti pomocí posuvné navigace.

12.04.2012 1 387

Pomocí jmpress, pojďme to udělat plugin jquery Pro vytvářet prezentace se zajímavými 3D efekty pro diapozitivy.

Oblíbené v kategorii: