Creating an Interactive Timeline With CSS and JavaScript

3 weeks ago

Using nan basal concepts of HTML, CSS, and JS, you’ll person an charismatic timeline up and moving successful nary time.

An illustration of a man sitting connected a chair, pinch a thought unreality supra his head, containing a calendar.

Key Takeaways

A powerful timeline is easy to build utilizing CSS and JavaScript.
Start by outlining nan timeline’s HTML building and styling nan timeline elements pinch CSS.
Continue to adhd animation to nan timeline utilizing JavaScript. You tin usage nan Intersection Observer API to slice successful timeline items connected scroll.

Timelines are powerful ocular devices that thief users navigate and understand chronological events. Explore really to create an interactive timeline utilizing nan move duo of CSS and JavaScript.

Building nan Timeline Structure

To begin, outline nan HTML building successful index.html. Create events and dates arsenic abstracted components, laying nan instauration for nan interactive timeline.

<body>
  <section class="timeline-section">
    <div class="container">
      <div class="Timeline__header">
        <h2>Timeline</h2>

        <p class="heading--title">
          Here is nan breakdown of nan clip we expect <br />
          using for nan upcoming event.
        </p>
      </div>

      <div class="Timeline__content">
        <div class="Timeline__item">
          <div class="Timeline__text">
            <h3>Occasion 1</h3>

            <p>
              Lorem ipsum dolor beryllium amet consectetur adipisicing elit.
              Corporis, explicabo.
            </p>

        <div class="Timeline__item">
          <div class="Timeline__text">
            <h3>Occasion 2</h3>

            <p>
              Lorem ipsum dolor beryllium amet consectetur adipisicing elit.
              Corporis, explicabo.
            </p>

At nan moment, your constituent looks for illustration this:

Pick a Layout for Your Timeline: Vertical vs. Horizontal

When designing an interactive timeline, you tin take either a vertical aliases horizontal style. Vertical timelines are easy to use, particularly connected phones, arsenic this is nan emblematic guidance that websites scroll in. If your timeline has a batch of content, this will astir apt beryllium nan astir convenient layout.

Horizontal timelines, however, are appealing connected wide screens and are awesome for imaginative sites pinch less details, that tin minimize side-to-side scrolling. Each style has its perks, suitable for different types of websites and personification experiences.

Style nan Timeline With CSS

There are 3 types of ocular elements you’ll style for nan timeline: lines, nodes, and day markers.

Lines: A cardinal vertical line, created utilizing nan Timeline__content::after pseudo-element, serves arsenic nan backbone of nan timeline. It's styled pinch a circumstantial width and color, positioned perfectly to align pinch nan halfway of nan timeline items. .Timeline__content::after {
  background-color: var(--clr-purple);
  content: "";
  position: absolute;
  left: calc(50% - 2px);
  width: 0.4rem;
  height: 97%;
  z-index: -5;
}
Nodes: Circles, styled utilizing nan circle class, enactment arsenic nodes connected nan timeline. These are perfectly positioned astatine nan halfway of each timeline point and are visually chopped pinch a inheritance color, forming nan cardinal points on nan timeline. .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;
}
Date Markers: The dates, styled utilizing nan Timeline__date class, show connected either broadside of nan timeline. Their positioning alternates betwixt near and correct for each timeline item, creating a staggered, balanced look on nan timeline. .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;}

Check retired nan afloat group of styles from nan GitHub repo successful style.css.

After styling, your constituent should look for illustration this:

Animating With JavaScript

To animate this component, usage the Intersection Observer API to animate timeline items connected scroll. Add nan pursuing codification to script.js.

1. Initial Setup

First, prime each elements pinch nan people Timeline__item.

const timelineItems = document.querySelectorAll(".Timeline__item");

2. Initial Styling of Timeline Items

Set nan first opacity of each point to 0 (invisible) and use a CSS modulation for soft fading.

timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}

You could group these styles successful nan style sheet, but doing truthful would beryllium dangerous. If nan JavaScript fails to run, that attack would time off your timeline invisible! Isolating this behaviour successful nan JavaScript record is simply a bully illustration of progressive enhancement.

3. Intersection Observer Callback

Define a fadeInOnScroll usability to alteration nan opacity of items to 1 (visible) erstwhile they intersect pinch nan viewport.

const fadeInOnScroll = (entries, observer) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = 1;
        }
    });
};

4. Intersection Observer Options

Set nan options for nan observer, pinch a period of 0.1 indicating that nan animation triggers erstwhile 10% of an point is visible.

const options = {
    root: null,
    rootMargin: "0px",
    threshold: 0.1,
}

5. Creating and Using nan Intersection Observer

Finish by creating an IntersectionObserver pinch these options and applying it to each timeline item.

const perceiver = new IntersectionObserver(fadeInOnScroll, options);

timelineItems.forEach((item) => {
observer.observe(item);
});

The last consequence should look for illustration this:

Timeline Component Best Practices

Some practices to adhere to include:

Optimize your timeline for different surface sizes. Learn responsive creation techniques to guarantee a seamless personification acquisition crossed devices.
Use businesslike coding practices to guarantee soft animations.
Use semantic HTML, due opposition ratios, and ARIA labels for amended accessibility.

Bringing Your Timeline to Life: A Journey successful Web Design

Building an interactive timeline is not conscionable astir presenting information; it's astir creating an engaging and informative experience. By combining HTML structure, CSS styling, and JavaScript animations, you tin trade a timeline that captivates your assemblage while delivering valuable content.

Source Tutorials