Side panels

index.html

<section>
  <article class="current static">
    <div class="image-wrap green">
      <img src="//ssbwiki.com/images/c/cb/MarioSymbol(preBrawl).svg">
    </div>
    <div class="caption">
      <p>Goomba ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed princess quam. Suspendisse luctus enim vel rutrum euismod.</p>
    </div>
  </article>
  <article>
    <div class="image-wrap yellow">
      <img src="//ssbwiki.com/images/d/d4/YoshiSymbol(preBrawl).svg">
    </div>
    <div class="caption">
      <p>Mario molestie, lectus vitae interdum sollicitudin, leo sem aliquet dolor, eget bowser risus risus sit amet nisl.</p>
    </div>
  </article>
</section>

script.js

$(function() {
  $('article').viewportChecker({
    classToAdd: 'current',
    repeat: true,
    offset: '50%'
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.2/jquery.viewportchecker.min.js"></script>

Side panels.markdown

Side panels

A Pen by Luke Reid on CodePen.

License.

style.scss

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
  height: 100%;
  position: relative;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Open Sans', helvetica, arial;
  font-size: 16px;
  line-height: 1.6em;
}

section {
  height: 100%;
}

article {
  clear: both;
  overflow: hidden;
  min-height: 100%;
  height: 100%;
  
  .caption {
    width: 50%;
    height: 100%;
    position: relative;
    top: 0;
    padding: 80px;
    
    p {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  
  .image-wrap {
    width: 50%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    
    img {
      display: table;
      margin: 0 auto;
      transform: translate(-50%, -50%);
      width: 80%;
      height: 80%;
      position: absolute;
      top: 50%;
      left: 50%;
    }
    
    &.green { 
      background: #4fd;
    }
    
    &.yellow {
      background: #ec9;
    }
  }
  
  &.current, &.static {
    .image-wrap {
      transform: translateY(0%);
    }
  }
}

@media (max-width: 600px) {
  article {
    .caption {
      width: 100%;
      padding: 40px;
      
      p {
        position: static;
        transform: translateY(0%);
      }
    }
    
    .image-wrap {
      width: 100%;
      height: 50%;
      position: relative;
      transform: translateY(0%);
    }
  }
}

styles

<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />