5 Free Image Comparison Slider Scripts
Overlappende schuifregelaars stellen u in staat om vergelijkingen te maken tussen twee afbeeldingen, meestal van voor de soort, waarbij de twee afbeeldingen op elkaar worden gelegd. Een schuif die kan worden gemanipuleerd, kan door de gebruiker worden gesleept om minder van de eerdere afbeelding en meer van de afbeelding achteraf weer te geven, en omgekeerd.
Het is de perfecte manier voor bepaalde scenario's, zoals het bekijken van de harde effecten van de atmosfeer van Mars of hoe stadslandschappen in meer dan een halve eeuw veranderen.
Voor ontwerpers is het ook een uitstekende manier om na te denken over de hoeveelheid verandering die een techniek of benadering heeft op een origineel beeld. Er zijn verschillende JS-bibliotheken die u kunt gebruiken voor vergelijkingsdoeleinden. Hier zijn er 5 van.
Twentytwenty
Twentytwenty is visuele tool om het gemakkelijk te maken om de verschillen tussen twee afbeeldingen op te merken. Deze tool met behulp van de jQuery en jQuery.event.move om te werken. Het is heel gemakkelijk te gebruiken, stapel twee afbeeldingen in een container en bel dan twentytwenty (); voor de container.
Dan:
$ ( "# Container") twentytwenty (.);
Twentytwenty is responsive en werkt voor alle apparaten, en als u het Foundation-framework gebruikt, zal dit uit de doos werken.
naast elkaar plaatsen
naast elkaar plaatsen helpt u twee stukken media (foto's of GIF) te vergelijken en maakt het voor u gemakkelijk om de verandering tussen de afbeeldingen in de loop van de tijd te benadrukken. Deze plug-in is eenvoudig te gebruiken en werkt op alle apparaten. Geef gewoon twee afbeeldingen op en bel vervolgens de plug-in met de beschikbare opties.
Bij de opties kunt u de beginpositie van de schuifregelaar instellen, deze verticaal of horizontaal instellen, label en credit toevoegen, animatie en meer.
Probeer een demo hieronder:
imgSlider
imgSlider is een eenvoudige jQuery-plug-in om een schuifknop voor de vergelijking van afbeeldingen te maken. Het gebruik is eenvoudig en gemakkelijk: na het opnemen van de JS en CSS, wikkel de afbeeldingen in div met de links klasse voor de voor afbeelding, en rechts klasse voor de na afbeelding, activeer het dan door te bellen .slider ();. Tot de opties van de plug-in behoren het instellen van de beginpositie van de schuifregelaar en het toevoegen / weergeven van instructies op de schuifregelaar.
Bel de plug-in:
$ ( 'Slider') slider (.);
Cocoen
Cocoen maakt aanraking mogelijk met het gebruik van de jQuery-Touch-gebeurtenis. Het is gemakkelijk toe te passen vanwege een HTML-structuur die lijkt op de Twentytwenty inpluggen. Op de scriptstapel moet u naast jQuery ook de jQuery Touch Event-bibliotheek opnemen naast deze plug-in.
$ (document) .ready (function () $ ('. cocoen'). cocoen (););
Probeer een demo hieronder:
Beeldvergelijking schuifregelaar
CodyHouse heeft een demo gemaakt van een schuifknop voor het vergelijken van afbeeldingen met CSS3, jQuery en enkele scripts om de sleepgebeurtenis af te handelen en mobiele ondersteuning toe te voegen. Je kunt de volledige uitleg en instructies van het gebruik van deze plug-in hier volgen en de demo hier bekijken.
Probeer een demo hieronder:
Hier zijn er nog 3:
Cato - Andere plug-ins hebben jQuery nodig als afhankelijkheid maar Cato vereist geen afhankelijkheid om te werken, waardoor het een lichtere bibliotheek is voor beeldvergelijkingsschuifregelaars. Het gebruik is eenvoudig, neem gewoon de CSS- en JS-bibliotheek van Cato op en volg de HTML-structuur.
Er zijn opties beschikbaar om op uw schuifregelaar toe te passen, inclusief knopinfo toevoegen, de richting van de schuifregelaar wijzigen en zelfs een filtereffect toevoegen, zoals sepia en grijstinten. Houd er echter rekening mee dat Cato momenteel alleen ondersteuning biedt voor WebKit.
Voor na - Dit is lichtgewicht, volledig responsief en werkt op elke lay-out en grootte. Je kunt de live demo's op Codepen bekijken.
HTML5-schuifregelaar voor videovergelijking - Wanneer een andere ontwikkelaar een vergelijkingsschuif voor afbeeldingen probeert te maken, past Dudley Storey de schuifregelaar toe op video. Om werk te maken, gebruikt hij de jQuery en slechts enkele regels code. Zie de demo op Codepen om de actie te zien.
