CSS와 JavaScript를 사용하여 대화형 타임라인 만들기

by

주요 내용

  • CSS와 JavaScript를 활용하여 강력한 타임라인을 쉽게 만들 수 있습니다.
  • 타임라인의 HTML 구조를 간단히 설명하고, CSS를 사용하여 타임라인 요소의 스타일을 지정하는 것으로 시작하십시오.
  • JavaScript를 사용해 타임라인에 생동감 있는 애니메이션 효과를 추가하세요. Intersection Observer API를 이용하면 스크롤 시 타임라인 항목을 부드럽게 나타나게 할 수 있습니다.

타임라인은 사용자가 시간 순서에 따른 사건을 살펴보고 이해하는 데 도움을 주는 효과적인 시각적 도구입니다. CSS와 JavaScript의 강력한 조합을 활용하여 어떻게 상호작용적인 타임라인을 만들 수 있는지 알아보겠습니다.

타임라인 구조 만들기

시작하려면, index.html 파일에서 HTML 구조의 개요를 살펴보십시오. 이벤트와 날짜를 분리된 요소로 구성하여 상호작용적인 타임라인의 기본 틀을 마련합니다.

    <body>

      <section class="timeline-section">

        <div class="container">

          <div class="Timeline__header">

            <h2>타임라인</h2>
            <p class="heading--title">

              다가오는 이벤트에 사용할 예상 시간 분석입니다.<br />

            </p>
          </div>
          <div class="Timeline__content">

            <div class="Timeline__item">

              <div class="Timeline__text">

                <h3>이벤트 1</h3>
                <p>

                  Lorem ipsum dolor sit amet consectetur adipisicing elit.

                  Corporis, explicabo.

                </p>
                <span class="circle">1</span>

              </div>
              <h3 class="Timeline__date">2023년 12월 12일</h3>

            </div>
            <div class="Timeline__item">

              <div class="Timeline__text">

                <h3>이벤트 2</h3>
                <p>

                  Lorem ipsum dolor sit amet consectetur adipisicing elit.

                  Corporis, explicabo.

                </p>
                <span class="circle">2</span>

              </div>
              <h3 class="Timeline__date">2023년 12월 12일</h3>

            </div>

          </div>

        </div>

      </section>

    </body>

현재 구성 요소는 다음과 같습니다:

타임라인 레이아웃 선택: 세로 대 가로

상호작용형 타임라인을 디자인할 때 수직 또는 수평 스타일을 선택할 수 있습니다. 수직 타임라인은 웹사이트 스크롤 방향과 일치하여 특히 모바일 기기에서 사용하기 편리합니다. 타임라인에 많은 콘텐츠가 포함되어 있는 경우, 수직 레이아웃이 가장 실용적인 선택일 수 있습니다.

반면, 수평 타임라인은 넓은 화면에서 더욱 매력적이며, 좌우 스크롤을 최소화하면서 창의적인 사이트에 적합합니다. 각 스타일은 다양한 웹사이트 유형과 사용자 경험에 적합한 장점을 제공합니다.

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;}

전체 스타일 시트는 GitHub 저장소 style.css에서 확인하실 수 있습니다.

스타일을 적용한 후, 구성 요소는 다음과 같이 나타납니다.

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. Intersection Observer 콜백 함수

항목이 뷰포트와 교차할 때 항목의 투명도를 1(보임)로 변경하는 fadeInOnScroll 함수를 정의합니다.

  const fadeInOnScroll = (entries, observer) => {

      entries.forEach((entry) => {

          if (entry.isIntersecting) {

              entry.target.style.opacity = 1;

          }

      });

  };

4. Intersection Observer 옵션

항목의 10%가 표시될 때 애니메이션이 시작되도록 임계값을 0.1로 설정하여 옵션을 구성합니다.

  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 애니메이션을 조화롭게 활용하여 사용자의 시선을 사로잡고 가치 있는 콘텐츠를 전달하는 타임라인을 만들 수 있습니다.