주요 요점
CSS와 자바스크립트의 도움으로 강력한 타임라인을 손쉽게 만들 수 있습니다.
먼저 HTML 아키텍처를 통해 이벤트의 시간적 진행을 설정하고, 동시에 CSS(Cascading Style Sheet)를 적용하여 타임라인 구성 요소에 미적 매력을 부여합니다.
JavaScript를 활용하면 애니메이션을 통합하여 타임라인을 더욱 향상시킬 수 있으며, 특히 사용자가 페이지를 아래로 스크롤할 때 정적 콘텐츠에서 동적 콘텐츠로 원활하게 전환하여 시청자에게 향상된 시각적 경험을 제공하는 인터섹션 옵저버 API 구현을 통해 더욱 향상시킬 수 있습니다.
시각적으로 매력적이고 기능적인 타임라인을 만드는 것은 웹 개발에서 없어서는 안 될 두 가지 구성 요소인 CSS와 자바스크립트를 활용함으로써 달성할 수 있습니다. 이 글에서는 사용자가 시간순으로 발생한 사건을 쉽게 탐색하고 이해할 수 있는 인터랙티브 타임라인을 구성하는 프로세스에 대해 자세히 설명합니다.
타임라인 구조 구축하기
이 프로젝트의 전체 코드는 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>
현재 구성 요소는 다음과 같은 형태인 것으로 보입니다:
타임라인의 레이아웃을 선택하세요: 세로 대 가로
인터랙티브 타임라인의 형식을 결정할 때 세로 또는 가로 방향을 선택할 수 있습니다. 세로형 타임라인은 웹페이지의 일반적인 스크롤 방향과 일치하기 때문에 특히 모바일 디바이스를 통해 액세스할 때 사용하기 편리합니다. 또한 타임라인에 상당한 양의 정보가 포함되어 있는 경우 세로 방향이 선호되는 배열일 가능성이 높습니다.
가로형 타임라인은 넓은 화면에 표시할 때 특히 매력적일 수 있으며, 복잡한 세부 정보가 많지 않은 창의적인 웹사이트에 적합하므로 측면 스크롤을 최소화할 수 있습니다. 각 디자인 요소는 다양한 웹사이트 유형과 최종 사용자 상호 작용에 맞춰 각기 다른 용도로 사용된다는 점을 인식하는 것이 중요합니다.
CSS로 타임라인 스타일 지정하기
타임라인의 시각적 구성 요소 스타일은 선, 노드, 날짜 마커의 세 가지 범주로 분류할 수 있습니다.
타임라인을 만드는 기본 요소는 Timeline__content 클래스의 의사 클래스 뒤에 있는 세로줄을 활용하여 생성되는 세로줄입니다. 이 중심 축은 정확한 너비와 독특한 색조로 만들어지며 타임라인에서 각 항목의 맨 중앙에 배치됩니다.
노드는 타임라인에서 마커 역할을 하는 원형 요소를 나타냅니다. 스타일링에 원형 클래스를 활용하며 절대 위치 지정을 통해 각 타임라인 항목의 중앙 지점에 배치됩니다. 노드는 고유한 배경색으로 눈에 띄며 타임라인에서 중요한 이정표를 표시합니다.
날짜 마커는 Timeline__date 클래스로 표시되며 시각적으로 매력적이고 균형 잡힌 프레젠테이션을 만들기 위해 타임라인의 양쪽에 번갈아 나타나는 패턴으로 표시됩니다.
GitHub 리포지토리의 스타일.css 에서 전체 스타일 세트를 확인하세요.
스타일 및 서식 적용을 완료하면 컴포넌트의 결과 모양이 다음 예시와 비슷해야 합니다.
자바스크립트로 애니메이션하기
Intersection Observer API를 활용하여 컴포넌트 내의 타임라인 항목을 애니메이션하여 컴포넌트에 대한 스크롤 애니메이션을 만들 수 있습니다. 이렇게 하려면 다음 코드 스니펫을 script.js 파일에 통합하세요.
초기 설정
처음에는 클래스 속성 “Timeline__item”을 가진 모든 컴포넌트를 선택합니다.
const timelineItems = document.querySelectorAll(".Timeline__item");
타임라인 항목의 초기 스타일링
각 항목이 처음에 보이지 않도록 하려면 불투명도 값을 0으로 설정하고 CSS 전환 기능을 활용하여 매끄러운 페이드 효과를 얻어야 합니다.
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
CSS 마크업 내에 이러한 스타일링 옵션을 통합하면 잠재적인 위험이 발생할 수 있습니다. 자바스크립트 코드가 오작동하는 경우 시각적 단서가 없어 타임라인을 인지할 수 없게 됩니다. 이 기능을 자바스크립트 파일로 이전하면 점진적인 개선 사례를 효과적으로 보여줄 수 있습니다.
교차점 관찰자 콜백
사용자 화면의 시각적 경계에 들어올 때 요소의 불투명도를 1로 수정하여 완전히 보이도록 하는 `fadeInOnScroll`이라는 함수를 생성합니다. 이는 자바스크립트 이벤트 리스너와 CSS 트랜지션 또는 애니메이션을 활용하여 달성할 수 있습니다. 이 함수는 스크롤 위치, 요소 위치, 원하는 애니메이션 지속 시간 등 관련 변수를 고려하여 사용자 인터페이스와 스크롤 경험 간의 원활한 상호작용을 보장해야 합니다.
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
교차점 관찰자 옵션
임계값을 0.1로 설정하여 관찰자 설정을 구성하면 객체의 10%를 관찰할 수 있을 때 애니메이션이 시작됩니다.
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
}
교차 관찰자 만들기 및 사용
스크롤 가능한 타임라인 목록에서 시차 효과를 구현하기 위해 타임라인 항목이 뷰포트 경계 내에 있을 때 이를 감지하는 교차 관찰자를 만들겠습니다. 그런 다음 사용자가 타임라인을 위아래로 스크롤하는지 여부에 따라 다른 배경색이나 이미지를 적용합니다. 이는 다음과 같이 JavaScript를 사용하여 구현할 수 있습니다: ”’자바스크립트 // 모든 타임라인 항목 가져오기 const timelineItems = document.querySelectorAll(‘.timeline-item’); // 각 항목의 현재 색상을 저장할 배열을 생성합니다. let currentColors = []; // 첫 번째 항목의 초기 색상 설정 currentColors[0] = { start: ‘rgba(255, 99, 132, 1)’, end: ‘rgba(255
const observer = new IntersectionObserver(fadeInOnScroll, options);
timelineItems.forEach((item) => {
observer.observe(item);
});
다시 말해, 이 연구에서는 건강 위험 평가를 완료하면 재정적 인센티브를 받도록 배정된 참가자가 그렇지 않은 참가자보다 MyHealthLink에 대한 관심과 사용 의향이 훨씬 높았다는 것을 발견했습니다. 이는 재정적 혜택을 제공하는 것이 1차 진료 환경에서 환자 활성화를 촉진하는 효과적인 전략이 될 수 있음을 나타냅니다.
브라우저가 동영상 태그를 지원하지 않습니다.
타임라인 구성 요소 모범 사례
다음과 같은 특정 관행을 준수하는 것이 중요합니다:
반응형 디자인 원칙을 활용하여 다양한 화면 크기에 맞게 콘텐츠를 조정하고 시청 환경을 최적화하여 여러 플랫폼에서 사용자 상호 작용을 개선합니다.
효과적인 프로그래밍 기법을 활용하여 원활한 애니메이션 작업을 보장합니다.
의미적으로 적절한 HTML 요소를 활용하고, 적절한 명암비를 유지하며, ARIA 속성을 사용하여 웹 콘텐츠의 전반적인 접근성을 향상시킵니다.
타임라인에 생동감 불어넣기: 웹 디자인의 여정
인터랙티브 타임라인을 만드는 것은 단순한 데이터 표시를 넘어 시청자를 위한 매력적이고 유익한 여정을 만들어야 합니다. HTML 아키텍처, CSS 개선, 자바스크립트 애니메이션의 통합을 통해 시각적 매력으로 청중을 매료시키는 동시에 관련 정보를 효과적으로 전달하는 타임라인을 구축할 수 있습니다.