Δημιουργήστε όμορφες μεταβάσεις κλίσης με το Granim.js
Ο σχεδιασμός ιστοσελίδων είναι γεμάτος ομορφιά και ευχάριστο σχεδιασμό διασύνδεσης. Ορισμένες λειτουργίες είναι λειτουργικές ενώ άλλες είναι μόνο για προβολή. Διαβαθμίσεις κλίσης είναι αποκλειστικά για επίδειξη αλλά παίζουν αρκετά μια γροθιά!
Με Granim.js, μπορείτε να οικοδομήσετε προσαρμοσμένες μεταβάσεις βαθμίδων πλήρους χρώματος που φαίνονται ομαλά και πλέκουν όμορφα με οποιαδήποτε ιστοσελίδα.
Μπορείς να βρεις μια δέσμη προσαρμοσμένων παραδειγμάτων στην κύρια σελίδα παραδειγμάτων με πολλά διαφορετικά στυλ από απλές μεταβάσεις σε πιο περίπλοκα κινούμενα σχέδια χρησιμοποιώντας εικόνες φόντου.
Το Granim είναι η μόνη βιβλιοθήκη JS που γνωρίζω αντιμετώπιση των μεταβάσεων βαθμίδων. Αυτή είναι μια ερώτηση που πάντα αναρωτιόμουν και ποτέ δεν βρήκε πραγματικά μια μεγάλη απάντηση. Το Granim είναι η τέλεια λύση και είναι που βασίζεται σε βανίλια JavaScript, έτσι ώστε να μπορεί να τρέξει μαζί με jQuery ή οποιαδήποτε άλλη βιβλιοθήκη JS.
Μόλις ρίχνω το granim.js αρχείου στη σελίδα σας για να ξεκινήσετε. Μπορείτε είτε να κατεβάσετε ένα αντίγραφο από το GitHub είτε να το κατεβάσετε από ένα live CDN.
Εδώ ένα βασικό δείγμα κώδικα από το repo GitHub:
Τα πράγματα μπορούν να πάρουν πολύ πιο περίπλοκα από αυτό, έτσι πρέπει πραγματικά ανακαλύψτε τα παραδείγματα να μάθω περισσότερα. Θα βρεις αποσπάσματα κώδικα κάτω από κάθε παράδειγμα ώστε να μπορείτε να δημιουργούν μεταβάσεις κλίσης για φόντο φόντου εικόνας και ακόμη και για μάσκες εικόνας.
Οι μάσκες εικόνας μπορούν να χρησιμοποιηθούν για ένα λογότυπο, για παράδειγμα μια εικόνα PNG, η οποία αποκρύπτεται πίσω από μια κλίση. Αυτό σας επιτρέπει να δημιουργήσετε ένα λογότυπο JS-animation όπου η κλίση αργά μεταβαίνουν σε όλο το κείμενο.
Σημειώστε αυτό το παράδειγμα πολύ του κώδικα JS / CSS έτσι δεν είναι μια απλή εφαρμογή.
Όσο πιο πολύ ασκείτε με τον Granim, τόσο πιο εύκολο θα είναι να ρυθμίσετε και να προσαρμόσετε. Και με αυτό είναι η μόνη αληθινή διαβάθμιση μετάβασης βιβλιοθήκη σε απευθείας σύνδεση είναι η απόλυτη καλύτερη λύση για κάθε έργο.
Η βιβλιοθήκη εξακολουθεί να ενημερώνεται ημι-συχνά, ώστε να μπορείτε να ελέγξετε την καρτέλα προβλημάτων για περισσότερες πληροφορίες.
Του μια αρκετά μικρή βιβλιοθήκη έτσι δεν υπάρχουν πάρα πολλά πράγματα για να πάει στραβά ή χρειάζονται ενημέρωση. Αυτό είναι που καθιστά Granim.js μια αξιόπιστη λύση για οποιαδήποτε τοποθεσία μικρό ή μεγάλο.
Προς το κατεβάστε ένα αντίγραφο επισκεφθείτε τη σελίδα των εκδόσεων στο GitHub ή αρπάξτε ένα αντίγραφο του .js αρχείο απευθείας από cdnjs. Και στο δείτε την πηγή σε ένα ζωντανό παράδειγμα ρίξτε μια ματιά στο demo του CodePen που δημιουργήθηκε από τον Jonathan Schneider.
