Web Animations στην Κατασκευή Ιστοσελίδων
Τα τελευταία χρόνια τα “κινούμενα σχέδια” (animated graphics) χρησιμοποιούνται συχνά στην Κατασκευή Ιστοσελίδων. Η αίσθηση της κίνησης στα γραφικά στοιχεία, προσθέτει μία νέα διάσταση σε μία ιστοσελίδα. Αρκετά παραδείγματα συναντάμε, σε βοηθητικά παράθυρα, παράθυρα απευθείας συνομιλίας (chat), φόρμες κριτικής κ.α.
Σε αυτό το άρθρο, θα προσεγγίσουμε μόνο τα CSS Transitions, μπορείτε να διαβάσετε όλο το άρθρο εδώ
CSS Transitions
Μία από τις τεχνικές δημιουργίας animations στην κατασκευή ιστοσελίδων, είναι τα CSS Transitions. Τα Transitions στην CSS, ουσιαστικά κατευθύνουν τον περιγιητή (browser alike Chrome, Firefox) στο να μεταβάλει την κατάσταση ενός στοιχείου από την αρχική θέση σε μία τελική κατάσταση. Η σύνταξη της είναι απλή, ενώ συμπεριλαμβάνει 4 ιδιότητες.
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
Για παράδειγμα, ας εξετάσουμε ένα κουμπί. Ένα τυπικό κουμπί σε μία ιστοσελίδα, μόλις περάσουμε τον κέρσορα επάνω από το κουμπί αλλάζει χρώμα. Αν πατήσουμε το κουμπί, δημιουργεί την αίσθηση ότι μένει πατημένο.
See the Pen Button Transition Effect by Envato Tuts+ (@tutsplus) on CodePen.
Αν θέλουμε να βελτιώσουμε την εμπειρία του χρήση, μπορούμε να δημιουργήσουμε την αίσθηση της βαρύτητας προσθέτοντας ένα transition, στο κουμπί (.button). Δηλώνουμε transition: all 1s; για να οδηγήσουμε τον περιηγητή στο να πραγματοποιήσει όλες τις δηλωμένες αλλαγές σε χρόνο διάρκειας 1 δευτερολέπτου. Στο παρακάτω παράδειγμα, διαγράψτε τα tags για τα σχόλια, έτσι ώστε να ισχύει η οδηγία.
See the Pen Button Transition Effect by Envato Tuts+ (@tutsplus) on CodePen.
Τώρα που είδαμε πως δουλεύει, ας δοκιμάσουμε να ενεργοποιήσουμε την παράδειγμα 3 από παραπάνω παράδειγμα.
Διαπιστώνουμε, πως με την χρήση του transitions μπορούμε να δημιουργήσουμε μία εντελώς διαφορετική εμπειρία για τον τελικό χρήστη, στην ιστοσελίδα μας.
Σαφώς, αυτά είναι μόλις τα πρώτα παραδείγματα δημιουργίας κινούμενων στοιχείων γραφικών.
Ανατρέξτε στο άρθρο, το οποίο προς το παρών είνα διαθέσιμο μόνο στα Αγγλικά, για να ανακαλύψετε και τις υπόλοιπες μεθόδους.
Πηγή: webdesign.tutplus.com