5 Script-uri gratuite de comparare a imaginilor
Glisoarele suprapuse vă permit să faceți comparații între două imagini, de obicei un fel înainte și după, cele două imagini suprapuse între ele. Un cursor care poate fi manipulat poate fi tras de către utilizator pentru a arăta mai puțin din imaginea anterioară și mai mult din imaginea după imagine și invers.
Este modalitatea perfectă pentru anumite scenarii, cum ar fi vizionarea efectelor dure ale atmosferei lui Marte sau felul în care peisajul orașului se schimbă într-o jumătate de secol.
Pentru designeri, este, de asemenea, o modalitate foarte bună de a reflecta asupra cantității de schimbare pe care o tehnică sau abordare o are asupra unei imagini originale. Există diferite biblioteci JS pe care le puteți utiliza pentru comparație. Iată 5 dintre ele.
Twentytwenty
Twentytwenty este un instrument vizual pentru a face ușor de notat diferențele dintre două imagini. Acest instrument care utilizează jQuery și jquery.event.move pentru a funcționa. Este foarte usor de folosit, doar stivuiti doua imagini intr-un container, apoi apelati twentytwenty (); pentru container.
Atunci:
$ ( "# Container") twentytwenty ().;
Twentytwenty este receptiv și funcționează pentru toate dispozitivele, iar dacă utilizați cadrul Foundation, acest lucru va funcționa din cutie.
Juxtapune
Juxtapune vă ajută să comparați două bucăți de materiale (fotografii sau GIF) și să vă ușurați să evidențiați schimbarea imaginilor de-a lungul timpului. Acest plugin este ușor de utilizat și funcționează pe toate dispozitivele. Oferiți doar două imagini, apoi sunați pluginul cu opțiunile disponibile.
La opțiuni, puteți seta poziția de pornire a cursorului, setați-o verticală sau orizontală, adăugați etichetă și credit, animație și multe altele.
Încercați o demonstrație de mai jos:
imgSlider
imgSlider este un plugin simplu jQuery pentru a face glisorul de comparare a imaginii. Utilizarea este simplă și ușoară: după ce includeți JS și CSS, împachetați imaginile în div cu stânga clasa pentru inainte de imagine, și dreapta clasa pentru după imagine, apoi activați-o prin apelare .cursor ();. Opțiunile pluginului includ setarea poziției inițiale a cursorului și adăugarea / afișarea instrucțiunilor pe cursor.
Sunați pluginul:
$ ( 'Slider') cursor ().;
Cocoen
Cocoen permite atingerea cu ajutorul evenimentului jQuery-Touch. Este ușor de aplicat datorită unei structuri HTML asemănătoare cu cea din Twentytwenty conecteaza. În stivă de script, pe lângă jQuery trebuie să includeți biblioteca jQuery Touch Event, împreună cu acest plugin.
$ (document) .ready (funcția () $ ('.cocoen') .cocoen (););
Încercați o demonstrație de mai jos:
Compararea imaginii Slider
CodyHouse a făcut o demonstrație a unui slider de comparare a imaginii cu CSS3, jQuery și câteva scripturi pentru a gestiona evenimentul de tragere și pentru a adăuga suportul mobil. Puteți să urmați explicația completă și instrucțiunile de utilizare a acestui plugin aici și să vedeți demo-ul aici.
Încercați o demonstrație de mai jos:
Mai sunt încă 3:
Cato - Alte pluginuri au nevoie de jQuery ca dependență, dar Cato nu necesită nici o dependență de a lucra, făcându-l o bibliotecă mai ușoară pentru glisoarele de comparare a imaginii. Utilizarea este ușoară, include doar CSS CSS și JS bibliotecă și urmați structura HTML.
Există opțiuni disponibile pentru a vă aplica pe cursorul dvs., inclusiv adăugarea unei sugestii, schimbarea direcției cursorului, adăugarea chiar a efectului de filtru, cum ar fi sepia și tonurile de gri. Totuși, trebuie să rețineți că în prezent Cato are doar suport pentru WebKit.
Înainte după - Acest lucru este ușor, pe deplin receptiv, și funcționează pe orice aspect și mărime. Puteți vedea demonstrațiile live pe Codepen.
Glisorul de comparare video HTML5 - Atunci când unii dezvoltatori încearcă să facă glisorul de comparație pentru imagini, atunci Dudley Storey aplică cursorul la video. Pentru a face muncă, el utilizează jQuery și doar câteva linii de cod. Consultați demo-ul de pe Codepen pentru a vedea acțiunea.
