5 voľných obrázkov skriptov Posuvník
Prekryté posúvače vám umožňujú porovnávať dva obrazy, zvyčajne predtým a po druhom, s dvomi obrázkami navzájom na sebe. Posuvný ovládač, ktorý môže byť manipulovaný, môže byť pretiahnutý používateľom, aby zobrazoval menej predtým a viac obrázkov a naopak.
Je to perfektný spôsob pre niektoré scenáre, ako napríklad prehliadanie krutých vplyvov atmosféry Marsu alebo spôsob, akým sa mestské prostredie mení za pol storočia.
Pre dizajnérov je tiež skvelý spôsob, ako zamyslieť sa nad zmenou techniky alebo prístupu na pôvodný obrázok. Existujú rôzne knižnice JS, ktoré môžete použiť na porovnanie. Tu je 5 z nich.
Twentytwenty
Twentytwenty je vizuálny nástroj, ktorý uľahčuje zaznamenanie rozdielov medzi dvomi obrázkami. Tento nástroj využívajúci nástroje jQuery a jquery.event.move na prácu. Je to veľmi jednoduché použitie, len stack dva obrázky do kontajnera, potom zavolajte twentytwenty (); pre kontajner.
potom:
$ ( "# Kontajner") twentytwenty ().
Spoločnosť Twentytwenty reaguje a pracuje pre všetky zariadenia, a ak používate základnú štruktúru, bude to fungovať mimo krabice.
postaviť vedľa seba
postaviť vedľa seba pomáha porovnávať dva kusy médií (fotky alebo GIF) a uľahčuje vám zvýraznenie zmeny medzi obrázkami v čase. Tento doplnok je ľahko použiteľný a funguje na všetkých zariadeniach. Stačí poskytnúť dva obrázky a potom zavoláte doplnku s dostupnými možnosťami.
Na týchto možnostiach môžete nastaviť štartovú pozíciu posúvača, nastaviť ju vertikálne alebo horizontálne, pridať štítok a kredit, animáciu a ďalšie.
Vyskúšajte demo nižšie:
imgSlider
imgSlider je jednoduchý doplnok jQuery na vytvorenie posúvača na porovnanie obrázkov. Použitie je jednoduché a jednoduché: po zahrnutí jeho JS a CSS obalte obrázky v div s ľavý trieda pre pred obrázok a správny trieda pre po obrázok a aktivujte ho volaním .jazdec ();. Možnosti doplnku zahŕňajú nastavenie počiatočnej polohy posuvníka a pridanie / zobrazenie pokynov na posuvnom ovládači.
Zavolajte na plugin:
$ ( 'Slider') jazdca ().
Cocoen
Cocoen umožňuje dotyk s použitím udalosti jQuery-Touch. Je ľahké ho aplikovať vďaka štruktúre HTML podobnej Twentytwenty zapojiť. Na sklade skriptov musíte okrem jQuery zahrnúť aj knižnicu jQuery Touch Event spolu s týmto doplnkom.
$ (dokument) .ready (funkcia () $ ('.cocoen') .cocoen (););
Vyskúšajte demo nižšie:
Porovnanie obrázkov Posuvník
CodyHouse urobil ukážku posúvača porovnávania obrázkov s CSS3, jQuery a niektorými skripty na zvládnutie udalosti drag a pridania mobilnej podpory. Môžete sa pozrieť na úplné vysvetlenie a pokyny na použitie tohto pluginu tu a vidieť demo tu.
Vyskúšajte demo nižšie:
Tu sú ďalšie 3:
Cato - Ostatné doplnky potrebujú jQuery ako závislosť, ale Cato nevyžaduje žiadnu závislosť na práci, čo zjednoduší knižnicu pre posúvače porovnania obrázkov. Použitie je jednoduché, stačí zahrnúť Cato CSS a JS knižnicu a nasledovať jeho štruktúru HTML.
K dispozícii sú možnosti, ktoré môžete použiť na posúvači, vrátane pridania popisu, zmeny smeru posúvača a dokonca aj pridania filtračného efektu, ako je sépia a odtieň šedi. Treba však poznamenať, že Cato v súčasnosti podporuje iba WebKit.
Predtým potom - Jedná sa o ľahký, plne citlivý a pracuje na ľubovoľnom rozložení a veľkosti. Môžete vidieť živé ukážky na Codepen.
Posuvník na porovnanie videa vo formáte HTML5 - Keď sa iní vývojári pokúsia vytvoriť porovnávací posuvník pre obrázky, potom Dudley Storey použije posuvník na video. Ak chcete pracovať, využíva jQuery a len niekoľko riadkov kódu. Pozrite si demo na Codepen, ak si chcete pozrieť akciu.
