Користећи основне концепте ХТМЛ-а, ЦСС-а и ЈС-а, за кратко време ћете имати атрактивну временску линију.
Кључне Такеаваис
- Моћну временску линију је лако направити користећи ЦСС и ЈаваСцрипт.
- Почните тако што ћете описати ХТМЛ структуру временске линије и стилизовати елементе временске линије помоћу ЦСС-а.
- Наставите да додајете анимацију на временску линију користећи ЈаваСцрипт. Можете да користите Интерсецтион Обсервер АПИ за бледење ставки временске линије при померању.
Временске линије су моћни визуелни алати који помажу корисницима да се крећу и разумеју хронолошке догађаје. Истражите како да направите интерактивну временску линију користећи динамички дуо ЦСС и ЈаваСцрипт.
Изградња структуре временске линије
Можете да проверите цео код за овај пројекат од његовог ГитХуб спремиште.
За почетак, оцртајте ХТМЛ структуру индек.хтмл. Креирајте догађаје и датуме као засебне компоненте, постављајући основу за интерактивну временску линију.
<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>
У овом тренутку, ваша компонента изгледа овако:
Изаберите распоред за своју временску линију: вертикални вс. Хоризонтално
Када дизајнирате интерактивну временску линију, можете одабрати или вертикални или хоризонтални стил. Вертикалне временске линије су лаке за коришћење, посебно на телефонима, јер је ово типичан правац у којем се веб странице померају. Ако ваша временска линија има много садржаја, ово ће вероватно бити најпогоднији изглед.
Хоризонталне временске линије су, међутим, привлачне на широким екранима и одличне су за креативне сајтове са мање детаља, који могу да минимизирају померање са једне на другу страну. Сваки стил има своје предности, погодне за различите врсте веб локација и корисничко искуство.
Стилизирајте временску линију помоћу ЦСС-а
Постоје три типа визуелних елемената које ћете стилизовати за временску линију: линије, чворови и маркери датума.
-
Линије: Централна вертикална линија, креирана коришћењем Тимелине__цонтент:: после псеудоелемента, служи као окосница временске линије. Стилизован је са одређеном ширином и бојом, позициониран апсолутно тако да се поравна са центром ставки временске линије.
.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);
});
Коначни резултат би требао изгледати овако:
Најбоље праксе за компоненту временске линије
Неке праксе којих се треба придржавати укључују:
- Оптимизујте своју временску линију за различите величине екрана. Научите технике респонзивног дизајна да бисте обезбедили беспрекорно корисничко искуство на свим уређајима.
- Користите ефикасне праксе кодирања да бисте обезбедили глатке анимације.
- Користите семантички ХТМЛ, одговарајуће омјере контраста и АРИА ознаке за бољу приступачност.
Оживљавање ваше временске линије: путовање у веб дизајн
Изградња интерактивне временске линије није само представљање информација; ради се о стварању занимљивог и информативног искуства. Комбиновањем ХТМЛ структуре, ЦСС стила и ЈаваСцрипт анимација, можете да направите временску линију која ће очарати вашу публику док испоручује вредан садржај.
