5 Gratis bildjämförelse Slider Scripts
Överlagrade reglaget tillåter dig att göra jämförelser mellan två bilder, vanligtvis ett tidigare slag, med de två bilderna överlagda på varandra. En skjutreglage som kan manipuleras kan dras av användaren för att visa mindre av tidigare bild och mer efterbild och vice versa.
Det är det perfekta sättet för vissa scenarier som att titta på Mars 'atmosfärs svåra effekter eller hur stadslandskap förändras över ett halvt sekel.
För designers är det också ett bra sätt att reflektera över hur mycket förändring en teknik eller tillvägagångssätt har på en originalbild. Det finns olika JS-bibliotek som du kan använda för jämförelseändamål. Här är 5 av dem.
Twentytwenty
Twentytwenty är visuellt verktyg som gör det enkelt att notera skillnaderna mellan två bilder. Detta verktyg använder jQuery och jquery.event.move att arbeta. Det är mycket enkelt att använda, bara stapla två bilder i en behållare och ring sedan twentytwenty (); för behållaren.
Sedan:
$ ( "# Container") twentytwenty ().
Twentytwenty är lyhörd och fungerar för alla enheter, och om du använder Foundation Framework, kommer detta att fungera ur rutan.
ställs mot varandra
ställs mot varandra hjälper dig att jämföra två bitar av media (foton eller GIF) och göra det enkelt för dig att markera förändringen mellan bilderna över tiden. Det här pluginet är lätt att använda och fungerar på alla enheter. Ge bara två bilder och ring pluggen med de tillgängliga alternativen.
På alternativen kan du ställa in startpositionen för skjutreglaget, ställa det vertikalt eller horisontellt, lägga till etikett och kredit, animering och mer.
Prova en demo nedan:
imgSlider
imgSlider är ett enkelt jQuery-plugin för att göra bildsammanställningsreglaget. Användningen är enkel och enkel: efter att ha inkluderat dess JS och CSS, wrap bilderna i div med vänster klass för innan bild och höger klass för efter bild och aktivera den genom att ringa .reglaget ();. Insticksalternativen inkluderar inställning av reglaget för startposition och lägga till / visa instruktioner på reglaget.
Ring plugin:
$ ( ". Reglaget) reglaget ().
Cocoen
Cocoen möjliggör kontakt med användningen av jQuery-Touch Event. Det är lätt att tillämpa på grund av en HTML-struktur som liknar Twentytwenty plugin. På skriptstapeln behöver du, förutom jQuery, inkludera jQuery Touch Event-biblioteket, tillsammans med detta plugin.
$ (dokument) .ready (funktion () $ ('.cocoen'). cocoen (););
Prova en demo nedan:
Bildförskjutningsreglaget
CodyHouse gjorde en demonstration av en bild jämförelsegivare med CSS3, jQuery och några skript för att hantera dra händelsen och lägga till mobilt support. Du kan följa den fullständiga förklaringen och instruktionerna för att använda det här pluginet här och se demoen här.
Prova en demo nedan:
Här är 3 fler:
Cato - Andra plugins behöver jQuery som beroende men Cato kräver inget beroende av arbete, vilket gör det till ett lättare bibliotek för bildförskjutningsreglage. Användningen är lätt, bara inkludera Cato: s CSS och JS-bibliotek och följ dess HTML-struktur.
Det finns alternativ som är tillgängliga för att applicera på din reglage, inklusive att lägga till verktygstips, ändra reglaget, till och med lägga till filtereffekt som sepia och gråskala. Men du bör notera att Cato för närvarande bara har stöd för WebKit.
Före efter - Detta är lätt, fullt lyhörd, och fungerar på alla layouter och storlekar. Du kan se live demos på Codepen.
HTML5 Video Comparison Slider - När en annan utvecklare försöker göra jämförelsegivare för bilder, använder Dudley Storey skjutreglaget till video. För att göra arbete använder han jQuery och bara några rader av kod. Se demo på Codepen för att se åtgärden.
