back_style.scss

@import "bourbon";
*, *:before, *:after {
    box-sizing: border-box;
}
@include keyframes(scrollBad) {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -320px;
  }
}
@include keyframes(scrollGood) {
  0% {
    transform: translate3d(0,0,0);
  }
  100% {
    transform: translate3d(0,-320px,0);
  }
}
.pen {
  background-color: blue;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.panel {
  padding: 3rem;
  height: 50%; 
}
.top {
  background-color: #3E69C3;
  background-image: url(http://scarbroughstudios.com/img/codepen.svg);
  background-position: center center;
  background-size: 500px;  
  @include animation(scrollBad 5s linear infinite);
}
.bottom {
  background-color: #31CC70;
  overflow: hidden;
  position: relative;
  
  .scroll {
    background-image: url(http://scarbroughstudios.com/img/codepen.svg);
    background-position: center center;
    background-size: 500px;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 400%;
    width: 100%;
    z-index: 1;
    @include animation(scrollGood 5s linear infinite);
  }
}
h1 {
  color: white;
  font-weight: 400;
  font-family: sans-serif;
  margin: 0;
  position: relative;
  z-index: 2;
}