Split Text Slides

index.pug

.slider
  .slide.active
    .panel
      .top(data-back="SAILOR")
      .bottom(data-back="SAILOR")
    .center
      h1 The sailors marched
  .slide
    .panel
      .top(data-back="DESERT")
      .bottom(data-back="DESERT")
    .center
      h1 Across the desert
  .slide
    .panel
      .top(data-back="WATER")
      .bottom(data-back="WATER")
    .center
      h1 In search of water
  .slide
    .panel
      .top(data-back="SAND")
      .bottom(data-back="SAND")
    .center
      h1 But they found sand



a(href="http://nathan.tokyo" target="_blank").sig NATHAN.TOKYO

script.js

$(document).on('click',nextSlide);

function nextSlide(){
  console.log($('.active + .slide').length);
  if ($('.active + .slide').length > 0){
    $('.active + .slide').addClass('active');
    $($('.active')[0]).removeClass('active');
  } else{
    $('.active').removeClass('active');
    $('.slide:nth-child(1)').addClass('active');
  }
}

scripts

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

split-text-slides.markdown

Split Text Slides

I thought this would make an interesting transition and help bring attention first to the background work and then the slide text.

A Pen by Nathan Taylor on CodePen.

License.

style.scss

//$color1: hsl(225 ,57%, 73%);
$color1: hsl(225 ,80%, 70%);
//$color2: hsl(256 ,14%, 63%);
$color2: hsl(80 ,40%, 70%);
//$color3: hsl(197 ,17%, 47%);
$color3: hsl(197 ,80%, 70%);
$color4: hsl(0, 60%, 60%);

$contrast: 4%;
$shift: 10%;

$human: 'Average Sans', sans-serif;
$narrow: 'BenchNine', sans-serif;


$time: 600ms;
$ease: cubic-bezier(1.000, 0.005, 0.570, 0.865);
$ease-out: cubic-bezier(0.230, 1.000, 0.320, 1.000);

$base: 1vh;

@mixin abfab{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

html{
  font-size: $base
}

body{
  height: 100vh;
  width: 100vw;
  font-family: $human;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

.slider{
  @include abfab;
  height: 100vh;
  overflow: hidden;
}

.slide{
 @include abfab;
  &:nth-child(1) .panel > * {  
    background: darken(adjust-hue($color1, $shift), $contrast);
    color: $color1;
  }
  &:nth-child(2)  .panel > * {  
    background: darken(adjust-hue($color2, $shift), $contrast);
    color: $color2;
  }
  &:nth-child(3) .panel > * {  
    background: darken(adjust-hue($color3, $shift), $contrast);
    color: $color3;
  }
  &:nth-child(4) .panel > * {  
    background: darken(adjust-hue($color4, -$shift), $contrast);
    color: $color4;
  }
  .center{
    opacity: 0;
    transition: opacity linear $time*0.5;
  }
  .panel{
    @include abfab
  }
  .top, .bottom{
    content: attr(data-back);
    position: absolute;
    font-size: 50vh;
    font-weight: 800;
    height: 50vh;
    width: 100vw;
    text-align: center;
    z-index: 1;
    overflow: hidden;
    box-sizing: border-box;
    transition: transform $time $ease;
    &:after{
      position: relative;
      display: inline-block;
      transition: transform $time $ease;
      content: attr(data-back);
      font-family: $narrow;
    }
  }
  .top{
    line-height: 100vh;
    transform: translatey(-50vh);
    &:after{
      transform: translatey(50vh);
    }
  }
  .bottom{
    bottom: 0;
    line-height: 0vh;
    transform: translatey(50vh);
     &:after{
      transform: translatey(-50vh);
    }
  }
  &.active{
    .center{
      opacity: 1; 
      transition: opacity linear $time*0.5;
      transition-delay: $time;
    }
    .top, .bottom{
      transition: none;
      transform: translatey(0);
      z-index: -1;
      &:after{
        transition: transform $ease-out $time*2;
        transform: translatey(0);
      }
    }
  }
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  z-index: 2;
  text-align: center;
  h1{
    font-size: 10vh;
    line-height: 1;
    //text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    font-family: $narrow;
  }
}

.sig{
  position: fixed;
  bottom: 8px;
  right: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 100;
  font-family: sans-serif;
  color: rgba(255,255,255,0.4);
  letter-spacing: 2px;
}