Преглед садржаја
Кључне Такеаваис
- Моћну временску линију је лако направити користећи ЦСС и ЈаваСцрипт.
- Почните тако што ћете описати ХТМЛ структуру временске линије и стилизовати елементе временске линије помоћу ЦСС-а.
- Наставите да додајете анимацију на временску линију користећи ЈаваСцрипт. Можете да користите Интерсецтион Обсервер АПИ за бледење ставки временске линије при померању.
Временске линије су моћни визуелни алати који помажу корисницима да се крећу и разумеју хронолошке догађаје. Истражите како да направите интерактивну временску линију користећи динамички дуо ЦСС и ЈаваСцрипт.
Изградња структуре временске линије
За почетак, оцртајте ХТМЛ структуру у индек.хтмл. Креирајте догађаје и датуме као засебне компоненте, постављајући основу за интерактивну временску линију.
<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>
У овом тренутку, ваша компонента изгледа овако:
Изаберите распоред за своју временску линију: вертикално наспрам хоризонтално
Када дизајнирате интерактивну временску линију, можете одабрати или вертикални или хоризонтални стил. Вертикалне временске линије су једноставне за коришћење, посебно на телефонима, јер је ово типичан правац у коме се веб странице померају. Ако ваша временска линија има пуно садржаја, ово ће вероватно бити најпогоднији изглед.
Хоризонталне временске линије су, међутим, привлачне на широким екранима и одличне су за креативне сајтове са мање детаља, који могу да минимизирају померање са једне на другу страну. Сваки стил има своје предности, погодне за различите врсте веб локација и корисничко искуство.
Стилизирајте временску линију помоћу ЦСС-а
Постоје три типа визуелних елемената које ћете стилизовати за временску линију: линије, чворови и маркери датума.
- Линије: Централна вертикална линија, креирана помоћу псеудоелемента Тимелине__цонтент::афтер, служи као окосница временске линије. Стилизован је са одређеном ширином и бојом, позициониран апсолутно тако да се поравна са центром ставки временске линије.
.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__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;}
Погледајте комплетан сет стилова из ГитХуб репо у стиле.цсс.
Након стилизовања, ваша компонента би требало да изгледа овако:
Анимирање помоћу ЈаваСцрипт-а
Да бисте анимирали ову компоненту, користите Интерсецтион Обсервер АПИ за анимирање ставки временске линије приликом померања. Додајте следећи код у сцрипт.јс.
1. Почетно подешавање
Прво изаберите све елементе са класом Тимелине__итем.
const timelineItems = document.querySelectorAll(".Timeline__item");
2. Почетно обликовање ставки временске линије
Поставите почетну непрозирност сваке ставке на 0 (невидљиво) и примените ЦСС прелаз за глатко избледење.
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
Можете поставити ове стилове у листу стилова, али би то било опасно. Ако ЈаваСцрипт не успе да се покрене, тај приступ би оставио вашу временску линију невидљивом! Изоловање оваквог понашања у ЈаваСцрипт датотеци је добар пример прогресивног побољшања.
3. Интерсецтион Обсервер Цаллбацк
Дефинишите функцију фадеИнОнСцролл да бисте променили непрозирност ставки на 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. Креирање и коришћење Интерсецтион Обсервер
Завршите тако што ћете креирати ИнтерсецтионОбсервер са овим опцијама и применити га на сваку ставку временске линије.
const observer = new IntersectionObserver(fadeInOnScroll, options);timelineItems.forEach((item) => {
observer.observe(item);
});
Коначни резултат би требао изгледати овако:
Најбоље праксе за компоненту временске линије
Неке праксе којих се треба придржавати укључују:
- Оптимизујте своју временску линију за различите величине екрана. Научите технике респонзивног дизајна да бисте обезбедили беспрекорно корисничко искуство на свим уређајима.
- Користите ефикасне праксе кодирања да бисте обезбедили глатке анимације.
- Користите семантички ХТМЛ, одговарајуће омјере контраста и АРИА ознаке за бољу приступачност.
Оживљавање ваше временске линије: путовање у веб дизајн
Изградња интерактивне временске линије није само представљање информација; ради се о стварању занимљивог и информативног искуства. Комбиновањем ХТМЛ структуре, ЦСС стила и ЈаваСцрипт анимација, можете да направите временску линију која ће очарати вашу публику док испоручује вредан садржај.