5 Δωρεάν Scripts Σύγκριση Εικόνας Slider

Τα επικαλυμμένα ρυθμιστικά σάς επιτρέπουν να κάνετε συγκρίσεις μεταξύ δύο εικόνων, συνήθως πριν και μετά, με τις δύο εικόνες να είναι τοποθετημένες μεταξύ τους. Ένας ολισθητήρας που μπορεί να χειριστεί, μπορεί να σύρεται από το χρήστη για να δείξει λιγότερη εικόνα από την προηγούμενη και περισσότερες από την εικόνα μετά και αντίστροφα.

Είναι ο τέλειος τρόπος για ορισμένα σενάρια όπως η προβολή των σκληρών επιδράσεων της ατμόσφαιρας του Άρη ή το πώς αλλάζουν τα τοπία του τοπίου για περισσότερο από μισό αιώνα.

Για τους σχεδιαστές, είναι επίσης ένας πολύ καλός τρόπος να προβληματιστούμε για το μέγεθος της αλλαγής που έχει μια τεχνική ή προσέγγιση σε μια πρωτότυπη εικόνα. Υπάρχουν διάφορες βιβλιοθήκες JS που μπορείτε να χρησιμοποιήσετε για λόγους σύγκρισης. Εδώ είναι 5 από αυτούς.

Είκοσιενεννέα

Είκοσιενεννέα είναι ένα οπτικό εργαλείο που διευκολύνει την καταγραφή των διαφορών μεταξύ δύο εικόνων. Αυτό το εργαλείο χρησιμοποιεί το jQuery και jquery.event.move για να λειτουργήσει. Είναι πολύ εύκολο στη χρήση, απλά στοιβάζετε δύο εικόνες σε ένα δοχείο, στη συνέχεια καλέστε twentytwenty (); για το δοχείο.

Επειτα:

 $ ("κοντέινερ #"). twentytwenty (); 

Το Twentytwenty ανταποκρίνεται και λειτουργεί για όλες τις συσκευές, και αν χρησιμοποιήσετε το πλαίσιο Foundation, αυτό θα λειτουργήσει από το κουτί.

Αντιπαραθέτω

Αντιπαραθέτω σας βοηθά να συγκρίνετε δύο κομμάτια μέσων (φωτογραφίες ή GIF) και να σας διευκολύνουν να επισημάνετε την αλλαγή μεταξύ των εικόνων με την πάροδο του χρόνου. Αυτό το πρόσθετο είναι εύκολο στη χρήση και λειτουργεί σε όλες τις συσκευές. Απλά δώστε δύο εικόνες και στη συνέχεια καλέστε το plugin με τις διαθέσιμες επιλογές.

Στις επιλογές, μπορείτε να ρυθμίσετε τη θέση εκκίνησης του ρυθμιστή, να την ορίσετε κάθετα ή οριζόντια, να προσθέσετε ετικέτα και πίστωση, κινούμενα σχέδια και πολλά άλλα.

Δοκιμάστε ένα demo παρακάτω:

imgSlider

imgSlider είναι ένα απλό πρόσθετο jQuery για να κάνει το slider σύγκρισης εικόνων. Η χρήση είναι απλή και εύκολη: αφού συμπεριλάβετε τα JS και CSS, τυλίξτε τις εικόνες σε div με το αριστερά τάξη για το πριν εικόνα, και σωστά τάξη για το μετά και στη συνέχεια ενεργοποιήστε την καλώντας .ολισθητής();. Οι επιλογές του plugin περιλαμβάνουν τη ρύθμιση της αρχικής θέσης του ρυθμιστή και την προσθήκη / εμφάνιση οδηγιών στο ρυθμιστικό.

Καλέστε το plugin:

 $ ('. slider') slider (); 

Cocoen

Cocoen επιτρέπει την επαφή με τη χρήση του συμβάντος jQuery-Touch. Είναι εύκολο να εφαρμοστεί λόγω δομής HTML παρόμοιας με την Είκοσιενεννέα συνδέω. Στη δέσμη δέσμης ενεργειών, εκτός από το jQuery, πρέπει να συμπεριλάβετε τη βιβλιοθήκη συμβάντων jQuery Touch, μαζί με αυτήν την προσθήκη.

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

Δοκιμάστε ένα demo παρακάτω:

Σύγκριση εικόνων ρυθμιστικό

Η CodyHouse έκανε μια επίδειξη ενός slider σύγκρισης εικόνων με CSS3, jQuery και μερικά σενάρια για να χειριστεί το συμβάν μεταφοράς και να προσθέσει υποστήριξη για κινητά. Μπορείτε να ακολουθήσετε την πλήρη εξήγηση και τις οδηγίες χρήσης αυτού του plugin εδώ και δείτε το demo εδώ.

Δοκιμάστε ένα demo παρακάτω:

Εδώ είναι 3 ακόμη:

Cato - Άλλα plugins χρειάζονται jQuery ως εξάρτηση, αλλά Cato δεν απαιτεί την εξάρτηση να δουλέψει, καθιστώντας την μια πιο ελαφριά βιβλιοθήκη για τα slider σύγκρισης εικόνων. Η χρήση είναι εύκολη, απλά συμπεριλάβετε τη βιβλιοθήκη CSS και JS της Cato και ακολουθήστε τη δομή της HTML.

Υπάρχουν διαθέσιμες επιλογές για την εφαρμογή στο ρυθμιστικό σας, συμπεριλαμβανομένης της προσθήκης επεξηγηματικής σημείωσης, της αλλαγής κατεύθυνσης του ρυθμιστή, ακόμα και με την προσθήκη φίλτρου όπως η σέπια και η κλίμακα του γκρι. Ωστόσο, πρέπει να σημειώσετε ότι ο Cato έχει μόνο υποστήριξη για το WebKit.

Πριν μετα - Αυτό είναι ελαφρύ, πλήρως ανταποκρίνεται, και λειτουργεί σε οποιαδήποτε διάταξη και μέγεθος. Μπορείτε να δείτε τα live demos στο Codepen.

Διαφάνειας σύγκρισης βίντεο HTML5 - Όταν άλλοι προγραμματιστές προσπαθούν να κάνουν το slider σύγκρισης για εικόνες, τότε το Dudley Storey εφαρμόζει το ρυθμιστικό στο βίντεο. Για να δουλέψει, χρησιμοποιεί το jQuery και μερικές μόνο γραμμές κώδικα. Δείτε την επίδειξη στο Codepen για να δείτε τη δράση.