10 βιβλιοθήκες CSS για καλύτερα εφέ κίνησης εικόνων
Αφήνοντας τους χρήστες να γνωρίζετε εύκολα και σαφώς ποιο μέρος της ιστοσελίδας είναι clickable είναι ένα σημαντικό μέρος του σχεδιασμού UX. Ο παλιός αλλά χρυσός τρόπος να γίνει αυτό ήταν να αλλάξει το χρώμα του κειμένου και να τον υπογραμμίσει. Σήμερα, με το CSS, υπάρχουν πολλοί περισσότεροι τρόποι για να αποδώσετε αποτελέσματα, ειδικά σε εικόνες.
Οι προγραμματιστές μπορούν τώρα προσθέστε μεταβατικά εφέ ή κινούμενα σχέδια όταν ενεργοποιείται ένα συμβάν επικάλυψης. Εξετάζουμε κατευθυντήριες διαφάνειες, μεγεθύνει με διαφορετικές ταχύτητες, ξεθωριάζει και ξεθωριάζει, φαινόμενα μεντεσέ, αποκαλύπτει το φως του κόσμου, κουνιέται, αναπηδά και πολλά άλλα.
Σε αυτή τη συλλογή, υπάρχουν περισσότερες από 250 επιδράσεις αιώρησης για να σας εμπνεύσει. Μπορείτε επίσης να πάρετε τον κωδικό στην πηγή.
Εφέ εφέ εικόνας (16 εφέ)
Σε αυτή τη σελίδα θα βρείτε μια συμπαθητική συλλογή από εικοσιτετράωρες εικονογραφήσεις με τίτλους. Πιάσε τον κώδικα HTML και CSS για κάθε εφέ, τοποθετώντας το δείκτη του ποντικιού πάνω στις εικόνες και έπειτα κάνοντας κλικ Εμφάνιση κώδικα.
Υπότιση εικόνας Μετακινήστε τον εραστήρα (4 επιπτώσεις)
Εδώ είναι 4 κινούμενα κινούμενα σχέδια που τρέχουν όταν κάποιος κλίνει πάνω από την εικόνα. Τα εφέ είναι χτισμένα με καθαρές μεταβάσεις CSS3 και μετασχηματίζουν, χωρίς JavaScript, για να αυξήσουν τη συμβατότητα μεταξύ των προγραμμάτων περιήγησης.
iHover (35 επιπτώσεις)
Το iHover είναι μια συλλογή από εφέ κίνησης που τροφοδοτούνται από το CSS3. Υπάρχουν εφέ 20 κυκλικής αιώρησης και 15 εφέ τετραγωνικής αιώρησης. Για να χρησιμοποιήσετε τα εφέ, θα χρειαστεί να γράψετε κάποια HTML σήμανση και να συμπεριλάβετε τα αρχεία CSS.
Image Hover (44 επιπτώσεις)
Αυτή η βιβλιοθήκη περιέχει 44 εφέ που έγιναν με καθαρό CSS. Ορισμένες από τις επιδράσεις περιλαμβάνουν φθορές, σπρώξεις, διαφάνειες, μεντεσέδες, αποκαλύψεις, ζουμ, θολές, ανατροπές, πτυχώσεις και ρολά, σε πολλές κατευθύνσεις. Υπάρχει μια εκτεταμένη έκδοση 216 αποτελεσμάτων που μπορούν να αγοραστούν για € 14.
Ιδέες εφέ δράσης (30 επιπτώσεις)
Αυτή η εικόνα επίδειξης hover από την Codrop, σας δίνει έμπνευση όταν κάνετε ομαλές μεταβάσεις ανάμεσα στις εικόνες και τους λεζάντες. Υπάρχουν συνολικά 30 εφέ σε δύο σύνολα με μαθήματα και τον πηγαίο κώδικα.
Μετακινήστε το CSS (108 επιπτώσεις)
Το CSS του Hover σάς επιτρέπει να προσθέσετε εφέ κίνησης σε οποιοδήποτε στοιχείο, όπως κουμπί, σύνδεσμο ή εικόνα. Τα αποτελέσματα περιλαμβάνουν μεταβάσεις 2D, μεταβάσεις υποβάθρου, μεταβάσεις σκιάς και λάμψης και πολλά άλλα. Η βιβλιοθήκη είναι διαθέσιμη σε CSS, Sass και LESS.
Ανησυχία (100+ επιδράσεις)
Υπάρχουν πάνω από 100 κινούμενα σχέδια με εικόνες σε κουμπιά, επικαλύψεις, λεπτομέρειες, λεζάντες, εικόνες και κουμπιά κοινωνικών μέσων. Όλα τα εφέ τροφοδοτούνται από το CSS3.
Επέκταση επίδειξης τίτλου λεζάντας (7 επιπτώσεις)
Υπάρχουν 7 διαφορετικά εφέ σε αυτή τη συλλογή. Όλες οι μεταβάσεις φαίνονται πολύ ωραίες και λεπτές. Μεταβείτε στην ενότητα "Εκμάθηση" για να μάθετε πώς μπορείτε να εφαρμόσετε αυτές τις επιπτώσεις στο έργο σας.
Εφέ εφέ κίνησης εικόνας CSS (15 επιπτώσεις)
Μια συλλογή από απλά εφέ κίνησης όπως το ζουμ, ολίσθηση, περιστροφή, γκρι κλίμακα, θόλωση, αδιαφάνεια και άλλα βασικά εφέ. Μπορείτε να χρησιμοποιήσετε αυτά τα εφέ προσθέτοντας την κλάση CSS πριν από σας φιγούρα ετικέτα.
Έντονο 3D εφέ κίνησης
Αυτό είναι ένα εξαιρετικά δροσερό εφέ που θα εντοπίσει την τελευταία κίνηση του ποντικιού σας. Οι υπότιτλοι εικόνων θα ανοίξουν από μία από τις τέσσερις κατευθύνσεις με βάση την τελευταία θέση του δρομέα σας.
Κίνηση με κίνηση
Εδώ υπάρχει ένα κινούμενο σχέδιο που ξεκίνησε από το UNIQLO. Κατά τη διάρκεια ενός γεγονότος αιωρήματος, τα περιθώρια της εικόνας θα κινούνται.
Πλακάκια με κινούμενα σχέδια
Ένα για τα σχέδια κεραμιδιών, αυτό διαθέτει αργό ζουμ, διαφάνειες, pop-in, αχνό επικάλυψη μεταξύ άλλων.
Απόσπασμα SVG clip-Path Hover Effect
Ένα σούπερ φοβερό φωτοστέφανο με φωτοστέφανο που τροφοδοτείται από το SVG clip-path και μεταβάσεις CSS. Λειτουργεί ωραία σε Chrome, Opera και Safari.
