Σήμερα θα δούμε: Οι αληθινοί γνώστες της μουσικής γνωρίζουν ότι για την ποιότητα...
Επισκόπηση προγράμματος Η έκδοση υπολογιστή του Microsoft Excel Viewer θα επιτρέψει... Chercherσαν μια ομαλή κύλιση σε μια άγκυρα. Για παράδειγμα, αυτό θα μπορούσε να είναι ένα μενού στο επάνω μέρος της σελίδας στο οποίο, όταν κάνετε κλικ, θα πραγματοποιήσει ομαλή κύλιση στο αντίστοιχο στοιχείο.
Πιθανότατα έχετε δει παρόμοια επίδραση σε άλλες σελίδες προορισμού. Σήμερα θα μάθετε πώς να το εφαρμόσετε.
Ομαλή κύλιση στην άγκυρα χρησιμοποιώντας javascriptΣε ένα από τα έργα, η εργασία ήταν να υλοποιηθεί ένα παρόμοιο εφέ με ομαλή κύλιση σε ένα συγκεκριμένο στοιχείο όταν κάνετε κλικ σε ένα από τα στοιχεία μενού.
Ας ξεκινήσουμε με τη σύνδεση βιβλιοθήκη jqueryστο έργο μας και γράψτε τη διαδρομή προς το σενάριο που είναι υπεύθυνο για την ομαλή κύλιση:
Ασχοληθήκαμε με αυτό. Τώρα πρέπει να τοποθετήσετε ετικέτες και άγκυρες στις οποίες θα πραγματοποιηθεί κύλιση.
Θα σας πω το παράδειγμα του μενού που υπήρχε στο έργο για ενοικίαση επαγγελματικού εξοπλισμού για εργασίες κατασκευής και καθαρισμού. Εδώ είναι πηγαίος κώδικας:
- Εξοπλισμός καθαρισμού
- Κατασκευαστικός εξοπλισμός
- Στοκ
Όπως μπορείτε να δείτε, όλα είναι στάνταρ και χωρίς κόλπα. Στη συνέχεια δημιουργήθηκαν μπλοκ που αντιστοιχούν στο μενού στη σελίδα προορισμού. Αποκάλυψαν μια συγκεκριμένη υπηρεσία. Ήταν απαραίτητο να γίνει μια ομαλή μετάβαση σε αυτά τα μπλοκ.
Για να γίνει η μετάβαση σε στο σωστό μέροςστον ιστότοπο, απλώς προσθέστε έναν σύνδεσμο στο αναγνωριστικό το επιθυμητό μπλοκ. Ας το κάνουμε αυτό.
- Εξοπλισμός καθαρισμού
- Κατασκευαστικός εξοπλισμός
- Στοκ
Τώρα πρέπει να ορίσετε τα αναγνωριστικά "καθαρισμός", "οικοδόμηση", "ενέργειες" στα αντίστοιχα μπλοκ. Για μένα φαινόταν κάπως έτσι:
Δώστε προσοχή στην ιδιότητα name="cleaning". Πρέπει να ταιριάζει με την ταυτότητα. Εδώ είναι το ίδιο το σενάριο:
$(function () ( $("a.scrollto").click(function () ( let elementClick = $(this).attr("href") ας προορισμός = $(elementClick).offset().top; $ ("html:not(:animated),body:not(:animated)").animate(( scrollTop: προορισμός ), 1100 ));
Εάν εσείς, όπως εγώ, πρέπει να εφαρμόσετε την κύλιση σε πολλά στοιχεία, τότε απλώς βάλτε τα αναγνωριστικά με παρόμοιο τρόπο και αυτό είναι! Πολύ βολικό τρόποκαι εύκολο στην εφαρμογή δεν λέω ότι είναι το καλύτερο, αλλά λειτουργεί. Αν κάποιος μπορεί να το απλοποιήσει, να το συντομεύσει ή με κάποιο τρόπο να το βελτιώσει, θα σας ήμουν πολύ ευγνώμων. Όσο για μένα, έτσι αυτό το αποτέλεσμαμπορεί να είναι χρήσιμο σε πολλούς.
Λάβετε υπόψη ότι στην αρχή του άρθρου υποδείξαμε το όνομα και τη διαδρομή του σεναρίου ως εξής:
Δηλαδή, πρέπει να δημιουργήσετε έναν φάκελο στη ρίζα του ιστότοπού σας που ονομάζεται js και να τοποθετήσετε ένα αρχείο με το όνομα perehod.js σε αυτόν. Και μετά εισάγετε τον ίδιο τον κώδικα σεναρίου σε αυτό. Αυτός είμαι εγώ, για παν ενδεχόμενο. Κι αν κάποιος δεν καταλαβαίνει;
Και αυτό είναι όλο για σήμερα. Τώρα ξέρετε πώς να εφαρμόσετε ένα τόσο ωραίο εφέ όπως η ομαλή κύλιση σελίδας στην άγκυρα. Αντίο σε όλους!
P.s.: Ευχαριστώ όσους ανταποκρίθηκαν στην κλήση κοινωνικά δίκτυαβοήθεια με ιδέες για νέα άρθρα. Δεν ξέρω γιατί αποφασίσατε να γράψετε σε προσωπικά μηνύματα, είναι καλύτερα να το αφήσετε στα σχόλια, έτσι θα είναι πιο εύκολο για τους άλλους να γράψουν μια κριτική αν δουν ότι κάποιος πιο θαρραλέος το έχει ήδη κάνει.
U αυτή τη μέθοδουπάρχει ένα μειονέκτημα, δεν λειτουργεί καλά με το wow.js, το οποίο χρησιμοποιήσαμε για να δημιουργήσουμε το animation στο άρθρο. Ορισμένα κινούμενα σχέδια δεν παίζουν και υπάρχει κενός χώρος στη θέση τους. Αν κάποιος ξέρει πώς να το διορθώσει, γράψτε στα σχόλια ή μέσα
Document.querySelector("nav").addEventListener("κλικ", συνάρτηση (e) ( var dest = e.target.href if (!dest || !(dest = dest.split("#"))) return e .preventDefault() var p = document.querySelector("main") var a = document.getElementById(dest) var st = p.scrollTop var d = a.getBoundingClientRect().top - p.getBoundingClientRect().top - 8 var s = d / 1000 var pt = performance.now() requestAnimationFrame(function f(t) (console.log((p.scrollTop = st + d * (t - pt) / 1000), (st + d)) var cur = p.scrollTop = st + s * (t - pt) if (s st + d: cur< st + d) requestAnimationFrame(f) else requestAnimationFrame(() =>p.scrollTop = st + d) )) ));
* ( μέγεθος πλαισίου: πλαίσιο-πλαίσιο; ) πλοήγηση (θέση: κολλώδες; πλάτος: 1,25 εκ. αιώρηση: αριστερά; περιθώριο: 8 εικονοστοιχεία; ) a ( οθόνη: μπλοκ, ύψος γραμμής: 1,25 εκ., στοίχιση κειμένου: στο κέντρο; ) a:hover ( φόντο: ασημί; ) html, body, main ( ύψος: 100%; περιθώριο: 0; ) main ( υπερχείλιση: αυτόματη; ) h1 ( περιθώριο: 16 px 0; φόντο: αντίκες; ) 1 2 3 4 5 6 7 8 9 10 1 2 Υπάρχει ομαλή κύλιση μεταξύ των αγκυρών σε καθαρό JS; Αναρωτιέμαι αν υπάρχει σενάριο γιαομαλή κύλιση σε καθαρό JS, κάνω το site χωρίς
3χρησιμοποιώντας jQuery
4χρησιμοποιώντας jQuery
5χρησιμοποιώντας jQuery
6χρησιμοποιώντας jQuery
7χρησιμοποιώντας jQuery
8χρησιμοποιώντας jQuery
9χρησιμοποιώντας jQuery
10χρησιμοποιώντας jQuery
Υπάρχει ομαλή κύλιση μεταξύ των αγκυρών σε καθαρό JS; Αναρωτιέμαι αν υπάρχει σενάριο για ομαλή κύλιση σε καθαρό JS, φτιάχνω ιστότοπο χωρίς χρήση jQuery ΣΕπρόσφατα Τα κινούμενα σχέδια που αναπαράγονται καθώς κάνετε κύλιση στη σελίδα γίνονται όλο και πιο δημοφιλή. Ωστόσο, παρατήρησα ότι η συντριπτική πλειοψηφία των προγραμμάτων περιήγησης δεν έχει σχεδιαστεί για τέτοια κινούμενα σχέδια. Η κύλιση των σελίδων με το ποντίκι δεν γίνεται ομαλά (όπως στον Firefox), αλλά σε βήματα. Ως αποτέλεσμα, τα κινούμενα σχέδια κύλισης στις σελίδες παίζουν επίσης σπασμωδικά. Κατά τη γνώμη μου, το πρόβλημα εδώ δεν είναι καθόλου με τα προγράμματα περιήγησης, αλλά με τα πρόσθετα που χρησιμοποιούνται για τη δημιουργία αυτών των κινούμενων εικόνων. Γιατί αυτοί είναι που το επιτρέπουν. Πιστεύω ότι για οποιοδήποτε κινούμενο σχέδιο θα πρέπει να υπάρχει κάποια μέγιστη ταχύτητα αναπαραγωγής με την οποία το animation θα είναι ομαλό και ο χρήστης θα μπορεί να καταλάβει τι συνέβη στη σελίδα. Αν συμφωνείτε μαζί μου, τότε κινηθείτε ομαλά και χωρίς τραντάγματα κάτω από τη γάτα.
Σε αυτό το άρθρο θα μιλήσουμε για ένα πρόσθετο για τη δημιουργία κινούμενων ελεγχόμενων με κύλιση, το οποίο ονόμασα Scrollissimo. Το πλησιέστερο ανάλογό του είναι το πρόσθετο ScrollMagic. Από κοινά χαρακτηριστικάέχουν το σκοπό τους και το γεγονός ότι η Greensock επιλέχθηκε ως η μηχανή κινουμένων σχεδίων. Εάν για κάποιο λόγο δεν είστε εξοικειωμένοι μαζί του ακόμα, τότε ίσως για πλήρη κατανόησηΌλα όσα συμβαίνουν, θα πρέπει να διαβάσετε άρθρα για το Greensock που έχουν ήδη δημοσιευτεί στο Habré. Για παράδειγμα αυτό.
Εκτός από ομοιότητες, αυτά τα πρόσθετα έχουν και διαφορές. Αλλά θα ήθελα να τονίσω ιδιαίτερα το κύριο πράγμα - ομαλή κινούμενη εικόνα. Για να μην ακούγεται αβάσιμο, ορίστε η απόδειξη για εσάς. Αρχική σελίδαΤο ScrollMagic επιβεβαιώνει επίσης τα λόγια μου.
Πώς να το χρησιμοποιήσετε για να ξεκινήσετε να χρησιμοποιείτε το Scrollissimo, πρέπει να κάνετε δύο πράγματα. Πρώτα, συνδέστε το Greensock. Μπορεί να συνδεθεί μόνο ελάχιστα απαιτούμενες βιβλιοθήκες(TweenLite, TimelineLite και CSS):
ή, συνδέστε μια βιβλιοθήκη που περιέχει όλα τα παραπάνω:
Και δεύτερον, συνδέουμε το ίδιο το Scrollissimo. Η βιβλιοθήκη είναι διαθέσιμη από το αποθετήριο. Και για χρήστες bower είναι επίσης δυνατή η εγκατάσταση με την εντολή
Bower εγκατάσταση scrollissimo
Έγινε λήψη, συνδεθείτε τώρα:
Μπορείτε προαιρετικά (αλλά όχι απαραίτητα) να συμπεριλάβετε το jQuery για δική σας διευκόλυνση. Αργότερα στο άρθρο θα γράψω κώδικα χρησιμοποιώντας τον για μεγαλύτερη αναγνωσιμότητα.
Έχω προβλέψει τη δυνατότητα ενεργοποίησης του Scrollissimo όχι μόνο κατά την κύλιση ολόκληρης της σελίδας, αλλά και σε οποιοδήποτε άλλο συμβάν, αλλά στη συντριπτική πλειονότητα των περιπτώσεων πρέπει να εγγραφείτε στο συμβάν κύλισης σελίδας:
$(window).scroll(function())( Scrollissimo.knock(); ));
Τώρα, κάθε φορά που συμβαίνει ένα συμβάν κύλισης, το Scrollissimo θα υπολογίζει την τρέχουσα πρόοδο της κινούμενης εικόνας και θα την αναπαράγει.
ΣΗΜΕΙΩΣΗ: Εάν δεν χρειάζεστε την προσθήκη για να μετρήσετε την ίδια την κύλιση της σελίδας, μπορείτε να μεταβιβάσετε την τιμή της ιδιότητας scrollTop στη μέθοδο knock(). η σελίδα 1000 pixel .
ΣΗΜΕΙΩΣΗ: Για την υποστήριξη συσκευών αφής, υπάρχει ένας προσαρμογέας αφής scrollissimo.touch.js, ο οποίος καταπολεμά το πάγωμα της σελίδας κατά την κύλιση.
Αυτό ήταν, τώρα μπορείτε να κάνετε απευθείας κίνηση! Το Scrollissimo μπορεί να εμψυχώσει δίδυμα (μεμονωμένα κινούμενα σχέδια) και χρονοδιαγράμματα (ουρά μεμονωμένων κινούμενων εικόνων). Ας ξεκινήσουμε με τα δίδυμα.
Το απλούστερο κινούμενο σχέδιο Ας πούμε ότι έχουμε ένα όμορφο κόκκινο div που ονομάζεται Divy. Θέλει πολύ να μεγαλώσει, αλλά μέχρι στιγμής έχει μόνο 50 pixel πλάτος και ύψος.
#Divy(θέση: σταθερό; επάνω: 0; αριστερά: 0; ύψος: 50 px; πλάτος: 50 px; φόντο: κόκκινο; )
Ας το κάνουμε έτσι ώστε ήδη μετά τα 1000 pixel από την αρχή της σελίδας να γίνει πλάτος 300 pixel. Για να το κάνουμε αυτό, θα δημιουργήσουμε πρώτα το αντίστοιχο tween, σαν να κάνουμε ένα κανονικό animation χρησιμοποιώντας το Greensock:
Var divyTween = new TweenLite($("#Divy"), 1000, ( πλάτος: 300 ));
ΣΗΜΕΙΩΣΗ: Όπως παρατηρήσατε, η μόνη διαφορά από την τυπική κινούμενη εικόνα Greensock είναι ότι καθορίζουμε τη διάρκεια της κίνησης όχι σε δευτερόλεπτα, αλλά σε pixel (στην περίπτωσή μας, 1000).
Μεγάλος! Το μόνο που μένει είναι να δώσουμε αυτό το δίδυμο να το καταβροχθίσει ο Scrollissimo:
Scrollissimo.add(divyTween, 0, 6);
Τώρα ας επιβραδύνουμε και ας δούμε αυτή τη γραμμή. Το πρώτο επιχείρημα είναι το ίδιο tween που δημιουργήσαμε. Το δεύτερο επιχείρημα είναι από ποια θέση να ξεκινήσει η κινούμενη εικόνα. Στην περίπτωσή μας, αυτή είναι η αρχή της σελίδας (0 pixel). Το τρίτο επιχείρημα παραμένει. Εδώ φτάνουμε κύριο χαρακτηριστικό, που διαφοροποιεί το Scrollissimo από τα κανονικά πρόσθετα. Το τρίτο όρισμα είναι η μέγιστη ταχύτητα αναπαραγωγής κινούμενων εικόνων. Αυτή η ταχύτητα μετριέται σε αφηρημένες αδιάστατες μονάδες και επιλέγεται «με το μάτι». Θα απαντήσω αμέσως στην ερώτηση "Τι θα συμβεί εάν δεν καθορίσετε την τρίτη παράμετρο;" Αν δεν διευκρινίσετε μέγιστη ταχύτητα, τότε δεν θα υπάρχει. Αυτό το κινούμενο σχέδιο θα παίζεται με τον ίδιο τρόπο που θα παιζόταν από κανονικά πρόσθετα.
Var divyTimeline = new TimelineLite(); divyTimeline.to($("#Divy"),1000 (πλάτος: 300 )); divyTimeline.to($("#Divy"), 1000, ( ύψος: 300 )); Scrollissimo.add(divyTimeline, 0, 6);
Συμπέρασμα Αυτό είναι το μόνο που υπάρχει σε αυτό επιτυχημένη δημιουργίακινούμενα σχέδια με κύλιση χρησιμοποιώντας το Scrollissimo. Εδώ μάλλον θα τελειώσω το άρθρο. Εν κατακλείδι, θα πω ότι το πρόσθετο βρίσκεται υπό ενεργό ανάπτυξη, έχει περιθώρια ανάπτυξης και βελτίωσης. Ως εκ τούτου, θα χαρώ να λάβω τυχόν ερωτήσεις, συμβουλές και αιτήματα για δυνατότητες.Διάταξη, εμψύχωση!
Όπως πιθανώς ήδη μαντέψατε, το άρθρο δεν θα μιλήσει για τουλίπες και τριαντάφυλλα ή πώς να μεγαλώσετε μια μηλιά από ένα χαμομήλι (άρα αυτό δεν είναι το μέρος για τους νεαρούς Michurinians :-), αλλά θα μιλήσουμε για την αλλαγή του χρώματος των στοιχείων μιας ιστοσελίδας, σχετικά με την ομαλή ροή ενός χρώματος σε άλλο, π.χ. Ας μιλήσουμε για τα fade effect.
ΠαράδειγμαΑς ξεκινήσουμε με ένα παράδειγμα: τοποθετήστε το δείκτη του ποντικιού πάνω από μια εικόνα και, στη συνέχεια, απομακρύνετε τον κέρσορα.
Εάν δεν ενδιαφέρεστε για θεωρητικές λεπτομέρειες, αλλά χρειάζεστε έτοιμη λύσημετά σε σένα.
Δήλωση του προβλήματοςΔίνονται δύο χρώματα: το χρώμα έναρξης και το χρώμα τέλους.
Είναι απαραίτητο να βρούμε ενδιάμεσα χρώματα, εφαρμόζοντας τα ένα προς ένα σε ένα στοιχείο της σελίδας, θα έχουμε μια ομαλή μετάβαση από το αρχικό χρώμα στο τελικό. Θα πρέπει επίσης να μάθετε πόσα από αυτά τα ενδιάμεσα χρώματα πρέπει να υπάρχουν και μετά από ποιο χρονικό διάστημα ένα ενδιάμεσο χρώμα πρέπει να αλλάξει σε ένα άλλο.
Ψάχνοντας βαθύτερα το θέμαΑς πάρουμε, για παράδειγμα, το λευκό ως αρχικό χρώμα και το πορτοκαλοκόκκινο ως το τελικό χρώμα.
| #FFFFFF | ? | ...ν... | ? | #FF4500 |
Τώρα πρέπει να βρούμε ενδιάμεσα χρώματα. Πρόστιμο. Μα πώς;! Πώς πρέπει να προσεγγίσουμε αυτό το θέμα; Για να το κάνουμε αυτό, ας θυμηθούμε (ή ας μάθουμε :-) πώς σχηματίζεται το χρώμα στην οθόνη της οθόνης. Οποιοδήποτε χρώμα στην οθόνη μιας οθόνης σχηματίζεται από τρία βασικά χρώματα: κόκκινο (Κόκκινο), πράσινο (Πράσινο) και μπλε (Μπλε), με την ανάμειξή τους (δηλ. χρωματικό μοντέλο RGB). Και τα χρώματα σε μια ιστοσελίδα υποδεικνύονται είτε με αριθμητικές τιμές στο ίδιο σύστημα RGB είτε με κυριολεκτικά ονόματα χρωμάτων (για παράδειγμα, λευκό για λευκό, κόκκινο για κόκκινο κ.λπ., αλλά δεν έχουν όλα τα χρώματα ονόματα), τα οποία , πάντως, υποδεικνύουν αριθμητικές τιμές. Αλλά δεν θα εξετάσουμε το ενδεχόμενο να προσδιορίσουμε ένα χρώμα με το όνομα, επειδή τα ονόματα επινοήθηκαν για την ευκολία της ανθρώπινης απομνημόνευσης, αλλά στην περίπτωσή μας θα δημιουργήσουν ταλαιπωρία κατά τους υπολογισμούς, επειδή θα εξακολουθεί να χρειάζεται μετάφραση σε αριθμητική μορφή. Μπορείτε να ορίσετε την αριθμητική τιμή ενός χρώματος με δύο τρόπους: δεκαεξαδικό και λειτουργικό.
- Υπάρχει ομαλή κύλιση μεταξύ των αγκυρών σε καθαρό JS; Αναρωτιέμαι αν υπάρχει σενάριο για ομαλή κύλιση σε καθαρό JS, φτιάχνω ιστότοπο χωρίς χρήση jQuery δεκαεξαδική παράστασηρεκόρ Τιμές RGBέχει την ακόλουθη μορφή: ένας χαρακτήρας "#" ακολουθούμενος αμέσως από τρεις ή έξι δεκαεξαδικούς χαρακτήρες. Μια τριψήφια τιμή RGB (#rgb) μετατρέπεται σε μια εξαψήφια ακολουθία (#rrggbb) αντιγράφοντας τα ψηφία αντί να προσθέσετε μηδενικά. Για παράδειγμα, το #fb0 επεκτείνεται σε #ffbb00. Επομένως, το λευκό χρώμα (#ffffff) μπορεί να καθοριστεί σε συντομότερη μορφή (#ffff).
- Στη λειτουργική αναπαράσταση, η μορφή για τη σύνταξη μιας τιμής RGB είναι η συμβολοσειρά "rgb(, ακολουθούμενη αμέσως από μια λίστα τριών πραγματικών (ή ακέραιων ή ποσοστών) τιμών διαχωρισμένων με κόμματα, ακολουθούμενη αμέσως από μια παρένθεση ")". Η ακέραια τιμή 255 είναι ισοδύναμη με την ποσοστιαία τιμή 100% και δεκαεξαδικές τιμές F ή FF, άρα rgb(255,255,255) = rgb(100%, 100%, 100%) = #FFF.
Έτσι, ένα χρώμα που δίνεται σε αριθμητική μορφή μας δίνει τις τιμές των συστατικών χρωμάτων του, κάτι που μας δίνει τελικά την ευκαιρία, αλλάζοντας καθένα από τα κύρια χρώματα του αρχικού χρώματος, να φτάσουμε στο δεύτερο, τελικό χρώμα. Αν αναλογιστούμε το δικό μας συγκεκριμένο παράδειγμα, τότε έχουμε τα εξής (οι τιμές στο δεκαδικό σύστημα υποδεικνύονται σε παρένθεση):
| #FFFFFF | = | FF (255) | FF (255) | FF (255) |
| 0 | – CE (206) | – FF (255) | ||
| #FF4500 | = | FF (255) | 45 (49) | 0 |
Εκείνοι. προκειμένου να από λευκόΓια να πάρετε πορτοκαλί-κόκκινο, πρέπει να αφήσετε αμετάβλητο το κόκκινο συστατικό του λευκού χρώματος (αλλάξτε την τιμή στο μηδέν), αφαιρέστε το 206 από το πράσινο και το 255 από το μπλε Ας ονομάσουμε αυτούς τους αριθμούς (ΔR = 0, ΔG = -206, ΔΒ = -255) προσαυξήσεις.
Τώρα, για να πάρετε, για παράδειγμα, δύο ενδιάμεσα χρώματα + τελικό χρώμα (3 συνολικά), πρέπει να αλλάξετε αρχικές τιμέςΤριπλή RGB (#FFFFFF) όχι με την πλήρη τιμή των προσαυξήσεων ΔR, ΔG, ΔB, αλλά πρώτα κατά 1/3, μετά κατά 2/3 και τέλος κατά 3/3 (3/3 = 1, αυτή είναι η πλήρης τιμή της αύξησης για να λάβουμε το τελικό χρώμα, το οποίο, καταρχήν, ήδη γνωρίζουμε).
| #FFFFFF | = | FF (255) | FF (255) | FF (255) |
| #FFBAAA | = | 255 -0 | 255 - 206*1/3 = 186 (BA) | 255 - 255*1/3 = 170 (AA) |
| #FF7655 | = | 255 - 0 | 255 - 206*2/3 = 118 (76) | 255 - 255*2/3 = 85 (55) |
| #FF4500 | = | FF (255) | 45 (49) | 0 |
Έτσι, μάθαμε να υπολογίζουμε τα ενδιάμεσα χρώματα. Απομένει να διευκρινιστεί μια ακόμη απόχρωση, προκειμένου ένα άτομο να παρατηρήσει τα ενδιάμεσα χρώματα, είναι απαραίτητο να κάνει χρονικές καθυστερήσεις μεταξύ των αλλαγών χρωμάτων, διαφορετικά οι αλλαγές θα συμβούν τόσο γρήγορα που ο χρήστης απλά δεν θα παρατηρήσει τα ενδιάμεσα χρώματα.
Τώρα έχουμε μια ξεκάθαρη συνολική εικόνα και μπορούμε να προχωρήσουμε στη σύνταξη κώδικα. Υπάρχουν χρώματα έναρξης και λήξης, μπορούμε να υπολογίσουμε n ενδιάμεσα χρώματα (όπου το n επιλέγεται αυθαίρετα) και υπάρχει μια τιμή καθυστέρησης t (όπου το t επιλέγεται αυθαίρετα). Έτσι, ο αλγόριθμος έχει ως εξής: εκχωρήστε το πρώτο ενδιάμεσο χρώμα στο στοιχείο της ιστοσελίδας, κάντε μια καθυστέρηση κατά το ποσό t, εκχωρήστε το δεύτερο ενδιάμεσο χρώμα στο στοιχείο, κάντε μια καθυστέρηση, ..., εκχωρήστε το nο ενδιάμεσο χρώμα στο στοιχείο, που είναι το τελικό χρώμα.
ΕκτέλεσηΓια παράδειγμα, ας φτιάξουμε ένα κουμπί του οποίου το φόντο αλλάζει από λευκό σε πορτοκαλί-κόκκινο όταν το κάνετε κλικ.
Πάμε... Η πρώτη λάθος σκέψη που μπορεί να σου έρθει στο μυαλό είναι να υπολογίσεις τα ενδιάμεσα χρώματα σε βρόχο, κάνοντας μια καθυστέρηση μετά από κάθε επανάληψη.
Συνάρτηση fade() ( για (var i = 1; i
