Μετάβαση στο περιεχόμενο
↔️

Slider Σύγκρισης Εικόνων

Συγκρίνετε δύο εικόνες με συρόμενο slider πριν/μετά. Ανεβάστε, σύρετε τη λαβή, μοιραστείτε. Ιδανικό για ρετουσάρισμα και επαναλήψεις σχεδιασμού. Τρέχει στον browser σας.

Ανεβάστε και τις δύο εικόνες για να ξεκινήσετε.

Πώς λειτουργεί το slider;

Το slider σύγκρισης στοιβάζει δύο εικόνες και αποκαλύπτει την κάθε μία ανάλογα με τη θέση της λαβής. Χρησιμοποιεί clip-path σε CSS για περικοπή της πάνω εικόνας, ώστε το σύρσιμο να είναι GPU-accelerated και ομαλό. Και οι δύο εικόνες φορτώνονται ως Object URLs στον browser σας και δεν ανεβαίνουν πουθενά.

Συνήθεις χρήσεις

  • Φωτογραφικό ρετουσάρισμα — δείξτε επεξεργασίες δίπλα-δίπλα.
  • QA σχεδιασμού — συγκρίνετε αναθεωρήσεις σχεδιασμού οπτικά.
  • Ανακαίνιση — παρουσιάστε δωμάτια πριν/μετά.
  • Marketing — δείξτε μεταμορφώσεις προϊόντων.

Απόρρητο

Όλη η επεξεργασία τρέχει 100% στον browser σας. Δεν αποστέλλονται δεδομένα σε server.