5 Slobodno Usporedba slika klizač Skripte

Preklapajuće klizače omogućuju vam usporedbu između dvije slike, obično prije vrste nakon što se dvije slike prikažu jedna na drugoj. Klizač koji se može manipulirati, korisnik može povući tako da prikaže manje od slike prije i više od slike poslije, i obrnuto.

To je savršen način za određene scenarije kao što su gledanje oštrih učinaka atmosfere Marsa ili promjena gradskih krajobraza tijekom pola stoljeća.

Za dizajnere, to je također sjajan način za razmišljanje o količini promjena koje tehnika ili pristup ima na izvornoj slici. Postoje različite JS knjižnice koje možete koristiti za usporedbu. Evo 5 od njih.

Twentytwenty

Twentytwenty je vizualni alat koji olakšava bilježenje razlika između dvije slike. Ovaj alat koristi jQuery i jquery.event.move za rad. Vrlo je jednostavan za korištenje, samo stavite dvije slike u spremnik, a zatim nazovite twentytwenty (); za spremnik.

Zatim:

 $ ( "# Kontejner") twentytwenty (). 

Dvadesetogodišnjak odgovara i radi za sve uređaje, a ako koristite okvir Zaklade, to će uspjeti izvan okvira.

postaviti jedno uz drugo

postaviti jedno uz drugo pomaže vam usporediti dva dijela medija (fotografije ili GIF) i olakšati vam da tijekom vremena označite promjenu između slika. Ovaj dodatak je jednostavan za korištenje i radi na svim uređajima. Dovoljno je dati dvije slike i pozvati dodatak s dostupnim opcijama.

Na opcijama možete postaviti početnu poziciju klizača, postaviti je okomito ili vodoravno, dodati oznaku i kredit, animaciju i još mnogo toga.

Isprobajte sljedeći demo:

imgSlider

imgSlider je jednostavan jQuery dodatak za izradu klizača za usporedbu slika. Korištenje je jednostavno i jednostavno: nakon što je uključio JS i CSS, zamotajte slike u div s lijevo klasa za prije slika, i pravo klasa za nakon zatim je aktivirajte pozivom .klizač ();. Mogućnosti dodatka uključuju postavljanje početne pozicije klizača i dodavanje / prikazivanje uputa na klizaču.

Nazovite dodatak:

 $ ( 'Klizač') klizača (). 

Cocoen

Cocoen omogućuje dodir s upotrebom događaja jQuery-Touch. Lako je primijeniti zbog HTML strukture slične Twentytwenty uključiti. Na skupu skripti, osim jQuery-a, morate uključiti knjižnicu jQuery Touch Eventa uz ovaj dodatak.

 
   
 $ (document) .ready (funkcija () $ ('. cocoen'). cocoen (););

Isprobajte sljedeći demo:

Klizač za usporedbu slika

CodyHouse je napravio demo klizača za usporedbu slika s CSS3, jQuery i nekim skriptama za obradu događaja povlačenja i dodavanje mobilne podrške. Možete slijediti cjelovito objašnjenje i upute o korištenju ovog dodatka ovdje i vidjeti demo ovdje.

Isprobajte sljedeći demo:

Evo još 3:

Cato - Ostali dodatci trebaju jQuery kao ovisnost, ali Cato ne zahtijeva ovisnost o radu, što ga čini laganom bibliotekom za klizače za usporedbu slika. Korištenje je jednostavno, samo uključite Cato CSS i JS knjižnicu i slijedite njegovu HTML strukturu.

Dostupne su opcije za primjenu na klizaču, uključujući dodavanje opisa alata, mijenjanje smjera klizača, pa čak i dodavanje efekta filtra kao što su sepija i sivi tonovi. Međutim, trebate imati na umu da Cato trenutno ima samo podršku za WebKit.

Prije poslije - To je lagan, potpuno osjetljiv i radi na bilo kojem rasporedu i veličini. Možete vidjeti demo snimke uživo na Codepen-u.

HTML5 klizač za usporedbu videozapisa - Kada drugi programeri pokušaju napraviti usporedbu klizača za slike, onda Dudley Storey primjenjuje klizač na video. Da bi radio, on koristi jQuery i samo nekoliko redaka koda. Pogledajte demo na Codepen da biste vidjeli radnju.