stylesheet.scss

$theme-dark: #242424;
$theme-normal: #393939;
$theme-light: #505050;
$color-font: #bbbbbb;
$color-shadow: rgba(#000000, .2);
$color-overlay: rgba(#ffffff, .1);
$color-alert: #f3bd58;
$color-selected: #2962ff;
$color-patched: #c51162;
$color-highlight: #29d;

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  background-color: $theme-dark;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  box-sizing: border-box;
  transition: all 1s ease;
}

.screen {
  position: relative;
  min-width: 1920px;
  min-height: 1080px;
  background-color: $theme-normal;
  box-shadow: 0 0 32px $color-shadow;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 0;

  &.initial {
    * {
      transition: none;
    }
  }

  &.active {
    z-index: 1;
    opacity: 1;
  }

  &:after {
    position: absolute;
    bottom: 16px;
    max-width: 1280px;
    padding: 16px 32px;
    text-align: center;
    color: $color-font;
    font-size: 48px;
    background-color: $color-shadow;
    transition: all 1s ease;
  }
}

.slide-0 {
  .material {
    color: $theme-light;
    font-size: 192px;
  }

  .learner {
    margin: 0 128px;
    color: $color-font;
    font-size: 256px;
    display: none;
  }

  &._0,
  &._1,
  &._2 {
    .learner-first {
      display: block;
    }
  }

  &._1 {
    .material:first-child {
      color: $color-font;
    }
  }

  &._2,
  &._3 {
    .material {
      color: $color-font;
    }
  }

  &._3 {
    .learner-second {
      display: block;
    }
  }
}

.slide-1 {
  background: no-repeat center;
  background-size: 520px;
  background-position-y: calc(50% - 46px);

  i {
    font-size: 512px;
    color: $color-font;
  }

  &._0 {
    background-image: url(img/1/visualgo.png);
  }

  &._1 {
    background-image: url(img/1/usfca.png);
  }

  &._2 {
    background-image: url(img/1/khan.png);
  }
}

.slide-2 {
  .src,
  .dest {
    position: absolute;
    color: $color-font;
    font-size: 192px;
    opacity: 0;
  }

  .arrow {
    position: absolute;
    color: $theme-light;
    font-size: 128px;
    opacity: 0;
  }

  .src {
    opacity: 1;
    left: calc(50% - 120px);
  }

  .dest {
    right: 512px;
  }

  &._1,
  &._2 {
    .src {
      left: 512px;
    }

    .arrow {
      opacity: 1;
    }
  }

  &._2 {
    .dest {
      opacity: 1;
    }
  }
}

.slide-3 {
  background: url(img/3/logo.png) no-repeat center;
}

.slide-4 {
  background: url(img/4/screenshot.png) no-repeat center;
  background-size: contain;

  $height-header: 84px;

  .highlight {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba($color-highlight, .1);
    border: 2px solid $color-highlight;
  }

  &._0,
  &._1,
  &._2 {
    .highlight {
      opacity: 0;
      bottom: 100%;
    }
  }

  &._3,
  &._4 {
    .highlight {
      bottom: 1080-$height-header;
    }
  }

  &._5 {
    .highlight {
      top: $height-header;
      right: 1920 * .8px;
    }
  }

  &._6,
  &._7 {
    .highlight {
      top: $height-header;
      left: 1920 * .2px;
      right: 1920 * .4px;
    }
  }

  &._8 {
    .highlight {
      top: $height-header;
      left: 1920 * .6px;
      right: 0;
    }
  }
}

.slide-5 {
  perspective: 2048px;
  perspective-origin: center;

  .container {
    flex: 1;
    background-color: $theme-dark;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 2px solid $theme-light;

    &:not(:first-child) {
      margin-left: 24px;
    }

    .title {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      background: $theme-light;
      white-space: nowrap;

      &.center {
        justify-content: center;

      }

      i {
        color: white;
        font-size: 20px;

        &:not(:last-child) {
          margin-right: 6px;
        }
      }

      .org {
        color: $color-font;
      }

      .slash {
        color: $color-font;
        font-size: 20px;
        margin: 0 4px;
      }

      .repo {
        color: white;
        font-weight: bold;
        font-size: 20px;
      }
    }

    .content {
      flex: 1;
      padding: 24px;
      display: flex;
      align-items: stretch;

      &.vertical {
        flex-direction: column;
        justify-content: center;

        & > .container {
          flex: none;

          &:not(:first-child) {
            margin-left: 0;
            margin-top: 16px;
          }
        }
      }
    }
  }

  .algorithms {
    top: 192px;
  }

  .tracers {
    top: 384px;
  }

  .app {
    top: 576px;
  }

  .algorithms,
  .tracers,
  .app {
    position: absolute;
    transform: rotateX(50deg);
    box-shadow: 0 16px 16px $color-shadow;
    opacity: .6;
    margin-left: 0 !important;
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba($color-highlight, .1);
      border: 2px solid $color-highlight;
      opacity: 0;
      transition: all 1s ease;
    }
  }

  &._2 .algorithms,
  &._3 .tracers,
  &._4 .app {
    &:after {
      opacity: 1;
    }
  }

  &._5 .algorithms,
  &._6 .tracers,
  &._7 .app {
    transform: rotateX(0deg);
    opacity: 1;
  }

  &._6 .algorithms,
  &._7 .algorithms {
    top: 0;
  }

  &._7 .tracers {
    top: 192px;
  }
}

.slide-6 {
  background-color: $theme-dark;
  color: $color-font;
  font-size: 96px;
}

.slide-0:after {
  content: 'Learning algorithms from text and static images is quite boring.';
}

.slide-1:after {
  content: 'For that, there have been many great websites that view animations of various algorithms.';
}

.slide-2:after {
  content: 'However, for us being coders, nothing can be more comprehensible than visualizing the actual working code.';
}

.slide-3:after {
  content: 'So here we introduce Algorithm Visualizer.';
}

.slide-4 {
  &._0:after {
    content: 'Algorithm Visualizer is an interactive online platform that visualizes algorithms from code.';
  }
  &._1:after {
    content: 'It offers visualization tools in various languages including JavaScript, Java, and C++.';
  }
  &._2:after {
    content: 'The UI of Algorithm Visualizer consists of 4 sections: toolbar, sidebar, viewer, and editor.';
  }
  &._3:after {
    content: 'The toolbar contains a user\'s profile and buttons for controlling visualization.';
  }
  &._4:after {
    content: 'A user can also save algorithms to GitHub Gist or share them on Facebook here.';
  }
  &._5:after {
    content: 'The sidebar shows a set of public algorithms, which others have contributed, in addition to a user\'s scratch papers.';
  }
  &._6:after {
    content: 'The viewer is where the actual visualization happens.';
  }
  &._7:after {
    content: 'It also views descriptions of algorithms.';
  }
  &._8:after {
    content: 'Lastly, the editor lets a user write down their own algorithms to be visualized.';
  }
}

.slide-5 {
  &._0:after {
    content: 'Algorithm Visualizer is an open source project on GitHub.';
  }
  &._1:after,
  &._2:after,
  &._3:after,
  &._4:after {
    content: 'The project is composed of 3 repositories named algorithms, tracers, and algorithm-visualizer.';
  }
  &._5:after {
    content: '"algorithms" repository contains public algorithms shown on the sidebar.';
  }
  &._6:after {
    content: '"tracers" repository contains visualization libraries written in each supported language.';
  }
  &._7:after {
    content: '"algorithm-visualizer" repository contains the front-end written in React.js and the back-end written in Node.js.';
  }
  &._8:after {
    content: 'When the back-end compiles and runs code, the visualization library emits a change log.';
  }
  &._9:after {
    content: 'The back-end then passes the change log on to the front-end, and the front-end interprets and renders it step by step.';
  }
}

.slide-6:after {
  content: 'Visit algorithm-visualizer.org.';
}