Ключови изводи
- Мощна времева линия е лесна за изграждане с помощта на CSS и JavaScript.
- Започнете с очертаване на HTML структурата на времевата линия и стилизиране на елементите на времевата линия с CSS.
- Продължете да добавяте анимация към времевата линия с помощта на JavaScript. Можете да използвате API на Intersection Observer, за да избледнявате елементи от времевата линия при превъртане.
Времевите линии са мощни визуални инструменти, които помагат на потребителите да навигират и разбират хронологичните събития. Разгледайте как да създадете интерактивна времева линия с помощта на динамичното дуо на CSS и JavaScript.
Изграждане на структурата на времевата линия
Можете да проверите пълния код за този проект от неговото хранилище на GitHub .
За да започнете, очертайте структурата на 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> <!-- More Items --> </div> </div> </section></body>
В момента вашият компонент изглежда така:
Изберете оформление за вашата времева линия: вертикално срещу хоризонтално
Когато проектирате интерактивна времева линия, можете да изберете вертикален или хоризонтален стил. Вертикалните времеви линии са лесни за използване, особено на телефони, тъй като това е типичната посока, в която се превъртат уебсайтовете. Ако вашата времева линия има много съдържание, това вероятно ще бъде най-удобното оформление.
Хоризонталните времеви линии обаче са привлекателни на широки екрани и са чудесни за творчески сайтове с по-малко детайли, които могат да сведат до минимум превъртането отстрани. Всеки стил има своите предимства, подходящи за различни типове уебсайтове и потребителски изживявания.
Стилизирайте времевата линия с CSS
Има три типа визуални елементи, които ще стилизирате за времевата линия: линии, възли и маркери за дата.
- Линии : Централна вертикална линия, създадена с помощта на псевдоелемента Timeline__content::after, служи като гръбнак на времевата линия. Оформен е със специфична ширина и цвят, позициониран абсолютно така, че да се изравни с центъра на елементите на времевата линия.
.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 repo в style.css .
След стилизиране вашият компонент трябва да изглежда така:
Анимиране с JavaScript
За да анимирате този компонент, използвайте API на Intersection Observer, за да анимирате елементи от времевата линия при превъртане. Добавете следния код към 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. Създаване и използване на Intersection Observer
Завършете, като създадете IntersectionObserver с тези опции и го приложите към всеки елемент от времевата линия.
const observer = new IntersectionObserver(fadeInOnScroll, options);timelineItems.forEach((item) => { observer.observe(item);});
Крайният резултат трябва да изглежда така:
Най-добри практики за компонент на времевата линия
Някои практики, към които трябва да се придържате, включват:
- Оптимизирайте вашата времева линия за различни размери на екрана. Научете техники за отзивчив дизайн, за да осигурите безпроблемно потребителско изживяване на всички устройства.
- Използвайте ефективни практики за кодиране, за да осигурите плавни анимации.
- Използвайте семантичен HTML , подходящи съотношения на контраста и ARIA етикети за по-добра достъпност.
Оживяване на вашата хронология: Пътуване в уеб дизайна
Изграждането на интерактивна времева линия не е просто представяне на информация; става въпрос за създаване на ангажиращо и информативно изживяване. Като комбинирате HTML структура, CSS стил и JavaScript анимации, можете да изработите времева линия, която завладява вашата аудитория, като същевременно предоставя ценно съдържание.