Използвайки основните концепции на HTML, CSS и JS, ще имате атрактивна времева линия, готова и работеща за нула време.

Ключови изводи

  • Мощна времева линия е лесна за изграждане с помощта на CSS и JavaScript.
  • Започнете с очертаване на HTML структурата на времевата линия и стилизиране на елементите на времевата линия с CSS.
  • Продължете да добавяте анимация към времевата линия с помощта на JavaScript. Можете да използвате API на Intersection Observer, за да избледнявате елементи от времевата линия при превъртане.

Времевите линии са мощни визуални инструменти, които помагат на потребителите да навигират и разбират хронологичните събития. Разгледайте как да създадете интерактивна времева линия с помощта на динамичното дуо на CSS и JavaScript.

Изграждане на структурата на времевата линия

Можете да проверите пълния код за този проект от него GitHub хранилище.

За да започнете, очертайте структурата на HTML в index.html. Създавайте събития и дати като отделни компоненти, полагайки основата на интерактивната времева линия.

instagram viewer 
<body>
<sectionclass="timeline-section">
<divclass="container">
<divclass="Timeline__header">
<h2>Timelineh2>
<pclass="heading--title">
 Here is the breakdown of the time we anticipate <br />
 using for the upcoming event.
p>
div>


<divclass="Timeline__content">
<divclass="Timeline__item">
<divclass="Timeline__text">
<h3>Occasion 1h3>


<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Corporis, explicabo.
p>


<spanclass="circle">1span>
div>


<h3class="Timeline__date">12 Dec. 2023h3>
div>


<divclass="Timeline__item">
<divclass="Timeline__text">
<h3>Occasion 2h3>


<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Corporis, explicabo.
p>


<spanclass="circle">2span>
div>


<h3class="Timeline__date">12 Dec. 2023h3>
div>

div>
div>
section>
body>

В момента вашият компонент изглежда така:

Изберете оформление за вашата времева линия: вертикално срещу Хоризонтална

Когато проектирате интерактивна времева линия, можете да изберете вертикален или хоризонтален стил. Вертикалните времеви линии са лесни за използване, особено на телефони, тъй като това е типичната посока, в която се превъртат уебсайтовете. Ако вашата времева линия има много съдържание, това вероятно ще бъде най-удобното оформление.

Хоризонталните времеви линии обаче са привлекателни на широки екрани и са чудесни за творчески сайтове с по-малко детайли, които могат да сведат до минимум превъртането отстрани. Всеки стил има своите предимства, подходящи за различни типове уебсайтове и потребителски изживявания.

Стилизирайте времевата линия с CSS

Има три вида визуални елементи, които ще стилизирате за времевата линия: линии, възли и маркери за дата.

  • Линии: Централна вертикална линия, създадена с помощта на Timeline__content:: след псевдо-елемента, служи като гръбнак на времевата линия. Оформен е със специфична ширина и цвят, позициониран абсолютно така, че да се изравни с центъра на елементите на времевата линия.
    .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.

След стилизиране вашият компонент трябва да изглежда така:

Анимиране с JavaScript

За да анимирате този компонент, използвайте API на Intersection Observer за анимиране на елементи от времевата линия при превъртане. Добавете следния код към script.js.

1. Първоначалната настройка

Първо изберете всички елементи с класа Timeline__item.

const timelineItems = document.querySelectorAll(".Timeline__item");

2. Първоначално оформяне на елементи от времевата линия

Задайте първоначалната непрозрачност на всеки елемент на 0 (невидим) и приложете a 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 анимации, можете да изработите времева линия, която завладява вашата аудитория, като същевременно предоставя ценно съдържание.