CSS와 JavaScript를 사용하여 대화형 타임라인 만들기
주요 시사점
- 강력한 타임라인은 CSS와 JavaScript를 사용하여 쉽게 구축할 수 있습니다.
- 타임라인의 HTML 구조를 간략하게 설명하고 CSS를 사용하여 타임라인 요소의 스타일을 지정하는 것부터 시작하세요.
- JavaScript를 사용하여 타임라인에 애니메이션을 계속 추가합니다. Intersection Observer API를 사용하여 스크롤 시 타임라인 항목을 페이드 인할 수 있습니다.
타임라인은 사용자가 연대순 이벤트를 탐색하고 이해하는 데 도움이 되는 강력한 시각적 도구입니다. CSS와 JavaScript의 동적 듀오를 사용하여 대화형 타임라인을 만드는 방법을 살펴보세요.
타임라인 구조 구축
GitHub 저장소 에서 이 프로젝트의 전체 코드를 확인할 수 있습니다 .
시작하려면 index.html 에서 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>
현재 구성요소는 다음과 같습니다.
타임라인에 맞는 레이아웃 선택: 세로 vs. 가로
대화형 타임라인을 디자인할 때 수직 또는 수평 스타일을 선택할 수 있습니다. 수직 타임라인은 웹사이트가 스크롤되는 일반적인 방향이기 때문에 특히 휴대폰에서 사용하기 쉽습니다. 타임라인에 콘텐츠가 많으면 아마도 가장 편리한 레이아웃이 될 것입니다.
그러나 수평 타임라인은 넓은 화면에서 매력적이며, 세부 사항이 적고 좌우 스크롤을 최소화할 수 있는 창의적인 사이트에 적합합니다. 각 스타일에는 다양한 유형의 웹사이트와 사용자 경험에 적합한 장점이 있습니다.
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 클래스를 사용하여 스타일이 지정된 원은 타임라인에서 노드 역할을 합니다. 이는 각 타임라인 항목의 중앙에 절대적으로 위치하며 배경색으로 시각적으로 구별되어 타임라인을 따라 핵심 지점을 형성합니다.
.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;}
style.css 의 GitHub 저장소 에서 전체 스타일 세트를 확인하세요 .
스타일을 지정한 후 구성 요소는 다음과 같아야 합니다.
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. 교차로 관찰자 콜백
항목이 뷰포트와 교차할 때 항목의 불투명도를 1(표시)로 변경하는 fadeInOnScroll 함수를 정의합니다.
const fadeInOnScroll = (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.style.opacity = 1; } });};
4. 교차로 관찰자 옵션
항목의 10%가 표시될 때 애니메이션이 트리거됨을 나타내는 임계값 0.1로 관찰자에 대한 옵션을 설정합니다.
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 애니메이션을 결합하여 귀중한 콘텐츠를 전달하면서 청중의 시선을 사로잡는 타임라인을 만들 수 있습니다.
답글 남기기