HTML5 adaptív csúszka. Hogyan készítsünk egy adaptív csúszkát a CSS3-on? Adaptív csúszka a CSS3-on

Az egyik hatékony utak A felhasználók figyelmének felkeltése az oldaloldalon egy mozgó animáció létrehozása. Az animációs elemek segítenek jobban elmondani nekünk és megmutatják a felhasználókat a termékről. Utolsó alkalom, az utazó panelek nagy népszerűséget kaptak, valamint számos más hatás, amely megjelenik a kép görgetése vagy megnyomásakor. Ők is ismert csúszkák, karusszel és távozó panelek. Ez a cikk az adaptív karusszel típusú csúszka létrehozását tárgyalja, az automatikus szerződés zökkenőmentes hatásával.

Ma a hálózat több száz vélemény a referenciák kész megoldásokat, de a legtöbbjük tartalmaz sok kihasználatlan funkciók, amelyek jelentősen csökkentik a teljesítményt a csúszka, valamint lassítja a helyszínen rakodás egészére. A professzionális webfejlesztők mindig megpróbáltak rugalmasnak lenni a beállításban szoftvertermékek, további könyvtárak és bővítmények alacsony küszöbértékével. Ezért a parancsfájlunk munkája minimális követelményeket foglal magában egy ilyen csúszka szervezésére. A munkafunkció lehetővé teszi a kapcsolási intervallum, a sebesség, valamint az adott dia kiválasztását. Az alábbiakban egy sor állandó, szabályozza a csúszka munkáját.

timelista. - csúsztassa a kapcsolási sebességet

TimeView. - Az idő

Radiobut. - Gombok a dia alatt, gyors navigáció érdekében. Alapértelmezés szerint igazi érték, ha hamis, akkor a gombok eltűnnek.

És most kezdjük el! A fájl létrehozása és megnyitása index.htm.

A benyújtott kódban, amint nem látunk semmit bonyolult, slider-wrap. Meghatározza tábornok És vonja a csúszkát a képernyő közepén. Paraméter aktív csúszda. Beállítja a kép méretét és magasságát a hossza szerint. ÉS csúszka. Csak aktív képet jelenít meg.

Most hozza létre és nyissa meg a fájlt. style.css. és sírva a jelölést, amire szükségünk van:

@Import URL ("https://fonts.googleapis.com/css?family\u003dOpen+sans |roboto"); Test (szín: # 4f4f5a; font-face: "roboto", sans-serif; betűméret: 16px; Padding: 0; margó: 0;) # csúszkás csomagolás (max-szélesség: 800px; Margin-Top: 80px;) # Active-Slide (szélesség: 100%, kijelző: táblázat; pozíció: relatív; túlcsordulás: rejtett; webkit-felhasználó-válasszon: nincs; -moz-felhasználó-válasszon: nincs; User-Select: None; -o-felhasználó-válasszon: nincs; felhasználó-kiválasztás: nincs;) #slider (pozíció: relatív; szélesség: Calc (100% * 4); Top: 0; balra: 0; margó: 0 ; Padding: 0, -webkit-átmenet: 1s; -O-átmenet: 1S; Átmenet: 1S; -Hebkit-átmenet-időzítés funkció: Könnyű-extion-Timing-funkció: Könnyű-in-out -Out; átmenet-időzítés-funkció: könnyű-in-out;) .slide (szélesség: Calc (100% / 4); Lista-stílus: nincs; kijelző: inline, úszó: balra; 100%;) .radio-gomb (Margin-Top: 10px; Text-Align: Center, Center;) .radio-de .ctrl-select (Margin: 2px; kijelző: inline-blokk; szélesség: 16px; magasság: 16px, túlcsordulás : rejtett; szöveges francia bekezdés: -9999px; Háttér: URL (Radiobg.p Ng) központ alsó nem ismétlése; ) .Radio-de .ctrl-Select: Hover (kurzor: mutató, Háttér-pozíció: középközpont;) .radio-de .ctrl-select.activeve (háttérbeállító: középső felső;) #Pewbutton, #nextButton : blokk; szélesség: 40px; magasság: 100%; pozíció: abszolút; Top: 0, túlcsordulás: rejtett, szöveges francia bekezdés: -999px; Háttér: URL ("arrowbg.png") bal központja ; Z-index: 3; vázlat: Nincs! Fontos;) #Prewbutton (balra: 10px;) #nextButton (jobb: 10px; háttér: url (arrowbg.png) jobbközpont nem ismétlődő;) # NextButton: Hover (Opacity: 1;)

A stílus stílusában slider-wrap. Propszártti szélesség. – maximális hossza Képeid.

A stílus stílusában #Slider (szélesség: Calc (100% * 4);) és .Slide (Szélesség: Calc (100% / 4);) Adja meg a képek számát a csúszka. Példánkban 4.

Ha a nyilak előre / vissza a csúszka láthatóságához láthatatlanok, akkor megjelennek, amikor lebegnek. Ehhez paraméterekben pREWBUT. és nextBut., Állítsa be az Opacity tulajdonság értékét 0.

Most hozza létre és nyissa meg a fájlunkat. slider.js.amelyben lesz csúszka kód. Ne felejtse el csatlakozni a jQuery könyvtárba.

$ (Dokumentum) .ready \u003d 700; var timeview \u003d 5000; var subrorooBut \u003d true; var slidenum \u003d 1; var slidetime, slidecount \u003d $ ("# csúszka .slide"). Hossz; VAR Animslide \u003d funkció (nyíl) (Slidetime); ha (nyíl \u003d\u003d "következő") (ha (slidenum \u003d\u003d slidecount) (slidenum \u003d 1,) más (slidenum ++) FordításWidth \u003d - $ ("# aktív-slide"). Width () * (Slidenum - 1); $ ("# csúszka"). CSS (("átalakítás": "Fordítás (" + Fordítás) + "px, 0)"));) más, ha (nyíl \u003d\u003d "priver") (Slidenum \u003d\u003d 1) (Slider \u003d Slidecount;) Else (Sliderum- \u003d 1) FordításWidth \u003d - $ ("# aktív csúszda"). Szélesség () * (Slidenum - 1); $ ("# #slider"). CSS (("Átalakítás": "Fordítás (" + Fordítás) + "PX, 0)"));) más (slidenum \u003d nyíl, fordítás) \u003d - $ ("# aktív-slide"). Szélesség () * (Slidenum) 1); $ ("# csúszka"). CSS (("Transform": "Fordítás (" + Fordítás) + "px, 0)");) $ (". Ctrl-select.active"); -Removeclass ( Aktív "); $ (". Ctrl-select "). EQ (Slidenum - 1) .adclass (" aktív ");), ha (Radiobut) (VAR $ LINKARRROW \u003d $ ("<>") .Prependto (" # Active-Slide "); $ (" # NEXTBUTTON "). Kattints (Funkció (), Hamis;))) $ (" # prewbutton "). Kattintson (funkció () (Animslide (" "); Hamis;)))) var adderspan \u003d" ", $ (". Slide "). Mindegyik (funkció (index) (AddersPan + \u003d" "+ index +""; }); $("

"+ Adderspan +"

"). .Apendto (" # Slider-wrap "); $ (". Ctrl-Select: Először "). Addclass (" aktív "); $ (". Ctrl-select "). Kattints (funkció (var gotonum \u003d parsefloat) ($ (ez) .text ()); Animslide (gotonum + 1);)); var pause \u003d false; var rotator \u003d funkció () (ha (! Szünet) (Slidetime \u003d Settileout (Animslide (" Következő ")), Timeview);)))) $ (" # csúszka-burkolat "). Hover (funkció (); szünet \u003d igaz;), Funkció () (szünet) (szünet \u003d hamis; rotator (); FALSE; VAR PREVX, $ (". SLIDE"). Mousedown (funkció (e) (\u003d true \u003d true, prevx \u003d e.clientx; $ (". Slide"). MouseUp (funkció () ;)); $ (dokumentum) .mouseup (funkció () (kattintás \u003d hamis,)); $ (". Slide"). Mousemove (függvény (e) (ha (ha (ha (e.clientX)< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX > Prevx) (animslide); cleartimeout (slidetime);) kattintás \u003d FALSE; )))); $ ("Dia"). Hover (). CSS ("kurzor", "mutató"); Rotátor (); ));

Funkció animslide. Háromféle értéket vesz igénybe: következő, feltünteti, numerikus értéket. A következő paraméter átvált a következő diát, Prew visszatér az előző, és a számérték egy határozottan megadott dia van kiválasztva a rádión keresztül slide gombok.

A bemutatott csúszka képeket használt a webes erőforrás https://pixabay.com/.

Ha hozzá kell adnia egy kiváló minőségű jquery-csúszkát a webhelyére, akkor ebben a cikkben megtalálja a szükséges bővítmények leírását. Annak ellenére, hogy a jQuery jelentősen egyszerűsítette a JavaScript-et. Még mindig szükségünk van a bővítményekre, hogy felgyorsítsuk a webdesign létrehozásának folyamatát.

Módosíthatunk néhány ilyen bővítményt, és új csúszkákat hozhatunk létre, amelyek sokkal többet válaszolnak webhelyünk feladatainak.

Más csúszkák esetében csak adjon hozzá fejléceket, képeket, és válassza ki a csúszkával ellátott diákok megváltoztatásának hatását. Mindezek a bővítmények kíséretében részletes dokumentációÍgy új effektek vagy funkciók hozzáadása nem lesz sok nehézség. Az eseményektől függően még a triggerek is megváltoztathatók, ha tapasztalt jquery programozó.

A legújabb trendek, például adaptív tervezése, nagyon fontos webes projektek, függetlenül attól, hogy végre egy bővítmény vagy script. Mindezek az elemek mindegyikünk nagyon rugalmasak. Mindent, ami 2014-ben történt, ebben a listában szerepel.

Jquery-csúszkák képek

Jssor Responsive Slider.

A közelmúltban találkoztam ezen a funkcionális jquery-kolder, és meg tudnám győzni az elsőt, hogy megbizonyosodjon róla, hogy nagyon jól működik a munkájával. Korlátlan lehetőségeket tartalmaz, amelyek a csúszka nyílt forráskódú kódexének rovására bővíthetők:

Adaptív kialakítás;
Több mint 15 beállítás;
A képváltás több mint 15 hatása;
Képek galériája, karusszel, teljes képernyős méretű támogatás;
Függőleges rotátor bannerek, diáklista;
Videó támogatás.

Demo | Letöltés

Pgwslider - adaptív jquery / zepto-alapú csúszka

A plugin egyetlen feladata a képek csúszkainak bemutatása. Nagyon kompakt, mivel a JQuery fájlok mérete csak 2,5 kb, ami lehetővé teszi, hogy valóban gyorsan betöltse:

Adaptív elrendezés;
SEO optimalizálás;
Különböző böngészők támogatása;
Egyszerű képmenetek;
Az archív méret csak 2,5 kb.

Demo | Letöltés

Jquery vertical hírek csúszka

Rugalmas és hasznos jQuery-csúszka, amelyet hírforrásokra terveztek, a bal oldali publikációk listájával és a jobb oldalon lévő kép megkötésével:

Adaptív kialakítás;
Függőleges hírkapcsoló oszlop;
Kiterjesztett címsorok.

Demo | Letöltés

Wallop csúszka.

Ez a csúszka nem tartalmaz JQUQUERY-t, de szeretném bemutatni, mivel nagyon kompakt, és lehetővé teszi, hogy jelentősen csökkentse az oldalak letöltésének idejét. Hadd tudjam meg, ha tetszik:

Adaptív elrendezés;
Egyszerű tervezés;
A csúszdák cseréjére szolgáló különböző lehetőségek;
Minimális JavaScript kód;
Csak 3kb méretű.

Demo | Letöltés

Lapos stílusú polaroid galéria

Galéria stílusában szétszórva a táblázatban a táblázatban, rugalmas elrendezéssel és gyönyörű design Számos érdeklődnie kell. A tabletták és a nagy kijelzők számára alkalmas:

Adaptív csúszka;
Lapos kialakítás;
A csúszdák véletlen változása;
Teljes hozzáférés a forráskódhoz.

Demo | Letöltés

A-csúszka.

Demo | Letöltés

Hislider - HTML5, jquery és wordpress csúszka kép

Hislider bevezetett egy új, ingyenes JQuery csúszka plugint, amellyel különböző galéria képeket készíthet fantasztikus átmenetekkel:

Adaptív csúszka;
Nem igényel a programozás ismeretét;
Több csodálatos sablon és bőr;
Gyönyörű átmeneti hatások;
Különböző platformok támogatása;
Kompatibilitás WordPress, Joomla, Drupal;
A különböző típusú tartalom megjelenítésének képessége: képek, YouTube-videók és videa videa;
Rugalmas beállítás;
Hasznos kiegészítő funkciók;
Korlátlan mennyiségű megjelenített tartalom.

Demo | Letöltés

Wow csúszka.

Wow csúszka van adaptív jquery csúszka Képek csodálatos vizuális effektek (domino, fordulat, elmosódás, puccs és vaku, indulás, vakok) és professzionális sablonok.

A Wow csúszka a telepítő varázslóval rendelkezik, amely lehetővé teszi, hogy fantasztikus csúszkákat hozzon létre másodpercek alatt, anélkül, hogy meg kell értenie a kódot és szerkeszteni a képeket. A plug-in Joomla és Wordpress verziójának letöltéséhez is elérhető:

Teljesen adaptív;
Minden böngésző és minden típusú eszköz támogatása;
Érzékszervi eszközök támogatása;
Egyszerű telepítés a WordPressen;
Rugalmasság a beállításban;
SEO-optimalizált.

Demo | Letöltés

Nivo csúszka - ingyenes jquery-plugin

A Nivo csúszka az egész világon ismert, mint a legszebb és könnyen használható képcsúszda. A NIVO Slider plugin ingyenes, és az MIT Licenc alatt szabadul fel:

1,7 és annál magasabb jquery;
Gyönyörű átmeneti hatások;
Egyszerű és rugalmas a beállításban;
Kompakt és adaptív;
Nyitott kód;
Erőteljes és egyszerű;
Több különböző sablon;
Automatikus kép vágás.

Demo | Letöltés

Egyszerű jquery csúszka műszaki dokumentációval

Az ötletet az Apple Sliders ihlette, amelyben több kis elem különböző animációs hatásokkal repülhet. A fejlesztők megpróbálták megtestesíteni ezt a koncepciót minimális követelmények Az online áruház egyszerű kialakításának megteremtése, amelyben a "távozó" elemek különböző kategóriák:

Adaptív elrendezés;
Minimalista kialakítás;
A csúszdák elvesztésének és eltolódásának különböző hatásai.

Demo | Letöltés

Teljes méretű jquery kép csúszka

Egy nagyon egyszerű csúszka, amely az oldal szélességének 100% -át foglalja el, és a mobil eszközök képernyők méretéhez igazodik. A CSS-átmenetekkel és az állatokkal "illeszkedik" képekkel működik. A horgony cserélhető vagy törölhető, ha nem akarja kötni a képet a képhez.

A telepítés során a csúszka 100% -os képernyőszélességgel bontódik fel. Automatikusan csökkentheti a diákok képeinek méretét is:

Adaptív jquery -slider;
Teljes méretű;
Minimalista kialakítás.

Demo | Letöltés

Elasztikus tartalom csúszka + van

A rugalmas tartalom slidener automatikusan beállítja a szélességet és a magasságot a szülőelem méretétől függően. Ez egy egyszerű jquery csúszka. Ez egy csúsztató zónából áll, és a navigációs lap paneleket az alján található. A csúszka a szélességét és magasságát a szülő tartály méretének megfelelően állítja be.

Amikor a kis képernyők átlósan megtekintésekor a navigációs lapok kis ikonokká válnak:

Adaptív kialakítás;
Lapozzunk az egérkattintással.

Demo | Letöltés

Ingyenes 3D Stack Slider

Kísérleti csúszka, 3D-s képek séta. Két halom hasonlítanak papírköteget, amelyből, ha görgetés a kép közepén látható a csúszka:

Adaptív kialakítás;
Flip-transzformáció;
3D-hatások.

Demo | Letöltés

A teljes képernyős csúszka a jQuery és a CSS3 + kézikönyv alapján

A kézikönyvből megtudhatja, hogyan lehet létrehozni egy csúszkát egy kiemeléssel: az ötlet a "vágás", és megjeleníti az aktuális dia ebben az űrlapon, miközben megnyitja a következő vagy előző képet. A jquery és a CSS - animáció használatával egyedi átmeneti hatásokat hozhatunk létre:

Adaptív kialakítás;
Osztott átmenet;
Teljes képernyős csúszka.

Demo | Letöltés

Unislid - nagyon kis jquery csúszka

Nincs szükségtelen fújtató és jelölés, kisebb, mint 3kb. Használjon bármilyen HTML kódot a diákhoz, bővítse azt a CSS használatával. . Mindez kapcsolódó személyenként található a Github:

Különböző böngészők támogatása;
Billentyűzet támogatás;
Magasság beállítása;
Adaptív kialakítás;
A szenzoros bemenet támogatása.

Demo | Letöltés

Minimális érzékeny diák

Egyszerű és kompakt bővítmény ( 1 kb méretű), amely adaptív csúszkát hoz létre a tartály belsejében lévő elemekkel. A válaszjelek.js működik S. nagy mennyiség böngészők, beleértve az IE6 és a fenti verzió minden verzióját:

Teljesen adaptív;
1 KB méret;
CSS3 Átmenetek az indítás lehetőségével a JavaScript segítségével;
Egyszerű jelölés egy megjelölt listával;
Az átmenetek hatásainak konfigurálása és egy csúszda megtekintési időtartama;
Támogatja a különböző diavetítés létrehozásának képességét;
Automatikus és kézi görgetés.

Demo | Letöltés

Kamera - ingyenes jquery csúszka

A kamera olyan plugin, amely sokféle átmeneti hatással, adaptív elrendezéssel rendelkezik. Egyszerű a telepítésben, mobileszközök által támogatott:

Teljesen adaptív kialakítás;
Aláírások;
A videó hozzáadása;
33 különböző színek ikonok.

Demo | Letöltés

Slidrojs, adaptív jquery plugin

A Slidrijs egy adaptív plugin a jQuery (1.7.1 és annál magasabb) a szenzoros eszközök és a CSS3 átmenetek támogatásához. Kísérletezzen vele, próbáljon meg több készenléti példát, amely segít megmutatni, hogyan kell hozzáadni a slidrijs-t a projekthez:

Adaptív kialakítás;
CSS3 -Productions;
Érzékszervi eszközök támogatása;
Egyszerű a beállításban.

Demo | Letöltés

BX JQuery csúszka.

Ez egy ingyenes adaptív jquery csúszka:

Teljesen adaptív - beállítja bármely eszközhöz;
Vízszintes, függőleges csúszdák változása;
A diákok tartalmazhatnak képeket, videót vagy HTML -Kontentet;
Extended Support az érzékszervi eszközökhöz;
A CSS-transzformációk használata a dia animációhoz ( hardveres gyorsítás);
Visszahívás API és teljesen nyilvános módszerek;
Kis fájlméret;
Könnyen megvalósítható.

Demo | Letöltés

FLEXSLIDER 2.

A legjobb adaptív csúszka. Új verzió A munka sebességének növelése érdekében véglegesítették, a tömörség.

Demo | Letöltés

Galleria - Adaptív fotóalbum JavaScript alapján

A Galleria-t több millió webhelyen használják, hogy kiváló minőségű képeket készítsenek. A pozitív vélemények száma a munkájáról egyszerűen tekercselt:

Teljesen szabad;
Teljes képernyős nézési mód;
100% adaptív;
Nem szükséges programozási tapasztalat;
Támogatja az iPhone, iPad és más érintőképernyős eszközöket;
Flickr, Vimeo, YouTube és még sok más;
Több téma.

Demo | Letöltés

Áfonya - egyszerű adaptív jquery kép csúszka

Bemutatom Önnek egy jquery-csúszkát, amelyet kifejezetten adaptív webdesignért írtak. Az áfonya egy nyílt forráskódú kép csúszka kísérleti bővítménye, amelyet kifejezetten adaptív sablonokkal dolgoztak.

November 4., 2019 A felvétel frissült

Yury német

Sliders a tiszta CSS + bónusz csúszka

A CSS csúszkáknak valamilyen előnye van a JavaScript csúszkáinak felett. Az egyik ilyen előny a letöltési sebesség. Nem csak a csúszkák képeit használják. nagyméretek (Ha nincs optimalizálás a különböző képernyők számára), akkor egy ideig letöltött szkriptek letöltésére is. De a cikkben csak a tiszta CSS csúszkákat fog látni.

Ezt találtam az oldalon a csúszkák témájában:

1. CSS3 kép csúszka

A csúszka a CSS-en, amely rádiógombot használ a navigáláshoz. Ezek a rádiómedencék csúszkák alatt vannak. A rádiómedencék mellett a navigációt a bal és jobb oldali shooter segítségével végzik. Ha nyomon követi, hogy milyen képet jelenít meg - a pszeudo-iskolákat használják: Ellenőrzött.

2. CSS3 miniatűr csúszka

Ellentétben a múltbeli csúszkával a CSS-en, itt az alján lévő rádiós medencék helyett az összes kép miniatűrjei, amelyek szintén kényelmesek a képgaléria létrehozásakor. A képeket egyfajta hatással cseréli: zökkenőmentesen eltűnik, miközben növekszik.

3. Galéria a CSS-en

De ez a csúszka a CSS-en tökéletes az oldalak értékesítésére. Rendszerint számos webfejlesztő a hitelezés (értékesítési oldalak értékesítése) kezdetén elején egy csúszkát helyez el, hogy az első képernyőn (görgetés nélkül) a látogató azonnal látta az ezen az oldalon található előnyöket. Ezenkívül ez a csúszka adaptív, ami is tetszik.

4. Slider a CSS-en linkek nélkül

Azonnal szeretném észrevenni, hogy ez a csúszka nem használ linkeket! Alapértelmezés szerint a fő kép (dia) mellett 2 több diák látható. A fő mögött helyezkednek el. A diákváltás gyönyörű módban fordul elő: Először a két diák mozog, és a csúszda lesz a központ, amely lesz a fő. Ezután a csúszda nő, és a többi előtt helyezkedik el.

5. Adaptív csúszka a CSS3-on

Egy másik adaptív csúszka, amelynek ellenőrzése radiokoptereken alapul. Látni, hogy ez a csúszka megnézi különböző eszközökah - Akkor akár önállóan módosíthatja a böngésző ablakot, vagy a csúszka oldalon vannak speciális ikonok különböző eszközök, amelyek kattintva látható lesz nézni egy csúszka a számítógépen, táblagépen vagy okostelefonon.

* bónusz csúszka *

Amellett, hogy minden olyan csúszkát, amelyet fent bemutatunk, szeretném, ha szeretne egy másikat. Ez a csúszka tökéletes a képgaléria létrehozásához. A szavak nem magyarázzák meg, mit csinál, így jobb, ha mindent megnézhet a videóban:

Kimenet

A csúszkák segítségével gyönyörűen tervezheti képgalériákkal, ha tömörül helyezzük el őket, helyezzen be egy csúszkát az első képernyőn (az oldal egy része, amely görgetés nélkül látható) az oldal eladása, hogy azonnal megmutassa a látogatókat az általa fog kapni. Még mindig sok módot találhatsz, ahol alkalmazhatsz csúszkákat, de az egyik dolog pontosan világos - a megfelelő használat mellett előnyös.

Pontokat, amelyeket a cikkben felülvizsgáltak.

Üdv mindenkinek. Nagyon hűvös csúszka szeretném bemutatni a figyelmet. Ooo ... Teljesen elfelejtettem rólam. Igen, igen, már elmentem, valószínűleg hat hónapig vagy egy évig, és abszolút nem tudom, hogyan lehet magának, hogy minden nap a cikken (bár teljesen valódi). Nos, oké, nem erről a beszédről. A csúszkát a Tympanus Codrops és a HTML5, a CSS3 és a Tweenmax.js szolgáltatásai biztosítják.

A csúszka nem forog balra, és nem felülről lefelé, de diagonálisan. A navigációs nyilak a bal felső sarokban és a jobb alsó sarokban találhatók. Ezenkívül a navigációt a jobb és bal oldali prevni megnyomásával végezzük. Minden animáció nagyon sima és jól működik mindenben modern böngészők. A csúszka minden egyes eleme saját oldalt nyit meg, amikor megnyílik a prések. Az oldal fotó, címe és szövege van.

A csúszka tökéletes a galéria, a művész portfóliója, fényképész, szobrász, rövid, minden olyan személy, aki részt vesz a kreatív tevékenységek és ő műveit akarja mutatni a helyszínen. A múzeum helyszínén található galéria jól néz ki.

A galéria összekapcsolása

Csatlakoztassa a galériát nem lesz nehéz

Fájlok letöltése

Először csak a forrásokat kell letöltenie a webhelyemről közvetlen linkre. Az archívumból az IMG, a CSS és a JS mappa helyének gyökerébe kell öntenie

Csatlakoztassa a CSS és a JS fájlokat

Ezután csatlakoztassa a szkripteket és stílusokat. A stílusok hozzáadásával kapcsolódnak hozzá Következő kód

és szkriniálja az oldalt a zárócímkéhez

Adjon hozzá egy csúszkát a webhelyre

Először adjunk hozzá navigálást az oldal tetejére

majd maga a csúszka

Emlékek és gondolatok.

Automatizálás.

Véletlenszerű barang

Gépek.

Tetszőleges szavak.

EGYÜTTÉLÉS

Az egyetlen útmutató a szíved

Kísérteties sodródás.

Bellamio.

Szórakoztató diverge

Legelők.

Reméli és álmokat.

Fókusz.

Automatizálás.

A fanak kell lennie a barátodnak, ha meg fogod festeni

Csak hagyd, hogy ez megtörténjen. Csak hagyjuk, hogy ez az áramlás közvetlenül az elménkből. Csak pihenjen és hagyja, hogy folytassa. Ez könnyű. Tegyünk néhány boldog kis felhők a világunkba. Ez egy nagyon hideg kép, talán meg kell mennem a kabátom. Arra van szükség, hogy halálra fagyassza le. Ez boldog kis tengeri kilátás lesz. Menj fel innen, és kezdjem meg szórakozni a legkevésbé kis bitet. Egyszerre dolgozzon egy dolgot. Don "T-t elviszi - rengeteg idő van. Tedd az érzéseidet, a szíved, ez a világod. Ezek a fák annyira szórakoztatóak. Elkezdtem őket, és nehéz időm megállni.

Gépek.

Ez talán a legnagyobb dolog az életemben

Mi nem próbáljuk meg másolni, hogy másoljon. Mi csak itt van egy technikát, majd hagyd el a világba. Most, hogy ezt a felhőt fogjuk pelyhesíteni. Nem lehet semmit, mint boldog fák itt. Tegyük meg újra. Használd azt, amit látsz, ne tervezd meg. Menj fel innen, és kezdjem meg szórakozni a legkevésbé kis bit. Egyszerre dolgozzon egy dolgot. Tedd az érzéseidet, a szíved, ez a világod. Ezek a fák annyira szórakoztatóak. Elkezdtem őket, és nehéz időm megállni.

EGYÜTTÉLÉS

Az egyetlen útmutató a szíved

Menj fel innen, és kezdjem meg szórakozni a legkevésbé kis bit. Egyszerre dolgozzon egy dolgot. Tedd az érzéseidet, a szíved, a te világod. Ezek a fák annyira szórakoztatóak. Elkezdtem rájuk, és nehéz időm megállni. De még nem vagyunk ott, így nem kell Aggódj róla. Most tegyünk néhány boldog kis felhőket itt. Mi a fene. Egy vékony festék ragaszkodik egy vastag festékhez. Egy kis színt fogok összekeverni.

Bellamio.

Az egyetlen előfeltétel az, hogy boldoggá tesz

Lát. Az ecset sarkát veszjük, és hagyjuk, hogy játsszon hátra-és-front. Ez nem tervezett, tényleg csak történik. Én egyfajta softy, nem tudtam lőni Bambi, kivéve a kamerát. Azt hiszem, egy kicsit furcsa vagyok. Szeretnék beszélni a fákkal és az állatokkal. Ez azonban rendben van; Több szórakozást kapok, mint a legtöbb ember. Napjainkban felhőkkel játszunk. Nem tudod, hogy sok hatalom van? Mozgathatsz a hegyeket. Bármit tehetsz. Menj fel innen, és kezdjem meg szórakozni a legkevésbé kis bit. Egyszerre dolgozzon egy dolgot. Tedd az érzéseidet, a szíved, ez a világod. Ezek a fák annyira szórakoztatóak. Elkezdtem őket, és nehéz időm megállni.

Legelők.

Menj fel ide, hogy szórakozz, és kezdj szórakozni

Olyan gyakran elkerüljük a folyóvizet, és a folyó víz sok móka. Mindenki másképp látni fogja a dolgokat - és hogy ez az út, hogy legyen. Egy nagy erős fa nagy erős gyökereire van szüksége. Steve gondolatokat akar, így adj neki gondolatokat. Nem fogunk elkötelezni. Csak itt játszunk. Mindazokat a kis bolyhokat, amelyek a felhőkben élnek. Menj fel innen, és kezdjünk szórakozni, hogy a legkevésbé kevés lehet. Egy időben dolgozzon. Ne szálljon el - rengeteg időnk van. Tedd az érzéseidet, a szíved, a világod. Ezek a fák annyira szórakoztatóak. Elkezdtem rájuk, és nehéz időm megállok.

Fókusz.

Ez nem tervezett, hogy valóban csak történik

De még nincs ott, így nem kell aggódnunk. Most tegyünk néhány boldog kis felhőket itt. Mi az ördög. Egy vékony festék ragaszkodik egy vastag festékhez. Én egy kis színt fogok összekeverni. Használunk Van Dyke barna, állandó piros és egy kis porosz kék. Menj fel innen, és kezdjem meg szórakozni a legkevésbé kis bit. Egyszerre dolgozzon egy dolgot. Tedd az érzéseidet, a szíved, ez a világod. Ezek a fák annyira szórakoztatóak. Elkezdtem őket, és nehéz időm megállni.

Ez minden. A csúszka készen áll! Jó szerencsét a munkában

Üdvözlet újra a blogomon. Ma a CSS-ben, az új választóknak köszönhetően lehetőség volt arra, hogy szkript nélkül csúszkát készítsen. Tehát ebben a cikkben megmutatom, hogyan készítsek egy adaptív csúszkát a CSS3-on?

Tanterv

Tehát ma nagyon részletesen megmutatom, hogyan lehet létrehozni saját csúszkát szkript nélkül, adaptálhatja azt bármely eszközhöz, és könnyen megváltoztathatja a megjelenését a jövőben, valamint új diákat is. Csak 3 diát fogunk elérni, amely manuálisan kapcsolódik a gombok gombra kattintva. Nos, kezdjünk!

Jelölő csúszka

Először is meg kell érteni, hogy mi lesz a jelölés. Ebben a képernyőképen láthatja a jelölés példáját, aztán, és ma fogok dolgozni.
Azt is megismételtem ezt a kódot is, hogy másolhassa és beilleszthesse magát.
Először is, létrehoznia kell a diavetítés gombokat. Mivel a dia három lesz, akkor ugyanazok a szükségletek a gombok:

Mindegyik saját, egyedi azonosítót kap, és az egyik alapértelmezés szerint van kiválasztva.

Az utolsó kódot, amire szükségünk van. Megjeleníti az aláírásokat a gombokhoz, de valójában az alapértelmezett gombok elrejtése érdekében használjuk őket (a rádiógombok nem kerülnek végrehajtásra a stílusokon keresztül), és ezeket a blokkokat helyettesíthetik azok helyett. Azok, akik kapcsológombként szolgálnak, és a rádiógombokkal ellátott köteg egy speciális forma attribútumon keresztül történik.

És most minden kódot egy közös tartályba kell csomagolni. Legyen egy blokk a WRAP osztályú.

Elkezdjük létrehozni egy csúszkát - az oldal kezdeti stílusait

Tehát először, akkor állítsa a közös stílus, amely segít visszaállítani az összes alapértelmezett francia, és ugyanabban az időben, hogy a belső francia és keretek figyelembe venni szélessége az elemek. Ez így történik:

* {
Margó: 0;
Padding: 0;
-Webkit-box méretezés: Border-Box;
-Moz-box méretezés: Border-Box;
-O-box-méretezés: Border-Box;
Box-méretezés: Border-Box;
}

By the way, * - minden választót jelent. Ez egy ilyen univerzális és globális választó.

A tartályt díszítjük. Ez az a blokk, amely magában foglalja mind a 3 fontos részét - gombokat, diákokat és aláírást.

Wrap (
Magasság: 350px;
Margó: 0 Auto;
Pozíció: relatív;
Szélesség: 600px;
}

Szélesség és magasság, amit kimutathat BárkiAttól függően, hogy milyen méretű lesz a képek a diákok számára. Előzetesen 600 képpontos méretű képeket vágtam le, ezért megadom az ilyen méreteket. Margó: 0 Automatikus vonalak A tartályt pontosan az oldal közepén, és a relatív pozícionálás lehetővé teszi, hogy pontosan elhelyezi a gombokat a tartályba később.

Csúsztatunk és csúszdákat készítünk

Kezdetben itt vannak ilyen stílusok:

Csúszka (
Háttérszín: # 999;
Magasság: öröklés;
Túlcsordulás: rejtett;
Pozíció: relatív;
Szélesség: öröklés;
}

Azt mutatjuk, hogy a csúszka ugyanolyan szélesség és magasság, valamint egy közös tartály. Mi is a színt és elhelyezése, és a túlfolyó tulajdonság: Rejtett vágások mindent, ami nem esik a blokk.

A következő esetet ki kell adni a csúszdák maguk:

Diák (
Magasság: öröklés;
Opacity: 0;
Pozíció: abszolút;
Szélesség: öröklés;
Z-index: 0;
}
.Auto1 (háttérkép: url (bmw.jpg);)
.Auto2 (háttérkép: url (audi.jpg);)
.Auto3 (háttérkép: url (porshe.jpg);)

Azt is jelezze, hogy a szélesség és a magasság, mint a dia. Az örökös érték lehetővé teszi, hogy örökölje a szülő blokk értékét. A Z-index és az átlátszatlanság tulajdonságainak felhasználásával láthatatlanok lesznek képeinket. Az alábbiakban egyértelműen előírjuk a háttérképeket.

Eddig nem fogunk látni semmit, csak szürke háttér, mert a képek rejtve vannak.

A kapcsoló gombokat díszítjük

Most meg kell távolítania a szabványos rádiógombokat és stilizálni az aláírásokat.

Wrap\u003e Bemenet (
Kijelző: Nincs;
}

A rádiógombokat eltávolítjuk.

Wrap .Control (
Pozíció: abszolút;
margó-balra: -50px;
Bal: 50%;
}

Ezeknek a stílusoknak köszönhetően a blokkot a középpontban lévő gombokkal központosítjuk.

Wrap címke (
Kurzor: mutató;
Kijelző: inline-blokk;
Magasság: 25px;
Margó: 10px;
Pozíció: relatív;
Szélesség: 25px;
Határ: 2PX Szilárd szürke;
A határ sugara: 30% / 10px;
}

Ezek a stílusok nagyon fontos dolog - lehetővé teszik számunkra, hogy kiadja a gombokat. Be kell állítania a gombok méretét, állítsa be őket a blokk-kisbetűs típus, a francia bekezdések és a szürke keret. A kerekítő sarkokat is hozzáadhat.

Most három gombja van a csúszdák alatt, csak egy szürke keret. Tegyük meg, hogy ha rákattint a gombra, akkor néhány kép megjelent, jelezve, hogy a gomb aktív ebben a pillanatban. By the way, ugyanaz a technika, csak a jelölőnégyzetek, én megmutatom ebben a cikkben.

Mivel átkapcsoljuk az autó képeit, találtam egy kormányzási ikont a hálózatban, csökkentette a méretét mintegy 20-20. Most az ügy bölcs - adjon hozzá egy háttérképet a gombra, ha rákattintott.

# Point1: Ellenőrzött ~ .Control címke: nth-of típusú (1),
# Point2: Ellenőrzött ~ .Control címke: nth-of-type (2),
# Point3: Ellenőrzött ~ .Control címke: nth-of-type (3) (
Háttér: URL (kerék.png) Nem ismétlődő 50% 50%;
}

Ez az ilyen választókkal történik. Mit csinálnak? Lényegében ez egy komplex választó, egy teljes állapotot rögzítenek benne. Ez hasonló a programozáshoz. Ez jelöli a következőket: Ha a rádiógombot választotta, akkor a stílust az aláírásra kell alkalmaznia, amely valahol a jelölésben megy. Most, amikor rákattint a gombokra, megjelenik a kormánykerék képe!

A legfontosabb szakasz a kapcsolást kényszeríti!

Valójában elég kissé maradtunk. Nevezetesen, hogy a csúszka szürke területének helyett olyan képeket jelentettek, amelyek sikeresen elmozdultak. Ehhez egy összetett választékot kell alkalmazni:

# Point1: ellenőrzött ~ .slider\u003e .auto1,
# Point2: ellenőrzött ~ .slider\u003e .auto2,
# Point3: Ellenőrzött ~ .slider\u003e .auto3 (
Opacity: 1;
Z-index: 1;
}

Mi történik? Most, ha megpróbálod a csúszkát cselekedni, akkor teljesen meg fog működni. Ezekkel a választókkal megadjuk a következőket: Ha megnyomja a rádió gombot, tegye meg a kívánt csúszkát, amely valahol a HTML-kód (további rádiógombok) van.

Így az első gombra kattintva megjelenik egy BMW autó, amikor a második - AUDI-re kattint, a harmadik - Porshe-re kattintva. És ezúttal a váltáskor a kormány ikon jelenik meg ebben a gombban, a dia aktív.

Tehát csúszkát készítettünk. Továbbra is alkalmazkodni kell.

A csúszkát a mobileszközök megtekintésével igazítjuk

Míg a csúszka 600 képpontja van. Ennek megfelelően a problémák elkezdenek fordulni a képernyőn kevesebb, mint ez a szélesség. Különösen megjelenik a vízszintes görgetősáv. Ennek elkerülése érdekében van egy kicsit az írásbeli kód beállításához. Ez az, amit meg kell változtatni:

A burkolatblokkhoz, azaz a fő tartály nem szélesség, de max-szélesség: 600px. Ez lehetővé teszi, hogy a tartály zsugorodjon, ha az ablak kisebb lesz a szélességben.
Slider (csúszka) Regisztrálni kell a szélességet: 100%;
Slideesh (diák) nem változtat semmit.

A kódban teljes változtatás látható:

Wrap (
Max-szélesség: 600px;
}
.slider (
Szélesség: 100%;
}

Nagyszerű, most továbbra is regisztrál egy pár média kérés, hogy egy csúszka teljesen adaptív, valamint skála képek az új képernyők számára. Kísérletes, hogy kiderült, hogy a dia kép elindul, hogy ne illeszkedjen a képernyőn az ablak szélessége 600 pixelben. Szóval, erről a telken, és meg kell változtatnia a stílusokat. Ehhez írja be az első média kérését.

By the way, részletesen írtam a média lekérdezéseiről és alkalmazásukról ebben a cikkben. Azt tanácsolom, hogy megismerje magát vele, aki nem tudja az adaptív kialakításról.

Ennek megfelelően 650 pixel szélességére és kevesebb, hogy mindenki jól jelenik meg, olyan változást kínálok a stílusokban:

@Media képernyő és (max-szélesség: 650px) (
.Wrap (
Max-szélesség: 480px;
Magasság: 280px;
}
.slides (
Háttér méret: fedél;
}
}

Maga a csúszka szélessége csökken, a magasság szintén csökken. A diák magukat, akkor felírt egy ingatlant, amely mérleg képeket, hogy azok megtartják arányok teljesen feltöltött egy csúszka vágás nélkül ugyanabban az időben.

Kiváló, most ellenőrizheti és győződjön meg róla, hogy a szélesség kevesebb, mint 650 képpont, a csúszka átalakul és jól néz ki, a kép vágása nélkül.

Az utolsó pont körülbelül 400 képpont szélessége. A képen a képünk nem helyezkedik el, és intézkednie kell. Ehhez egy másik média kérelmet írok:

@Media képernyő és (max-szélesség: 400px) (
.Wrap (
Max-szélesség: 320px;
Magasság: 180px;
}
.slides (
Háttér méret: fedél;
}
}

Mindegyik ugyanaz, csak csökkenti a tartály szélességét és magasságát. Kiváló, most a csúszka teljesen adaptív! Is mobiltelefon A 320 képpont szélességével nagyszerűen fog kinézni. Azonban nézd meg magad:

A média kéréseknek köszönhetően a képek arányosak a csökkenéssel, miközben megőrzik arányaikat.

A csúszkás hatások hozzáadása az átmeneteknél

Nos, bónusz ebben a cikkben láthat egy pár hatást, amely megvalósítható, ha a blokkok lebegése. Tehát, ez elég ahhoz, hogy választani közülük, és írd diák (.slides), és ha egy kép jelenik meg, megszünteti a hatása a hatás. Az eredmény megtekintéséhez be kell állítania az átmeneti tulajdonság csúszdáit, hogy az átmenetek simasak legyenek. Példa hatás:

Diák (
Átalakítás: forgatás (50deg);
Átmenet: 1S;
}

Most egy meglehetősen választó, amely láthatóvá teszi a dia látható, hogy regisztrálja az átalakulás törlését:

# Point1: ellenőrzött ~ .slider\u003e .auto1 (
Átalakítás: Nincs;
}

És így tegyen minden diát. Ennek megfelelően kezdetben a kép elforgatható, és láthatatlan lesz, és megjelenik, a zökkenőmentes visszatérés hatása kezdő pozíció. Ennek megfelelően a hatásaihoz juthatsz. Nos, egy csúszkát csináltunk, mindenkinek van. Ha kérdése van, várja a megjegyzéseket.

Kiegészítés - Hogyan lehet megtenni, hogy ha rákattint a dia, a diavetítéshez kötött átmenet?

Más szóval, most csak képek vagyunk, és hogyan lehet őket kattintani. Ehhez készen kell állnia erre a leckére. Ezután meg kell találnia egy darabot HTML-kódban, amely felelős a diákért. Itt van a screenshot:

Amint láthatja, beillesztettem az első és a második dia linkbe. Tehát, ha rákattint az első dia, a rendszerből a Google fog bekövetkezni, ha rákattint a második - a Yandex. Megjegyzem, hogy a link ugyanabban az ablakban nyílik meg, azaz az aktuális oldal a csúszkával eltűnik ebben az esetben. Ha új ablakban kell megnyitnia a linkeket egy új ablakban, minden címkével Hozzá kell adnod attribútumcél. \u003d "_blank".

De ez nem minden, amire szükséged van! Most már nem működik, hogy a képek kattintsák, hozzá kell adnod a CSS-hez, ami:

Diák a (
Kijelző: blokk;
Szélesség: 100%;
Magasság: 100%;
}

Azaz, az összes diák, teszünk egy linket a blokk elem, és pont ez a szélesség és a magasság 100% úgy, hogy elfoglalja a teljes teret a kép. Most mindent kell dolgoznia, ellenőrizheti. Csak cserélje ki a címeket a linkeken, és használhatja. Remélem, a lehető legpontosabban elmagyaráztam.

A figyelem felemelése: Mindannyian megbízható tárhelyre szeretnénk közzétenni helyeit. Több száz hostot elemeztem, és megtaláltam a legjobbakat - Hostiq. A hálózatban több száz pozitív visszajelzést Róla, átlagos felhasználói értékelés - 4.8 az 5. közül. Hagyja, hogy a webhelyek rendben legyenek.