Voyager Timeline

index.pug

- var voyagerTimeline = [{"date": "1977 Aug. 20", "description": "Voyager 2 launched from Kennedy Space Flight Center"}, {"date": "1977 Sept. 5", "description": "Voyager 1 launched from Kennedy Space Flight Center, Voyager 1 returns first spacecraft photo of Earth and Moon"}, {"date": "1979 Mar. 5", "description": "Voyager 1 makes its closest approach to Jupiter"}, {"date": "1979 July 9", "description": "Voyager 2 makes its closest approach to Jupiter"}, {"date": "1980 Nov. 12", "description": "Voyager 1 flies by Saturn, Voyager 1 begins its trip out of the Solar System"}, {"date": "1981 Aug. 25", "description": "Voyager 2 flies by Saturn"}, {"date": "1982", "description": "Deep Space Network upgrades two 26-m antennas to 34-m"}, {"date": "1986 Jan. 24", "description": "Voyager 2 has the first-ever encounter with Uranus, Deep Space Network begins expansion of 64-m antennas to 70-m"}, {"date": "1987", "description": "Voyager 2 'observes' Supernova 1987A"}, {"date": "1988", "description": "Voyager 2 returns first color images of Neptune"}, {"date": "1989 Aug. 25", "description": "Voyager 2 is the first spacecraft to observe Neptune, Voyager 2 begins its trip out of the Solar System, below the ecliptic plane"}, {"date": "1990 Jan. 1", "description": "Begins Voyager Interstellar Mission"}, {"date": "1990 Feb. 14", "description": "Last Voyager Images - Portrait of the Solar System"}, {"date": "1998 Feb. 17", "description": "Voyager 1 passes Pioneer 10 to become the most distant human-made object in space"}, {"date": "2004 Dec. 15", "description": "Voyager 1 crosses Termination Shock"}, {"date": "2007 Sep. 5", "description": "Voyager 2 crosses Termination Shock"}, {"date": "2012 Aug. 25", "description": "Voyager 1 enters Interstellar Space"}]

header.site-header
  .wrapper
    h1.site-header__title Voyager Timeline

section.timeline
  .wrapper
    each timeline, i in voyagerTimeline
      div(class="timeline__item timeline__item--"+i)
        .timeline__item__station
        .timeline__item__content
          h2.timeline__item__content__date #{timeline.date}
          p.timeline__item__content__description #{timeline.description}

footer.site-footer
  .wrapper
    p.site-footer__text Source: #[a(href="http://voyager.jpl.nasa.gov/mission/timeline.html", target="_blank", class="site-footer__text__link") voyager.jpl.nasa.gov]

script.js

function customWayPoint(className, addClassName, customOffset) {
  var waypoints = $(className).waypoint({
    handler: function(direction) {
      if (direction == "down") {
        $(className).addClass(addClassName);
      } else {
        $(className).removeClass(addClassName);
      }
    },
    offset: customOffset
  });
}

var defaultOffset = '50%';

for (i=0; i<17; i++) {
  customWayPoint('.timeline__item--'+i, 'timeline__item-bg', defaultOffset);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>

style.postcss

@use postcss-mixins;
@use postcss-nested;
@use postcss-simple-vars;
@use postcss-cssnext;

@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');

/* _variables.css */
$line-color: #8d94b1;
$left-item-color: #65adb7;
$right-item-color: #b292c5;
$main-white: #fff;
$station-color: #9aa0b9;

/* _mixins.css */
@define-mixin atMedium {
  @media (min-width: 800px) {
    @mixin-content;
  }
}

@define-mixin clearfix {
  &::after {
    content: "";
    clear: both;
    display: table;
  }
}

/* _global.css */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Nunito', sans-serif;
  background: linear-gradient(to left, #BE93C5 , #7BC6CC);
}

img {
  max-width: 100%;
  height: auto;
}

/* _site-header.css */
.site-header {
  text-align: center;
  padding: 40px 0;

  &__title {
    font-size: 36px;
    color: #fff;
  }

}

/* _wrapper.css */
.wrapper {
  padding-left: 18px;
  padding-right: 18px;
  max-width: 1236px;
  margin-left: auto;
  margin-right: auto;
}


/* _timeline.css */
.timeline {
  position: relative;
  margin: 30px auto;
  padding: 60px 0;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 4px;
    height: 100%;
    background-color: $line-color;

    @mixin atMedium {
      left: 50%;
      margin-left: -2px;
    }

  }

  &__item {
    margin-bottom: 100px;
    position: relative;
    @mixin clearfix;

    &:nth-child(2n) {

      .timeline__item__content {
        float: right;

        &::before {
          content: '';
          right: 40%;


          @mixin atMedium {
            left: inherit;
          }

        }

      }

      .timeline__item__content__date {
        background-color: $right-item-color;
      }

      .timeline__item__content__description {
        color: $right-item-color;
      }

    }

    &:last-child {
      margin-bottom: 0;
    }

  }

  &__item-bg {
    transition: all 1s ease-out;
    color: $main-white;

    &:nth-child(2n) {
      .timeline__item__station {
        background-color: $right-item-color;
      }

      .timeline__item__content {
        background-color: $right-item-color;
        &::before {
          background-color: $right-item-color;
        }
      }

      .timeline__item__content__description {
        color: $main-white;
      }
    }

    .timeline__item__station {
      background-color: $left-item-color;
    }

    .timeline__item__content {
      background-color: $left-item-color;

      &::before {
        background-color: $left-item-color;
      }
    }

    .timeline__item__content__description {
      color: $main-white;
    }

  }

  &__item__station {
    background-color: $station-color;
    width: 40px;
    height: 40px;
    position: absolute;
    border-radius: 50%;
    padding: 10px;
    top: 0;
    left: 10%;
    margin-left: -33px;
    border: 4px solid $line-color;
    transition: all .3s ease-out;

    @mixin atMedium {
      left: 50%;
      margin-left: -30px;
      width: 60px;
      height: 60px;
      padding: 15px;
      border-width: 6px;
    }

  }


  &__item__content {
      width: 80%;
      background: $main-white;
      padding: 20px 30px;
      border-radius: 6px;
      float: right;
      transition: all .3s ease-out;

      @mixin atMedium {
        width: 40%;
        float: inherit;
        padding: 30px 40px;
      }

      &::before {
        content: '';
        position: absolute;
        left: 10%;
        background: $line-color;
        top: 20px;
        width: 10%;
        height: 4px;
        z-index: -1;
        transition: all .3s ease-out;

        @mixin atMedium {
          left: 40%;
          top: 30px;
          height: 4px;
          margin-top: -2px;
        }

      }

  }

  &__item__content__date {
    margin: 0;
    padding: 8px 12px;
    font-size: 15px;
    margin-bottom: 10px;
    background-color: $left-item-color;
    color: $main-white;
    display: inline-block;
    border-radius: 4px;
    border: 2px solid $main-white;
  }

  &__item__content__description {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    color: $left-item-color;

    @mixin atMedium {
      font-size: 19px;
      line-height: 28px;
    }

  }

}

/* _site-footer.css */
.site-footer {
  padding: 50px 0 200px 0;

  &__text {
    color: #e6e6e6;
    font-size: 14px;
    text-align: center;
  }

  &__text__link {
    color: #8287a9;
  }

}

voyager-timeline.markdown

Voyager Timeline

Responsive timeline example

A Pen by Ash Whiting on CodePen.

License.