Πίνακας περιεχομένων
Βασικά Takeaways
- Ένα ισχυρό χρονοδιάγραμμα είναι εύκολο να δημιουργηθεί χρησιμοποιώντας CSS και JavaScript.
- Ξεκινήστε περιγράφοντας τη δομή HTML της γραμμής χρόνου και διαμορφώνοντας το στυλ των στοιχείων της γραμμής χρόνου με CSS.
- Συνεχίστε να προσθέτετε κινούμενα σχέδια στη γραμμή χρόνου χρησιμοποιώντας JavaScript. Μπορείτε να χρησιμοποιήσετε το Intersection Observer API για να ξεθωριάσει τα στοιχεία της γραμμής χρόνου στην κύλιση.
Τα χρονοδιαγράμματα είναι ισχυρά οπτικά εργαλεία που βοηθούν τους χρήστες να πλοηγούνται και να κατανοούν τα χρονολογικά συμβάντα. Εξερευνήστε πώς να δημιουργήσετε ένα διαδραστικό χρονοδιάγραμμα χρησιμοποιώντας το δυναμικό δίδυμο CSS και JavaScript.
Δημιουργία της δομής της χρονογραμμής
Για να ξεκινήσετε, περιγράψτε τη δομή HTML στο index.html. Δημιουργήστε συμβάντα και ημερομηνίες ως ξεχωριστά στοιχεία, θέτοντας τα θεμέλια για τη διαδραστική γραμμή χρόνου.
<body>
<section class="timeline-section">
<div class="container">
<div class="Timeline__header">
<h2>Timeline</h2><p class="heading--title">
Here is the breakdown of the time we anticipate <br />
using for the upcoming event.
</p>
</div><div class="Timeline__content">
<div class="Timeline__item">
<div class="Timeline__text">
<h3>Occasion 1</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis, explicabo.
</p><span class="circle">1</span>
</div><h3 class="Timeline__date">12 Dec. 2023</h3>
</div><div class="Timeline__item">
<div class="Timeline__text">
<h3>Occasion 2</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis, explicabo.
</p><span class="circle">2</span>
</div><h3 class="Timeline__date">12 Dec. 2023</h3>
</div>
</div>
</div>
</section>
</body>
Προς το παρόν, το στοιχείο σας μοιάζει με αυτό:
Επιλέξτε μια διάταξη για το χρονολόγιό σας: Κάθετη έναντι οριζόντιας
Όταν σχεδιάζετε μια διαδραστική γραμμή χρόνου, μπορείτε να επιλέξετε είτε κάθετο είτε οριζόντιο στυλ. Τα κάθετα χρονολόγια είναι εύχρηστα, ειδικά σε τηλέφωνα, καθώς αυτή είναι η τυπική κατεύθυνση με την οποία μετακινούνται οι ιστότοποι. Εάν το χρονολόγιό σας έχει πολύ περιεχόμενο, αυτή θα είναι ίσως η πιο βολική διάταξη.
Τα οριζόντια χρονοδιαγράμματα, ωστόσο, είναι ελκυστικά σε ευρείες οθόνες και είναι ιδανικά για δημιουργικούς ιστότοπους με λιγότερες λεπτομέρειες, που μπορούν να ελαχιστοποιήσουν την κύλιση από την άλλη πλευρά. Κάθε στυλ έχει τα προνόμιά του, κατάλληλα για διαφορετικούς τύπους ιστότοπων και εμπειρίες χρήστη.
Δώστε στυλ στη γραμμή χρόνου με CSS
Υπάρχουν τρεις τύποι οπτικών στοιχείων που θα δώσετε στυλ για τη γραμμή χρόνου: γραμμές, κόμβοι και δείκτες ημερομηνίας.
- Γραμμές: Μια κεντρική κάθετη γραμμή, που δημιουργήθηκε χρησιμοποιώντας το Timeline__content::after pseudo-στοιχείο, χρησιμεύει ως η ραχοκοκαλιά της γραμμής χρόνου. Είναι διακοσμημένο με συγκεκριμένο πλάτος και χρώμα, τοποθετημένο απολύτως ώστε να ευθυγραμμίζεται με το κέντρο των στοιχείων του χρονοδιαγράμματος.
.Timeline__content::after {
background-color: var(--clr-purple);
content: "";
position: absolute;
left: calc(50% - 2px);
width: 0.4rem;
height: 97%;
z-index: -5;
} - Κόμβοι: Οι κύκλοι, με στυλ χρησιμοποιώντας την κλάση κύκλου, λειτουργούν ως κόμβοι στη γραμμή χρόνου. Αυτά είναι απολύτως τοποθετημένα στο κέντρο κάθε στοιχείου γραμμής χρόνου και είναι οπτικά διακριτά με χρώμα φόντου, σχηματίζοντας τα βασικά σημεία κατά μήκος της γραμμής χρόνου.
.circle {
position: absolute;
background: var(--clr-purple);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 6.8rem;
width: 100%;
aspect-ratio: 1/ 1;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
font-size: 1.6rem;
} - Δείκτες ημερομηνίας: Οι ημερομηνίες, με στυλ χρησιμοποιώντας την κλάση Timeline__date, εμφανίζονται και στις δύο πλευρές της γραμμής χρόνου. Η τοποθέτησή τους εναλλάσσεται μεταξύ αριστερά και δεξιά για κάθε στοιχείο γραμμής χρόνου, δημιουργώντας μια κλιμακωτή, ισορροπημένη εμφάνιση κατά μήκος της γραμμής χρόνου.
.Timeline__text,
.Timeline__date { width: 50%; }
.Timeline__item:nth-child(even) { flex-direction: row-reverse;}.Timeline_item:nth-child(even) .Timeline_date {
text-align: right;
padding-right: 8.3rem;
}.Timeline_item:nth-child(even) .Timeline_text { padding-left: 8.3rem;}
.Timeline_item:nth-child(odd) .Timeline_text {
text-align: right;
align-items: flex-end;
padding-right: 8.3rem;
}.Timeline_item:nth-child(odd) .Timeline_date { padding-left: 8.3rem;}
Δείτε το πλήρες σετ στυλ από το Αποθετήριο GitHub σε style.css.
Μετά το styling, το στοιχείο σας θα πρέπει να μοιάζει με αυτό:
Κινούμενη εικόνα με JavaScript
Για να κάνετε κίνηση σε αυτό το στοιχείο, χρησιμοποιήστε το Intersection Observer API για να δημιουργήσετε κίνηση σε στοιχεία χρονοδιαγράμματος σε κύλιση. Προσθέστε τον ακόλουθο κώδικα στο script.js.
1. Αρχική ρύθμιση
Αρχικά, επιλέξτε όλα τα στοιχεία με την κλάση Timeline__item.
const timelineItems = document.querySelectorAll(".Timeline__item");
2. Αρχικό στυλ των αντικειμένων γραμμής χρόνου
Ορίστε την αρχική αδιαφάνεια κάθε στοιχείου στο 0 (αόρατο) και εφαρμόστε μια μετάβαση CSS για ομαλή εξασθένιση.
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
Θα μπορούσατε να ορίσετε αυτά τα στυλ στο φύλλο στυλ, αλλά κάτι τέτοιο θα ήταν επικίνδυνο. Εάν η JavaScript αποτύχει να εκτελεστεί, αυτή η προσέγγιση θα αφήσει το χρονολόγιό σας αόρατο! Η απομόνωση αυτής της συμπεριφοράς στο αρχείο JavaScript είναι ένα καλό παράδειγμα προοδευτικής βελτίωσης.
3. Επιστροφή κλήσης παρατηρητή διασταύρωσης
Ορίστε μια συνάρτηση fadeInOnScroll για να αλλάξετε την αδιαφάνεια των στοιχείων σε 1 (ορατή) όταν τέμνονται με τη θύρα προβολής.
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
4. Επιλογές Παρατηρητή Διασταύρωσης
Ορίστε τις επιλογές για τον παρατηρητή, με ένα όριο 0,1 που υποδεικνύει ότι η κίνηση ενεργοποιείται όταν είναι ορατό το 10% ενός στοιχείου.
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
}
5. Δημιουργία και χρήση του Παρατηρητή Διασταύρωσης
Ολοκληρώστε δημιουργώντας ένα IntersectionObserver με αυτές τις επιλογές και εφαρμόζοντάς το σε κάθε στοιχείο γραμμής χρόνου.
const observer = new IntersectionObserver(fadeInOnScroll, options);timelineItems.forEach((item) => {
observer.observe(item);
});
Το τελικό αποτέλεσμα θα πρέπει να μοιάζει με αυτό:
Βέλτιστες πρακτικές για το στοιχείο χρονολογίου
Μερικές πρακτικές που πρέπει να τηρείτε περιλαμβάνουν:
- Βελτιστοποιήστε το χρονοδιάγραμμά σας για διαφορετικά μεγέθη οθόνης. Μάθετε τεχνικές σχεδίασης με απόκριση για να εξασφαλίσετε μια απρόσκοπτη εμπειρία χρήστη σε όλες τις συσκευές.
- Χρησιμοποιήστε αποτελεσματικές πρακτικές κωδικοποίησης για να εξασφαλίσετε ομαλές κινούμενες εικόνες.
- Χρησιμοποιήστε σημασιολογικό HTML, σωστές αναλογίες αντίθεσης και ετικέτες ARIA για καλύτερη προσβασιμότητα.
Ζωντανεύοντας το Χρονολόγιό σας: Ένα Ταξίδι στο Σχεδιασμό Ιστού
Η οικοδόμηση ενός διαδραστικού χρονοδιαγράμματος δεν αφορά μόνο την παρουσίαση πληροφοριών. πρόκειται για τη δημιουργία μιας συναρπαστικής και ενημερωτικής εμπειρίας. Συνδυάζοντας τη δομή HTML, το στυλ CSS και τα κινούμενα σχέδια JavaScript, μπορείτε να δημιουργήσετε ένα χρονοδιάγραμμα που αιχμαλωτίζει το κοινό σας παρέχοντας ταυτόχρονα πολύτιμο περιεχόμενο.