<header>
  <div class="header-top">
    <h1><a href="https://fonts.google.com/specimen/Droid+Serif" target="_blank">Droid Serif</a></h1>
    <p class="instructions">use keyboard to jump to characters, arrow keys to scroll, or just use your finger!</p>
  </div>
  <div class="controls">
    <h3 class="section-title">characters</h3>
    <div>
      <p class="styles"><span class="bold">bold</span> | <span class="italic">italic</span></p>
      <p class="color-mode"><span class="light -active">light</span> | <span class="dark">dark</span></p>
      <p class="show-lines"><span class="lines-indicator"></span> show lines</p>
    </div>
  </div>
</header>
<div class="carousel">
  <div class="carousel-cell">
    <div class="-inner">
      <p>Aa</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Bb</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Cc</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Dd</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Ee</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Ff</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Gg</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Hh</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Ii</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Jj</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Kk</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Ll</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Mm</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Nn</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Oo</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Pp</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Qq</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Rr</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Ss</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Tt</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Uu</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Vv</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Ww</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Xx</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Yy</p>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="-inner">
      <p>Zz</p>
    </div>
  </div>
</div>
<div class="type-tester">
  <h3 class="section-title">type tester — <em>click to edit</em></h3>
  <h2 contenteditable="true">Call it the Star Gate</h2>
  <p contenteditable="true">For three million years, it had circled Saturn, waiting for a moment of destiny that might never come. In its making, a moon had been shattered, and the debris of its creation orbited still.</p>
  <p contenteditable="true">Now the long wait was ending. On yet another world, intelligence had been born and was escaping from its planetary cradle. An ancient experiment was about to reach its climax.</p>
</div>
// Vars
$white: #F3F3F3;
$black: #1D1F20;

*,*::before,*::after {
  box-sizing: border-box;
}

body {
  padding: 0;
  color: $black;
  background: $white;
  font-family: 'Droid Serif', serif;
  transition: color .5s ease-out, background .5s ease-out;
  &.dark-mode {
    color: $white;
    background: $black;
    -webkit-font-smoothing: antialiased;
    .type-tester > *:focus,
    .type-tester > *:hover {
      background: rgba(255,255,255,.05);
    }
    .controls {
      .show-lines {
        &:hover,
        &.-active {
          .lines-indicator {
            background: $white;
          }
        }
      }
    }
  }
}

.section-title {
  top: 0;
  left: 0;
  margin: 0;
  opacity: .25;
  font-size: 14px;
  font-weight: 400;
  padding-top: 14px;
  position: absolute;
}

header {
  z-index: 1;
  margin: 30px 60px;
  position: relative;
  
  .header-top {
    &::after {
      content: '';
      clear: both;
      display: table;
    }
  }

  h1 {
    float: left;
    line-height: 1;
    font-size: 22px;
    font-weight: 700;
    margin: 0 30px 0 0;
    a {
      color: inherit;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  
  p.instructions {
    margin: 0;
    float: right;
    line-height: 3;
    font-size: 10px;
    font-style: italic;
  }
}

.controls {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid;
  &::after {
    content: '';
    clear: both;
    display: table;
  }
  
  > div {
    float: right;
    p {
      display: inline-block;
    }
  }
  
  .section-title {
    top: auto;
    float: left;
    padding-top: 6px;
    position: relative;
  }
  
  p {
    margin: 0;
    line-height: 2;
    font-size: 14px;
  }
  
  p.styles {
    float: left;
    .bold {
      font-weight: 700;
    }
    .italic {
      font-style: italic;
    }
    span {
      cursor: pointer;
    }
    span:not(.-active) {
      opacity: .5;
      &:hover {
        opacity: 1;
      }
    }
  }
  
  p.color-mode {
    float: left;
    margin-left: 30px;
    span {
      cursor: pointer;
    }
    span:not(.-active) {
      opacity: .5;
      &:hover {
        opacity: 1;
      }
    }
  }
  
  .show-lines {
    cursor: pointer;
    margin-left: 30px;
    .lines-indicator {
      width: 8px;
      height: 8px;
      border: 1px solid;
      position: relative;
      border-radius: 50%;
      display: inline-block;
      background: rgba(0,0,0,0);
      transition: background .2s ease-out;
    }
    &:hover,
    &.-active {
      .lines-indicator {
        background: $black;
      }
    }
  }
}

.carousel {
  height: 400px;
  overflow: hidden;
  position: relative;
  &:focus {
    outline: none;
  }
}

.flickity-slider {
  min-height: 400px;
}

.carousel-cell {
  width: 50%;
  height: 100%;
  display: flex;
  text-align: center;
  background-size: cover;
  transition: filter .5s ease-out, opacity .5s ease-out;
  
  .-inner {
    opacity: 1;
    margin: auto;
    transition: opacity 1s ease-out .5s;
  }
  
  p {
    margin: 0;
    font-size: 25vw;
    line-height: .75;
    position: relative;
    transform-origin: center center;
    transition: transform .5s ease-out;
    @media screen and (min-width: 1200px) {
      font-size: 300px;
    }
    &::before {
      top: 0;
      opacity: 0;
      left: -5vw;
      right: -5vw;
      z-index: -1;
      content: '';
      bottom: .35vw;
      position: absolute;
      border-top: 2px solid;
      border-bottom: 2px solid;
      transition: opacity .5s ease-out;
    }
    &::after {
      top: 50%;
      left: -5vw;
      opacity: 0;
      right: -5vw;
      content: '';
      z-index: -1;
      height: 4px;
      position: absolute;
      border-top: 4px dashed;
      transform: translateY(-4px);
      transition: opacity .5s ease-out;
    }
    &.lines-shown {
      &::before,
      &::after {
        opacity: .25;
      }
    }
  }
  
  &:not(.is-selected) {
    opacity: .25;
    filter: blur(5px);
    p {
      transform: scale(.5);
    }
  }
}

.type-tester {
  padding: 50px 0;
  margin: 30px 60px;
  position: relative;
  border-top: 1px solid;
  
  > *:focus,
  > *:hover {
    outline: none;
    background: rgba(0,0,0,.05);
  }
  
  h2 {
    margin-top: 0;
    font-size: 34px;
    max-width: 600px;
  }
  p {
    font-size: 18px;
    max-width: 600px;
    line-height: 1.25;
  }
}
View Compiled
// Initiate the flickity carousel
var $carousel = $('.carousel').flickity({
  percentPosition: false,
  prevNextButtons: false,
  pageDots: false,
  wrapAround: true,
});

// Add letter key codes to an array
// to match them up to corresponding
// flickity carousel cell index
var letterIndexes = [];
for (var i=65;i<91;i++) {
  letterIndexes.push(i);
}
// Go!
$(document).keyup(function(e) {
  if (e.keyCode > 64 && e.keyCode < 91) {
    jumpToLetter(letterIndexes.indexOf(e.keyCode));
  }
});
// Using flickity's select event to
// activate the cell with the matching
// index to the letter
function jumpToLetter(index) {
  $carousel.flickity( 'select', index );
}

// Toggling style states
$('.styles span').on('click', function() {
  if ($(this).is('.bold')) {
    if (!$(this).is('.-active')) {
      $(this).addClass('-active');
      $('.carousel, .type-tester').css('font-weight', '700');
    } else {
      $(this).removeClass('-active');
      $('.carousel, .type-tester').css('font-weight', '400');
    }
  }
  
  if ($(this).is('.italic')) {
    if (!$(this).is('.-active')) {
      $(this).addClass('-active');
      $('.carousel, .type-tester').css('font-style', 'italic');
    } else {
      $(this).removeClass('-active');
      $('.carousel, .type-tester').css('font-style', 'normal');
    }
  }
});

$('.color-mode span').on('click', function() {
  if ($(this).is('.dark')) {
    $('.light').removeClass('-active');
    $(this).addClass('-active');
    $('body').addClass('dark-mode');
  } else {
    $('.dark').removeClass('-active');
    $(this).addClass('-active');
    $('body').removeClass('dark-mode');
  }
});

$('.show-lines').on('click', function() {
  $(this).toggleClass('-active');
  $('.carousel p').toggleClass('lines-shown');
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://npmcdn.com/flickity@2/dist/flickity.pkgd.js