Η τέχνη της αφήγησης μπορεί να έχει ξεκινήσει πολύ πριν ο homo sapiens μιλήσει. Εξελίσσεται μαζί μας και προσαρμόζεται στα διαθέσιμα εργαλεία. Οι ιστορίες που λέγονταν και μεταδόθηκαν από γενιά σε γενιά, αγκάλιασαν από την πλευρά τους την κυριολεκτική εξέλιξη από τα χειρόγραφα βιβλία, μέχρι τη μαζική εκτύπωση, την ψηφιακή επεξεργασία κειμένου και πρόσφατα το Διαδίκτυο. Από την άποψη της ανθρώπινης εξέλιξης, αισθανόμαστε ότι δεν εκμεταλλευτήκαμε το πλήρες δυναμικό όλων των διαθέσιμων τεχνολογιών που έχουμε σήμερα. Ενώ τα βίντεο έχουν ήδη ξεκινήσει τις καμπάνιες εικονικής παγκόσμιας κυριαρχίας, το μεγαλύτερο μέρος του περιεχομένου του ιστού βρίσκεται ακόμα σε κείμενο.

Το σύγχρονο περιεχόμενο ιστού θα πρέπει να είναι διαδραστικό και να ενσωματώνει διάφορα μέσα μαζικής ενημέρωσης μαζί με το καλό απλό κείμενο. Ορισμένα εργαλεία μπορούν να μας βοηθήσουν να χτυπήσουμε την ιστορία μας μέχρι μερικές εγκοπές. Και αν είστε χρήστης του WordPress, μπορείτε να χρησιμοποιήσετε το Animate It! plugin για να προσθέσετε δροσερές κινήσεις CSS3 στο περιεχόμενό σας.

Ποιες είναι οι δυνατότητες;

Μαζί με το HTML5, το CSS3 είναι το αρκτικόλεξο που σχετίζεται με το σύγχρονο web design. Με λίγα λόγια, το CSS είναι το στοιχείο web που επιτρέπει στους χρήστες να ελέγχουν την εμφάνιση της ιστοσελίδας όπως η διάταξη, η θέση, η γραμματοσειρά, το χρώμα κλπ. Η τελευταία ενσωμάτωση CSS3 είναι αρκετά έξυπνη ώστε να επιτρέπει στους χρήστες να δημιουργούν εικόνες και κινούμενα σχέδια κωδικούς.

Ευτυχώς, δεν χρειάζεται να είστε κωδικοποιητής για να χρησιμοποιήσετε το CSS3 στον ιστότοπό σας WordPress. Το Animate It! plugin σας επιτρέπει να εφαρμόσετε animations CSS3 σε Posts, widgets και σελίδες με το πάτημα ενός κουμπιού στον επεξεργαστή. Εκτός αυτού, οι χρήστες μπορούν να ελέγχουν τους ενεργοποιητές. Για παράδειγμα, μπορούν να εφαρμόσουν κινούμενα σχέδια σε κύλιση, κάντε κλικ και τοποθετήστε το δείκτη του ποντικιού και προσθέστε διαφορετική μετατόπιση κύλισης σε μεμονωμένα μπλοκ κινούμενων σχεδίων. Το plugin έρχεται επίσης με τους τόνους των χαρακτηριστικών, όπως:

  • 50+ Ψυχαγωγία Εισόδου, Εξόδου και Προσοχής Προσοχής
  • Παρέχει λειτουργία καθυστέρησης και έλεγχο διάρκειας σε κινούμενα σχέδια για να δημιουργήσει μια ωραία ακολουθία κινουμένων σχεδίων
  • Επιτρέψτε στους χρήστες να εφαρμόζουν κινούμενα σχέδια απεριόριστα ή σε οποιοδήποτε σταθερό αριθμό φορές
  • Επιλογή για την προσθήκη προσαρμοσμένων κλάσεων CSS σε μεμονωμένο μπλοκ κινούμενων σχεδίων
  • Επιλογές για την ενεργοποίηση ή την απενεργοποίηση των κινούμενων εικόνων σε Smartphones και Tablets

Τι μπορείτε να κάνετε με το Animate It! συνδέω? Μπορείτε να προσθέσετε απλά διαδραστικότητα στα άρθρα σας, να δημιουργήσετε ελκυστικές σελίδες πωλήσεων, να εμβαθύνετε τα συναισθήματα των φαντασμάτων σας ή ακόμα και να δημιουργήσετε μια ισχυρή επαγγελματική παρουσίαση αν θέλετε. Απλά θυμηθείτε να μην πάτε στη θάλασσα επειδή βομβαρδίζετε τον επισκέπτη σας με απεριόριστη κίνηση δεν είναι ο καλύτερος τρόπος να αποκτήσετε πιστούς αναγνώστες.

Ξεκινώντας με το Animate It!

Μετά την εγκατάσταση και την ενεργοποίηση του plugin, μπορείτε να βρείτε το κουμπί για να προσθέσετε animation στο "WordPress" Editor. "Αυτό το κουμπί θα εμφανιστεί μόνο στην οπτική λειτουργία, αλλά αν έχετε μάθει τις εντολές, είναι δυνατόν να εισαγάγετε τους κωδικούς από το λειτουργία απλού κειμένου (περισσότερο σε αυτό αργότερα).

Αφού πατήσετε το κουμπί, θα λάβετε ένα παράθυρο επιλογών. Υπάρχουν τρεις καρτέλες που σας επιτρέπουν να προσαρμόσετε το κινούμενο σχέδιο. Η πρώτη καρτέλα είναι "Καταχώριση". Αυτός είναι ο χώρος για να προσθέσετε την κινούμενη εικόνα που θα εισέλθει στην οθόνη υπό ορισμένες συνθήκες. Τέσσερις επιλογές drop-down θα σας βοηθήσουν να προσαρμόσετε τα εφέ κίνησης.

  • Η κίνηση είναι το μέρος για να επιλέξετε το είδος της κινούμενης εικόνας που θέλετε.
  • Η καθυστέρηση θα σας βοηθήσει να ρυθμίσετε την ώρα πριν ξεκινήσει η κινούμενη εικόνα.
  • Η διάρκεια είναι σχετικά με το πόσο χρόνο θα παιχτεί η κινούμενη εικόνα από την αρχή μέχρι το τέλος. Όσο μεγαλύτερος είναι ο αριθμός, τόσο πιο αργή θα είναι η κινούμενη εικόνα.
  • Ο συγχρονισμός είναι η αναλογία του animation που παίζετε κάθε φορά. Για παράδειγμα, το εφέ "easeIn" θα αναπαράγει την κινούμενη εικόνα πιο αργά στην αρχή και πιο γρήγορα προς το τέλος.

Μπορείτε να ελέγξετε τους συνδυασμούς εφέ παίζοντας χρησιμοποιώντας το κουμπί "Animate It!". Αν το αποτέλεσμα είναι σύμφωνα με τις προτιμήσεις σας, μπορείτε να πατήσετε το κουμπί "Εισαγωγή" για να το χρησιμοποιήσετε στο περιεχόμενό σας.

Η καρτέλα "Έξοδος" είναι λίγο πολύ παρόμοια με την καταχώριση, αλλά για να προσθέσετε μια κινούμενη εικόνα που θα εγκαταλείψει την οθόνη. Συνδυάζοντας τα δύο, μπορείτε να προσθέσετε ένα αντικείμενο που θα εμφανιστεί στην οθόνη και στη συνέχεια να εξαφανιστεί.

Η καρτέλα "Επιλογές" είναι εκεί που ελέγχετε τις γενικές ρυθμίσεις της κινούμενης εικόνας. Εδώ μπορείτε να ρυθμίσετε την κινούμενη εικόνα να αναπαράγεται σε βρόχο ή μόνο μία φορά, να διατηρεί την τελική κατάσταση του στοιχείου, να προσθέτει προσαρμοσμένο κώδικα CSS και να ρυθμίζει την σκανδάλη που θα ξεκινήσει το κινούμενο σχέδιο. Συγκεκριμένα για τη σκανδάλη - τη ρύθμιση "Animate On" - μπορείτε να επιλέξετε Μετακινηθείτε, για παράδειγμα, και η κινούμενη εικόνα θα ξεκινήσει μόνο εάν η περιοχή είναι ήδη ορατή στην οθόνη.

Προσθήκη του περιεχομένου σας

Αφού πατήσετε το κουμπί "Εισαγωγή", θα δείτε μερικές γραμμές κονκάρδων που προστίθενται στην περιοχή περιεχομένου σας. Αυτά τα shortcodes είναι αυτά που θα ελέγχουν την κινούμενη εικόνα. Και δεδομένου ότι είναι μόνο κωδικοί με τιμές, θα μπορούσατε να προσθέσετε τους κώδικες με μη αυτόματο τρόπο αν είστε καλοί με τους κωδικούς και θέλετε να. Ωστόσο, άλλοι άνθρωποι πρέπει να κολλήσουν με το Animate It! κουμπί.

Θα δείτε επίσης μια γραμμή κειμένου που λέει, " Προσθέστε το περιεχόμενό σας σε αυτήν την περιοχή. "Εδώ είναι όπου μπορείτε να προσθέσετε τα στοιχεία που θέλετε να ζωντανέψετε. Θα μπορούσε να είναι κείμενο, εικόνες, εικονίδιο, λογότυπα, ηχητικά μηνύματα, βίντεο ή ακόμα και άλλα shortcodes. Δοκίμασα την προσθήκη ενός σύντομου κώδικα δακτυλογραφημένου αποτελέσματος που δημιουργήθηκε χρησιμοποιώντας το plugin Typed Js και το αποτέλεσμα είναι υπέροχο.

Αν υπάρχει ένα πράγμα που θα μπορούσα να πω σχετικά με τη χρήση του Animate It! plugin, θα ήταν "Experiment!" Παίξτε με αυτό και δοκιμάστε διαφορετικούς συνδυασμούς για να πάρετε το αποτέλεσμα που θέλετε. Εχει πλάκα. Και εδώ είναι το αποτέλεσμα που ήρθα μέσα σε λιγότερο από ένα λεπτό. Συνδύασα το Animate It! plugin με plugin Typed Js.

Πιστεύετε ότι είναι καιρός να προσθέσετε διαδραστικά στοιχεία στο περιεχόμενο του ιστού σας; Σκέφτεστε να δοκιμάσετε το plugin; Χρησιμοποιείτε διαφορετικά πρόσθετα για κινούμενα σχέδια; Παρακαλώ μοιραστείτε χρησιμοποιώντας τα παρακάτω σχόλια.