HTML5 Adaptivní jezdec. Jak vytvořit adaptivní posuvník na CSS3? Adaptivní jezdec na CSS3

Jeden z efektivní způsoby Přilákání pozornosti uživatelů na stránce webu je vytvoření pohyblivé animace. Prvky animace pomáhají více jasně říct a ukázat uživatelům o vašem produktu. Naposledy, cestovní panely získaly velkou popularitu, stejně jako řadu dalších efektů, které se objevují při posouvání nebo stisknutí do obrázku. Jsou také známé jako posuvníky, kolotoče a opouštějící panely. Tento článek pojednává o vytvoření adaptivního posuvníku typu karuselu s hladkým účinkem auto-smlouvy.

Dnes síť obsahuje stovky recenzí s odkazy na ready-made řešení, ale většina z nich obsahuje mnoho nevyužitých funkcí, které výrazně sníží výkon posuvníku, stejně jako zpomalení načítání lokality jako celku. Profesionální webové vývojáře se vždy snažili vytvořit flexibilní v nastavení softwarové produkty, s nízkou prahovou hodnotou dalších knihoven a pluginů. Proto práce našeho skriptu zahrnuje minimální požadavky na organizaci takového jezdce. Funkce práce umožňuje nastavit interval spínání, rychlost, stejně jako výběr konkrétního snímku. Níže je uveden řádek trvalého, regulace práce jezdce sám.

Časový limista. - Spínací rychlost

Timeview. - Zobrazený čas

Radiobut. - Tlačítka pod snímkem, pro rychlou navigaci. Ve výchozím nastavení skutečná hodnota, pokud používáte FALSE, tlačítka zmizí.

A teď se začněme! Vytvořte a otevřete soubor index.htm.

V předloženém kodexu, jak nevidíme nic složitého, slider-wrap. Určuje všeobecné A řádky jezdce uprostřed obrazovky. Parametr aktivní snímek. Nastaví velikost a výšku obrázku podle jeho délky. A posuvník. Zobrazuje pouze aktivní obrázek.

Nyní vytvoříte a otevřete soubor. style.css. a pláče značení potřebujeme:

@Import URL ("https://fonts.googleeapis.com/css?family\u003dopen+sansansansansansansansans.roboto"); Tělo (barva: # 4F4F5A; font-face: "roboto", sans-serif; velikost písma: 16px; polstrování: 0; marže: 0;) # jezdec-wrap (max. Šířka: 800px; marže: 0 Auto; Margin-top: 80px;) # aktivní snímek (šířka: 100%; zobrazení: tabulka; poloha: relativní; přetečení: skryté; -webkit-erbkit-webkit-user-select: none; -moz-user-select: žádný; -ms- \\ t User-Select: Žádný; -o-user -Select: žádný; uživatel-vyberte: žádný;) #slider (pozice: relativní; šířka: calc (100% * 4); top: 0; vlevo: 0; marže: 0 ; polstrování: 0; -webkit-přechod: 1s; -o-přechod: 1s; přechod: 1s; -webkit-přechod-časování - funkce: snadnost-in-out; -o-přechodově rozvodovná funkce: snadnost -uty; Funkce přechodu-rozvodu: snadnost-in-out;) .slide (šířka: calc (100% / 4); Seznam-stylu: žádný; displej: inline; plovák: vlevo;) .Slide img (šířka: 100%;) .radio-tlačítko (okraj-top: 10px; text-zarovnání: centrum;) .radio-ale .ctrl-select (marže: 2px; displej: inline-blok; šířka: 16px; výška: 16px; přetečení : Skrytá; text-odrážka: -9999PX; pozadí: URL (Radiobg.p Ng) středové dno ne-opakování; ) .Radio-ale .ctrl-Select: Hover (kurzor: ukazatel; Pozadí: poloha na pozadí: středové centrum;) .radio-ale .ctrl-select.aktive (pozice na pozadí: centrum nahoru;) #prewbutton, #nextbutton (zobrazení) : blok; šířka: 40px; výška: 100%; poloha: absolutní; top: 0; přetečení: skryté; text-odrážka: -999px; pozadí: url ("arrowbg.png") levé centrum ne-opakování; opacity: 0.5 ; Z-index: 3; obrys: Žádný! Důležité;) #Prewbutton (vlevo: 10px;) #nextbutton (vpravo: 10px; Nextbutton: Hover (opacita: 1;)

Ve stylu stylu slider-wrap. Propashite. šířka. – maximální délka Tvoje obrázky.

Ve stylu stylu #Slider (šířka: calc (100% * 4);) a .slide (šířka: calc (100% / 4);) Zadejte počet obrázků ve svém jezdci. V našem příkladu jsou 4.

Pokud se šipky vpřed / zpět na viditelnost vašeho posuvníku mohou být neviditelné a objeví se, když se vznášíte. K tomu v parametrech prewbut. a nextabut., Nastavte hodnotu vlastnosti opacity 0.

Nyní vytvoříte a otevřete náš soubor. slider.js.ve kterém bude posuvník. Nezapomeňte připojit knihovnu JQuery.

$ (Dokument) .ready \u003d 700; var timeview \u003d 5000; var radiobut \u003d true; var slidenum \u003d 1; var slidetime; slidecount \u003d $ ("# posuvník .slide"). Délka; var animslide \u003d funkce (šipka) (šipka) (cleartimeout) (Slidetime); pokud (šipka \u003d\u003d "další") (pokud (slidenum \u003d\u003d slidecount) (slidenum \u003d 1;) else (slidenum ++) přelitewidth \u003d - $ ("# aktivního snímku") .width () * (Slidenum - 1); $ ("# posuvník"). CSS (("transformace": "přeložit (" + přelitewidth + "px, 0)"));) jinak if (šipka \u003d\u003d "předtím) (pokud) (slidenum \u003d\u003d 1) (slider \u003d slidecount;) else (slideum- \u003d 1) Translatewidth \u003d - $ ("# aktivního snímku"). šířka () * (slidenum - 1); $ ("#slider"). CSS (("transformace": "Přeložit (" + Translatewidth + "px, 0)") "));) jinak (slidenum \u003d šipka; přelitewidth \u003d - $ (" # aktivní posuv "). Šířka () * (Slidenum - 1); $ ("posuvník"). CSS (("transformace": "přeložit (" + translatewidth + "px, 0)"));) $ (". Ctrl-select.ctive") .removeclass (" Aktivní "); $ (". Ctrl-select "). Eq (slidenum - 1) .addClass (" aktivní ");), pokud (RADIOBUT) (var $ linkarrow \u003d $ ("<>") .Prependto (" # Active-Slide "); $ (" # NextButton "). Klikněte na tlačítko (Funkce (); návratu false;)) $ (" # PrewButton "). Klikněte na tlačítko (Funkce () (" Prew) "); Vrátit false;))) var adderispan \u003d" "; $ (". Slide "). Každá (funkce (index) (adderspan + \u003d" "+ index +""; }); $("

"+ adderspan +"
") .appendto (" # jezdec-wrap "); $ (". ctrl-select: první "). addClass (" aktivní "); $ (". ctrl-select "). Klepněte na tlačítko (funkce (funkce (funkce (funkce (funkce (funkce (funkce var gotonum \u003d parsefloat). ($ (toto) .text ()); animslide (gotonum + 1);))); var pauzy \u003d false; var rotator \u003d funkce () (pokud (pokud) (pokud (! pauza) (slidetime \u003d settOeout (funkce () (")) Další ")), TimeView);))) $ (" # Slider-wrap "). Hover (funkce (funkce (); pauza \u003d true;), funkce () (pauza \u003d false; rotátor ();)); var kliknutím \u003d) FALSE; var prevx; $ (". Slide"). mousedown (funkce (funkce (e) (kliknutí \u003d true; prevx \u003d e.clientx;)); $ (". kliknutí \u003d false). ;)); $ (dokument) .Mouseup (funkce () (kliknutí \u003d false;)); $ (". Slide"). mousemove (funkce (e) (pokud (e) (klepnutím na tlačítko \u003d\u003d true) (pokud (e.clientx)< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX > Prevx) (animslide); jasný čas (slidetime);) kliknutí \u003d false; ))); $ (". Slide"). Hover (). CSS ("kurzor", "ukazatel"); Rotátor (); ));

Funkce animslide. Trvá tři typy hodnot: další, provést, číselnou hodnotu. Dalším parametrem se přepne následující snímek, předplácet se předchozí a číselná hodnota je určitě zadaný snímek vybraný přes rádiové posuvné tlačítka.

Předložený jezdec použité snímky z webového zdroje https://pixabay.com/.

Pokud potřebujete přidat vysoce kvalitní jquery-posuvník na vaše stránky, pak v tomto článku naleznete popis potřebných pluginů. Navzdory skutečnosti, že jQuery výrazně zjednodušila práci s JavaScriptem. Stále potřebujeme pluginy, které urychlují proces vytváření webového designu.

Můžeme provádět změny některých z těchto pluginů a vytvářet nové posuvníky, které mnohem více odpoví na úkoly našich stránek.

Pro ostatní posuvníky stačí přidat titulky, obrázky a vybrat efekty pro změnu snímků, které mají posuvník. Všechny tyto pluginy jsou doprovázeny podrobná dokumentaceTakže přidejte nové efekty nebo funkce, nebude mít tolik obtížnosti. Můžete dokonce změnit spouštěče v závislosti na událostech, pokud jste zkušený programátor jquery.

Nedávné trendy, jako je například adaptivní design, jsou velmi důležité pro webové projekty bez ohledu na to, zda implementujete plugin nebo skript. Všechny tyto prvky činí každý z těchto pluginů velmi flexibilní. Vše, co se stalo v roce 2014, je součástí tohoto seznamu.

Snímky jQuery-posuvníky

Posuvník JSSSOR.

Nedávno jsem narazil na tento funkční jquery -colder, a já jsem mohl přesvědčit první, aby se ujistil, že se s jeho práce velmi dobře objeví. Obsahuje neomezené možnosti, které lze rozšířit na úkor otevřeného zdrojového kódu jezdce:

  • Adaptivní design;
  • Více než 15 nastavení;
  • Více než 15 efektů posunu obrazu;
  • Galerie obrázků, karusel, podpora pro velikost celé obrazovky;
  • Vertikální rotátorové bannery, seznam snímků;
  • Podpora videa.

Demo | Stažení

PGWSLIDER - adaptivní posuvník jQuery / Zepto

Jediným úkolem tohoto pluginu je demonstrovat snímky obrázků. Je velmi kompaktní, protože velikost souborů jQuery je pouze 2,5 kb, což vám umožní vkládat opravdu rychle:

  • Adaptivní uspořádání;
  • SEO optimalizace;
  • Podpora s různými prohlížeči;
  • Jednoduché přechody obrazu;
  • Velikost archivu je pouze 2,5 kb.

Demo | Stažení

JQuery vertikální zprávy jezdec

Flexibilní a užitečný jQuery-posuvník, určený pro zpravodajské zdroje se seznamem publikací na levé straně a uzavření obrazu vpravo:

  • Adaptivní design;
  • Sloupec spínání vertikální zprávy;
  • Rozšířené titulky.

Demo | Stažení

Wallop jezdec.

Tento posuvník neobsahuje jquery, ale chtěl bych to představit, protože je velmi kompaktní a umožňuje výrazně zkrátit dobu pro stahování stránek. Dejte mi vědět, jestli se vám to líbí:

  • Adaptivní uspořádání;
  • Jednoduchý design;
  • Různé možnosti měnících se snímků;
  • Minimální kód JavaScriptu;
  • Velikost pouze 3kb.

Demo | Stažení

Ploché polaroid galerie

Galerie ve stylu rozptýlených na tabulce dokumentů s flexibilním uspořádáním a krásný design Musí mít zájem mnoho z vás. Vhodnější pro tablety a velké displeje:

  • Adaptivní jezdec;
  • Design bytu;
  • Náhodná změna skluzavek;
  • Plný přístup ke zdrojovému kódu.

Demo | Stažení

A-jezdec.

Demo | Stažení

Hislider - HTML5, JQuery a Wordpress Posuvník

Hislider zavedl nový ZDARMA JQUAGE SIDER plugin, se kterým můžete vytvořit různé obrazy galerie s fantastickými přechody:

  • Adaptivní jezdec;
  • Nevyžaduje znalosti programování;
  • Několik úžasných šablon a kůže;
  • Krásné přechodové efekty;
  • Podpora pro různé platformy;
  • Kompatibilita s WordPress, Joomla, Drupal;
  • Schopnost zobrazit obsah různých typů: obrázky, videa YouTube a Videa Videa;
  • Flexibilní nastavení;
  • Užitečné další funkce;
  • Neomezený objem zobrazeného obsahu.

Demo | download

Wow jezdec.

Wow jezdec je adaptivní jquery jezdec Snímky s úžasem vizuální efekty (domino, obrat, rozostření, převrat a flash, odlet, žaluzie) A profesní šablony.

Wow jezdec je dodáván s průvodcem instalací, což vám umožní vytvářet fantastické posuvníky během několika vteřin bez nutnosti pochopit kód a úpravy obrázků. K dispozici také pro stahování verze plug-in Joomla a WordPress:

  • Plně adaptivní;
  • Podpora pro všechny prohlížeče a všechny typy zařízení;
  • Podpora smyslových zařízení;
  • Jednoduchá instalace na WordPress;
  • Flexibilita v nastavení;
  • SEO-Optimalized.

Demo | download

Nevo jezdec - volný jquery-plugin

Slider NIVO je známým celým světem jako nejkrásnější a snadno použitelný obrazový posuvník. Plugin nevo jezdec je volný a je vydán pod licencí MIT:

  • Jquery 1.7 a vyšší;
  • Krásné přechodové efekty;
  • Jednoduché a flexibilní v nastavení;
  • Kompaktní a adaptivní;
  • Otevřený kód;
  • Mocný a jednoduchý;
  • Několik různých šablon;
  • Automatický oříznutí obrazu.

Demo | download

Jednoduchý jquery jezdec s technickou dokumentací

Myšlenka byla inspirována apple posuvníky, ve kterých několik malých prvků může létat s různými animačními efekty. Vývojáři se snažili tento koncept ztělesnit s ohledem na minimální požadavky Chcete-li vytvořit jednoduchý návrh internetového obchodu, ve kterém jsou prvky "Odchod" různé kategorie:

  • Adaptivní uspořádání;
  • Minimalistický design;
  • Různé účinky ztráty a posunů diapozitivů.

Demo | download

JQuery Image jezdec

Velmi jednoduchý posuvník, který zabírá 100% šířky stránky a přizpůsobuje se velikosti obrazovek mobilních zařízení. Pracuje s CSS přechodem a obrazy "fit" se zvířaty. Kotva může být vyměněna nebo vymazána, pokud nechcete svázat odkaz na obraz.

Při instalaci se posuvník rozvíjí na 100% šířce obrazovky. To může také automaticky snížit velikost snímků snímků:

  • Adaptivní jquery -slider;
  • Plná velikost;
  • Minimalistický design.

Demo | download

Elastický obsah jezdec + mít

Elastický obsah Slidener automaticky upraví šířku a výšku v závislosti na velikosti rodičovského prvku. Jedná se o jednoduchý jquery jezdec. Skládá se z posuvné zóny výše a panely navigačních záložek na dně. Posuvník nastavuje jeho šířku a výšku podle velikosti nadřazeného kontejneru.

Při prohlížení na malých obrazovkách šikmo jsou navigační karty změněny na malé ikony:

  • Adaptivní design;
  • Přejděte pomocí kliknutí myší.

Demo | download

Zdarma 3D Slovník jezdec

Experimentální posuvník, procházky obrázků ve 3D. Dva zásobníky se podobají zásobníkům papíru, z nichž při posouvání obrázku se zobrazí ve středu posuvníku:

  • Adaptivní design;
  • Flip-transformace;
  • 3D efekty.

Demo | download

Posuvník štěrbiny na základě JQuery a CSS3 + Manual

Z příručky se naučíte, jak vytvořit jezdec s zvýrazněním: myšlenkou je "Cut" a zobrazit aktuální snímek v tomto formuláři, zatímco otevřete následující nebo předchozí snímek. Použití jQuery a CSS - animace, můžeme vytvořit jedinečné přechodové efekty:

  • Adaptivní design;
  • Rozdělit přechod;
  • Posuvník celé obrazovky.

Demo | download

UNILIDER - velmi malý jquery jezdec

Žádné zbytečné měchy a označení, velikost menší než 3kb. Použijte libovolný kód HTML pro diapozitivy, rozbalte jej pomocí CSS. . Všechny související s nepříznutím se nachází na GitHub:

  • Podpora pro různé prohlížeče;
  • Podpora klávesnice;
  • Nastavení výšky;
  • Adaptivní design;
  • Podpora smyslového vstupu.

Demo | Stažení

Minimální citlivé snímky

Jednoduchý a kompaktní plugin ( velikost pouze 1 kb), který vytváří adaptivní posuvník pomocí prvků uvnitř nádoby. OdpovědiLides.js funguje S. velké množství Prohlížeče, včetně všech verzí IE z IE6 a vyšší:

  • Plně adaptivní;
  • Velikost 1 kB;
  • CSS3 přechody s možností spuštění přes JavaScript;
  • Jednoduchý znak pomocí označeného seznamu;
  • Schopnost konfigurovat efekty přechodů a trvání prohlížení jednoho snímku;
  • Podporuje schopnost vytvářet několik prezentací;
  • Automatické a ruční rolování.

Demo | download

Kamera - volný jquery jezdec

Fotoaparát je plugin s množstvím přechodových efektů, adaptivní rozložení. Jednoduché v nastavení, podporované mobilními zařízeními:

  • Plně adaptivní design;
  • Podpisy;
  • Schopnost přidat video;
  • 33 různých barev ikon.

Demo | download

Systémyjs, adaptivní jquery plugin

SLIDESJS je adaptivní plugin pro jQuery (1.7.1 a výše) s podporou smyslových zařízení a přechodů CSS3. Experimentujte s ním, zkuste více připravených příkladů, které vám pomohou zjistit, jak přidat SLIDESJS do vašeho projektu:

  • Adaptivní design;
  • CSS3 -Productions;
  • Podpora smyslových zařízení;
  • Jednoduché v nastavení.

Demo | Stažení

BX JQuery jezdec.

Jedná se o bezplatný adaptivní jQuery jezdec:

  • Plně adaptivní - přizpůsobení jakékoli zařízení;
  • Horizontální, vertikální změna skluzavek;
  • Slide mohou obsahovat obrázky, video nebo html -content;
  • Rozšířená podpora pro smyslová zařízení;
  • Použití CSS-transformací pro animaci snímků ( hardwarová akcelerace);
  • Zpětné volání API a plně veřejné metody;
  • Malá velikost souboru;
  • Snadná implementace.

Demo | download

Flexslider 2.

Nejlepší adaptivní jezdec. Nová verze Bylo dokončeno zvýšit rychlost práce, kompaktnost.

Demo | Stažení

Galleria - adaptivní fotogalerie založená na JavaScriptu

Galleria se používá na milionech stránek vytvořit galerii snímků ve vysoké kvalitě. Počet pozitivních recenzí o její práci jednoduše rohlíky:

  • Zcela volný;
  • Režim zobrazení obrazovky;
  • 100% adaptivní;
  • Není vyžadován programovací zkušenost;
  • Podpora iPhone, iPad a dalších dotykových zařízení;
  • Flickr, Vimeo, YouTube a mnoho dalšího;
  • Několik témat.

Demo | Stažení

Borůvkový - jednoduchý adaptivní jquery image jezdec

Představuji vám jquery-posuvník obrázků, napsané speciálně pro adaptivní web design. Blueberry je experimentální plugin open source obrazu jezdce, který byl napsán speciálně pro práci s adaptivními šablonami.

4. listopadu 2019 Nahrávání bylo aktualizováno

Yury Němčina

Posuvníky při čistém CSS + Bonus Slider

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. CSS3 miniaturní jezdec

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. Posuvník na 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í posuvník 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:

Výstup

S pomocí posuvníků můžete krásně navrhnout grafické galerie umístěním více kompaktněji, vložte jezdec na první obrazovce (část stránky, která je viditelná bez posouvání) prodávat stránku, aby se návštěvníky okamžitě ukázaly hlavní výhody obdrží. Stále můžete najít hodně cesty, kde můžete použít posuvníky, ale jedna věc je přesně jasná - jsou přínosem s řádným použitím.

Body, které byly v článku přezkoumány.

Ahoj všichni. Velmi skvělý posuvník Chci předložit vaši pozornost. OOO ... Dívám se na tebe úplně zapomněl na mě. Ano, ano, už jsem byl pryč, pravděpodobně po dobu šesti měsíců nebo rok a já naprosto nevím, jak se každý den stanovit každý den (i když je to naprosto reálné). No, dobře, ne o tom teď řeč. Posuvník je zajištěn Tympanus Codrops a pracuje na HTML5, CSS3 a TweenMax.js.

Posuvník se točí doleva vpravo a ne shora dolů, ale diagonálně. Navigační šipky jsou umístěny v levém horním rohu a vpravo dole. Navigace se provádí také stisknutím previ vpravo a vlevo. Všechna animace je velmi hladká a pracuje ve všech moderní prohlížeče. Každý jednotlivý prvek posuvníku má vlastní stránku, která se otevírá při stisknutí. Stránka má fotografii, titul a text.

Posuvník je ideální pro galerii, umělci portfolia, fotograf, sochař, stručně, každá osoba, která se zabývá tvůrčími aktivitami a má díla, které chce ukázat na stránkách. Galerie na místě muzea, výstava bude vypadat dobře.

Připojení galerie

Připojte galerii nebude obtížná

Stáhnout soubory

Nejprve je třeba stáhnout zdroje z mých stránek pro přímý odkaz. Z archivu musíte nalít do kořene stránky IMG, CSS a JS složky

Připojte soubory CSS a JS

Pak připojte skripty a styly. Styly jsou připojeny přidáním značky další kód

a skriptuje stránku na závěrečnou značku

Přidejte jezdec na stránku

Za prvé, přidejte navigaci na vrchol webu

a pak jezdec sám

Vzpomínky a myšlenky.
1

Automatizace

Náhodný potulu
2

Stroje.

Libovolná slova.
3

SOUŽITÍ

Jediný průvodce je vaše srdce

Strašidelný drift.
4

Bellamio.

Zábava Diverge.
5

Pastviny.

Doufá a sny.
6

Soustředit se

1

Automatizace

Strom musí být vaším přítelem, pokud jste ho udělali

Nechte to stát. Nechali jsme to provést přímo z našich myslí. Stačí relaxovat a nechat to proudit. To snadné. Nechť v našem světě dát nějaké šťastné mraky. Je to velmi chladný obraz, možná musím jít do kabátu. Chystáte se mě zmrazit k smrti. To bude šťastná malá přímořská krajina. Dovolte se sem jít nahoru, a začít se nějakou zábavu nejméně trochu může udělat tolik. Pracujte jednu věc najednou. Don "T se unese - máme dostatek času. Dejte své pocity do toho, vaše srdce, to je váš svět. Tyto stromy jsou tolik legrace. Začínám na nich a já mám těžké zastavení.
2

Stroje.

To je pravděpodobně největší věc, která se stane v mém životě

Jsme se snažíme o kopírování. My "RE JUST TECHA TEACH TECHNIKATEM, pak vám dovolte, abyste se dostali do světa. Teď jsme chmýříme tento mrak. Nemáme nic jiného než šťastné stromy. Udělejme to znovu. Použijte to, co vidíte, nedovolte to. Dovolte se sem jít nahoru, a začít se nějakou zábavu nejméně trochu může udělat tolik. Pracujte jednu věc najednou. Don "T se unese - máme dostatek času. Dejte své pocity do toho, vaše srdce, to je váš svět. Tyto stromy jsou tolik legrace. Začínám na nich a já mám těžké zastavení.
3

SOUŽITÍ

Jediný průvodce je vaše srdce

Dovolte se sem jít nahoru, a začít se nějakou zábavu nejméně trochu může udělat tolik. Pracujte jednu věc najednou. Don "T se unese - máme dostatek času. Dej své pocity do toho, vaše srdce, je to váš svět. Tyto stromy jsou tolik legrace. Začínám na nich a já mám těžké zastavení. Ale my jsme tam ještě "t Starat se o to. Dovolte se tady nějaké šťastné mraky. Co ďábel. Tenká barva se bude držet tlusté barvy. Budu míchat trochu barvu.
4

Bellamio.

Jediným předpokladem je, že to dělá radost

Vidět. Vezmeme roh štětce a necháme ho hrát back-and-Forth. To je neplánováno, to se opravdu stane. Já "M-MAGT SOFTY, MŮŽE" T SHOIN BAMBI kromě fotoaparátu. Myslím, že jsem trochu divný. Rád mluvím se stromy a zvířaty. To je v pořádku; Mám zábavnější než většina lidí. Dnes si hrajeme s mraky. "Ti víš, že jsi měl tolik moc? Můžete přesouvat hory. Můžete něco udělat. Dovolte se sem jít nahoru, a začít se nějakou zábavu nejméně trochu může udělat tolik. Pracujte jednu věc najednou. Don "T se unese - máme dostatek času. Dejte své pocity do toho, vaše srdce, to je váš svět. Tyto stromy jsou tolik legrace. Začínám na nich a já mám těžké zastavení.
5

Pastviny.

Dovolte se sem jít zábavně a začněte se pobavit

Tak často se vyhýbáme tekoucí vodě a tekoucí voda je hodně zábavy. Každý se chystá vidět věci jinak - a to znamená, že by to mělo být. Velký silný strom potřebuje velké silné kořeny. Steve chce odrazy, takže ho nechte odrazovat. Nemáme "t spáchat. Právě tady hrajeme. Děláme všechny ty malá mučení, které žijí v oblacích. Nechť sem jít nahoru, a začít se pobavit, nejméně trochu může udělat tolik. Pracovat na jedné věci najednou. Don "t si unese - máme dostatek času. Dejte své pocity do toho, vaše srdce, je to váš svět. Tyto stromy jsou tolik legrace. Začínám na nich a já mám těžké zastavení.
6

Soustředit se

To je neplánováno, to se opravdu stane

Ale my jsme tam ještě ne, takže se o to nemůžeme starat. Teď se nechte dát nějaké šťastné málo mraků. Co ďábel. Tenká barva se bude držet tlusté barvy. "Mám smíchat trochu barvu. Budeme používat van Dyke hnědé, trvalé červené a trochu pruské modré. Dovolte se sem jít nahoru, a začít se nějakou zábavu nejméně trochu může udělat tolik. Pracujte jednu věc najednou. Don "T se unese - máme dostatek času. Dejte své pocity do toho, vaše srdce, to je váš svět. Tyto stromy jsou tolik legrace. Začínám na nich a já mám těžké zastavení.

To je vše. Posuvník je připraven! Hodně štěstí v práci

Zdravím vás znovu na blogu. Dnes v CSS, díky novým selektorům, tam byla příležitost, aby byl posuvník bez skriptů. Takže v tomto článku vám ukážu, jak udělat adaptivní posuvník na CSS3?

Plán lekce

Takže dnes vám ukážu velmi podrobně, jak vytvořit svůj vlastní posuvník bez skriptů, přizpůsobit se jakýmkoliv zařízením a snadno změnit svůj vzhled v budoucnu, stejně jako přidat nové snímky. Uděláme pouze 3 diapozitivy, které budou přepínat ručně při kliknutí na tlačítka. Začněme!

Označení jezdce

Především je nutné pochopit, co bude značka. V tomto snímku můžete vidět můj příklad označení, podle ní a budu pracovat dnes.
Také duplikujeme celý tento kód, abyste mohli kopírovat a vložit.
Nejdříve musíte vytvořit tlačítka posuvných přepínačů. Vzhledem k tomu, že snímek bude tři, pak to samé potřebuje tlačítka:

Každý obdrží svůj vlastní jedinečný identifikátor a ve výchozím nastavení je vybrán.

Poslední kód, který potřebujeme. Zobrazuje podpisy k tlačítek, ale ve skutečnosti je používáme, aby se skryli výchozí tlačítka (přepínače tlačítka nejsou prováděna prostřednictvím stylů) a vložte tyto bloky, které lze vydat místo nich. Je to oni, kteří budou sloužit jako přepínače tlačítka a balíček s rádiovými tlačítky se provádí pomocí speciálního atributu formuláře.

A nyní musí být všechny tento kód zabalen do jednoho společného kontejneru. Nechte to být blok s obalovou třídou.

Začneme vytvářet jezdec - počáteční styly pro stránku

Nejdříve nastavíme společné styly, které pomohou resetovat všechny výchozí odrážky a zároveň provést vnitřní odrážky a rámce zohledněny v šířce prvků. To se děje takto:

* {
marže: 0;
Polstrování: 0;
-WebKit-box-dimenzování: hraniční box;
-Moz-box-dimenzování: hraniční box;
-O-box-dimenzování: hraniční box;
Box-dimenzování: hraniční box;
}

Mimochodem, * - znamená všechny selektory. To je takový univerzální a globální volič.

Zdobíme kontejner. Je to samotný blok, který obsahuje všechny 3 z našich důležitých částí - tlačítka, skluzavky a podpisy.

Zábal (
Výška: 350px;
Marže: 0 auto;
Pozice: Relativní;
šířka: 600px;
}

Šířka a výška můžete vystavovat KdokolivV závislosti na tom, jaké velikosti budou vaše fotografie pro snímky. Ořízl fotografie předem na velikost 600 na 350 pixelů, proto tyto rozměry specifikuji. Okraj: 0 Auto Lines Kontejner přesně ve středu stránky a relativní polohování vám umožní přesně umístit tlačítka v kontejneru později.

Nakreslíme jezdec a diapozitive

Zpočátku jsou zde takové styly:

Posuvník (
Barva pozadí: # 999;
Výška: dědic;
Přetečení: skryté;
Pozice: Relativní;
šířka: dědic;
}

Ukazujeme posuvník je stejná šířka a výška, stejně jako společný kontejner. Zadáváme také barvu a polohování a vlastnost přetečení: skryté řezy vše, co nespadají do bloku.

Příští případ musí být vydáván samotné diapozitivy:

Diapozitáře (
Výška: dědic;
Krytí: 0;
Pozice: absolutní;
šířka: dědic;
Z-index: 0;
}
.Auto1 (pozadí obrázku na pozadí: URL (bmw.jpg);)
.Auto2 (pozadí obrázku: URL (Audi.jpg);)
.Auto3 (obrázek pozadí: URL (PORSHE.jpg);)

Také označují šířku a výšku, jako je snímek. Hodnota dědic umožňuje zdědit hodnotu nadřazeného bloku. Pomocí vlastností Z-indexu a opacity budeme dělat naše obrázky neviditelné. Níže jsme jasně předepisovali obrázky na pozadí.

Zatím uvidíme nic, jen šedé pozadí, protože naše obrázky jsou skryté.

Zdobíme přepínače tlačítka

Nyní musíte namísto toho odstranit standardní rádiová tlačítka a stylizovat podpisy.

Zabalte\u003e vstup (
Displej: Žádný;
}

Odstraňujeme rádiová tlačítka.

Zábal .control (
Pozice: absolutní;
marže vlevo: -50px;
Vlevo: 50%;
}

S pomocí těchto stylů budeme vycentrovat blok s knoflíky v centru.

Zabalený štítek (
Kurzor: ukazatel;
Displej: inline-blok;
Výška: 25px;
marže: 10px;
Pozice: Relativní;
šířka: 25px;
Hranice: 2px pevná šedá;
Poloměr hranic: 30% / 10px;
}

Tyto styly dělají velmi důležitou věc - dovolují nám vydat tlačítka. Musíte nastavit velikost tlačítek, nastavte pro ně blokovou malou písmeno, odsazení a šedý rámeček. Můžete také přidat rohy zaokrouhlení.

Nyní máme tři tlačítka vycentrována pod skluzavky, je to jen šedý rám. Udělejme to tak, že když kliknete na tlačítko v něm, objevil se nějaký obraz, což znamená, že tlačítko je aktivní tento moment. Mimochodem, stejná technika, pouze s zaškrtávacími políčkami, zobrazuji v tomto článku.

Vzhledem k tomu, že budeme přepínat obrazy automobilu, našel jsem řídící ikonu v síti, snížil ji až na velikost asi 20 až 20. Nyní je případ moudrý - Přidání obrázku na pozadí na tlačítko, pokud byl kliknutý.

# Point1: Zaškrtnuta ~ .control Štítek: NT-typu (1),
# Point2: Checked ~ .CONTROL Štítek: NT-typu (2),
# Point3: Checked ~ .CONTROL Štítek: NT-typu (3) (
Pozadí: URL (Wheel.png) Ne-repeat 50% 50%;
}

To se provádí s takovými selektory. Co dělají? V podstatě se jedná o komplexní volič, zaznamenává se celý stav. To je něco podobného programování. Označuje následující: Pokud je vybráno přepínače, musíte použít styl na podpis, který jde někde v Markupu. Nyní, když kliknete na tlačítka, zobrazí se obraz volantu uvnitř!

Nejdůležitější fázi nutí přepínání!

Ve skutečnosti jsme nechali udělat trochu trochu. Jmenovitě, aby místo šedé oblasti v jezdci se objevily obrázky s automobily, které by se úspěšně odesílaly. Chcete-li to provést, musíte použít jeden složitější selektory:

# Point1: Checked ~ .slider\u003e .Auto1,
# Point2: Zkontrolováno ~ .slider\u003e .Auto2,
# Point3: Checked ~ .slider\u003e .Auto3 (
Opacita: 1;
Z-index: 1;
}

Co se děje? Pokud zkusíte jezdec v akci, bude to zcela fungovat. Díky těmto selektorům stanovíme následující: Pokud je stisknuto tlačítko rádia, proveďte požadovaný snímek, který leží někde na HTML kódu (další přepínač).

Když tedy kliknete na první tlačítko, zobrazí se nám vůz BMW, když kliknete na druhý - Audi, když kliknete na třetí - PORSHE. A po celou dobu při přepínání se v tomto tlačítku zobrazí ikona řízení, je snímek aktivní.

Takže jsme udělali jezdec. Zbývá to přizpůsobit.

Přizpůsobíme jezdec sledováním na mobilní zařízení

Zatímco náš jezdec má pevnou šířku 600 pixelů. Problémy se proto začnou objevovat na obrazovkách, menší než tato šířka. Zejména se objeví horizontální posuvník. Aby se tomu zabránilo, máme trochu upravit písemný kód. To je to, co potřebujete ke změně:

  1. Pro blokový blok, to znamená, že hlavní kontejner není šířka, ale max-šířka: 600px. To umožní kontejneru, aby se zmenšil, pokud se okno stane menší šířkou.
  2. Posuvník (posuvník) Je nutné registrovat šířku: 100%;
  3. SlideSh (snímky) nic nemění.

Celkové změny lze zobrazit v tomto kódu:

Zábal (
Max-šířka: 600px;
}
.slider (
šířka: 100%;
}

Skvělé, nyní zůstane zaregistrovat pár žádostí o média, aby byl posuvník plně adaptivní, stejně jako snímky pro nové obrazovky. Experimentální tím, že jsem zjistil, že snímek se nespustí na obrazovku přibližně o šířce okna v 600 pixelech. Takže, o tomto spiknutí a musíte se změnit ve stylech. Chcete-li to provést, napište první žádost o médii.

Mimochodem, podrobně napsal podrobně o mediálních dotazech a jejich aplikaci v tomto článku. Doporučuji vám, abyste se seznámili s tím, kdo nemá ponětí o adaptivní designu.

Na šířku 650 pixelů a méně bylo vše zobrazováno dobře, nabízím takovou změnu ve stylu:

Obrazovka @Media a (max-šířka: 650px) (
.wrap (
Max-šířka: 480px;
Výška: 280px;
}
.slides (
Velikost na pozadí: kryt;
}
}

Šířka samotného jezdce se sníží, výška se také sníží. Pro samotné diapozitivy jsme předepsali majetek, který váhal obrazy tak, že udržují jejich proporce zcela umístěny v posuvníku bez řezání současně.

Vynikající, nyní můžete zkontrolovat a ujistit se, že s šířkou méně než 650 pixelů je posuvník přeměněn a vypadá dobře, aniž by se snížil obraz.

Poslední bod je šířka asi 400 pixelů. Na něm se náš obraz začne umístit a musí podniknout kroky. Chcete-li to udělat, budu psát další žádost o médii:

Obrazovka @Media a (max-šířka: 400px) (
.wrap (
Max-šířka: 320px;
Výška: 180px;
}
.slides (
Velikost na pozadí: kryt;
}
}

Všechny stejné, pouze znovu sníží šířku a výšku kontejneru. Vynikající, teď je náš posuvník plně adaptivní! Dokonce i On. mobilní telefon S šířkou 320 pixelů bude vypadat skvěle. Nicméně, viz sami:

Díky žádostům o médiích jsou obrazy úměrné snížení, při zachování jejich proporcí.

Při přechodech přidejte posuvné efekty

No, bonus v tomto článku můžete vidět pár efektů, které lze implementovat, když se vydáte na bloky. Je tedy dostačující vybrat si některý z nich a zapisovat snímky (.slides) a když se zobrazí obraz, zrušte efekt účinku. Chcete-li zobrazit výsledek, musíte nastavit snímky transformačního vlastnictví tak, aby přechody byly hladké. Příklad efekt:

Diapozitáře (
Transformace: otočení (50deg);
Přechod: 1S;
}

Nyní poměrně volič, který umožňuje viditelný snímek, zaregistrovat zrušení transformace:

# Point1: Checked ~ .slider\u003e .Auto1 (
Transformovat: žádný;
}

A tak pro všechny diapozitivy. V souladu s tím se zpočátku obraz bude otočen a bude neviditelný, a když se zdá, účinek hladkého návratu počáteční pozice. V souladu s tím můžete přijít s efekty. No, udělali jsme jezdec, mám to všechno. Máte-li dotazy, čekáte v komentářích.

Doplněk - jak to udělat tak, že když kliknete na snímek, přechod svázaný s kluzným článkem?

Jinými slovy, jsme teď jen obrázky a jak je udělejte klepnutím na tlačítko. Chcete-li to udělat, musíte mít na této lekci připravený posuvník. Dále potřebujete najít kus v HTML kódu, který je zodpovědný za snímky. Zde je v Screenshot:

Jak vidíte, vložil jsem do prvního a druhého kluzného spojení. Když tedy kliknete na první snímek, dojde k přechodu na Google při kliknutí na druhý - na Yandex. Chci poznamenat, že odkaz se otevře ve stejném okně, tj. Aktuální stránka s posuvníkem v tomto případě zmizí. Pokud potřebujete otevřít odkazy ze snímků v novém okně, každá značka Musíte přidat cíl atributu. \u003d "_blank".

Ale není to všechno, co musíte udělat! Nyní nefunguje ještě tak, že obrázky se klikly, musíte přidat do CSS, to je to, co:

Diapozitivy a (
Displej: blok;
šířka: 100%;
Výška: 100%;
}

To znamená, že pro všechny diapozitivy děláme odkaz na blokový prvek a poukazují na to šířku a výšku 100%, takže zabírá celý prostor obrazu. Nyní by mělo všechno fungovat, můžete zkontrolovat. Stačí nahradit adresy do odkazů a můžete použít. Doufám, že jsem co nejlépe vysvětlil.

Zvýšit svou pozornost: Všichni chceme posílat své stránky na spolehlivém hostování. Analyzoval jsem stovky hostin a našel nejlepší - Hostiq. V síti stovky pozitivní zpětná vazba O něm, průměrné hodnocení uživatele - 4.8 z 5. Nechte své stránky v pořádku.

Podobné články