RGB Channel Split Scroll Effect

index.pug

.section
  .center.one
    .r
    .g
    .b
.section
  .center.full.two
    .r
    .g
    .b
.section
  .center.three
    .r
    .g
    .b
.section
  .center.full.four
    .r
    .g
    .b
.section
  .center.five
    .r
    .g
    .b




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

rgb-channel-split-scroll-effect.markdown

RGB Channel Split Scroll Effect

I used blend modes to seperate images out into RGB components and separate them on scroll for a cool blur effect.

A Pen by Alexandr on CodePen.

License.

script.babel

let speed = 300;
let amount = 30

let scroll = 0;
let smooth = 0;
let diff = 0;

$(document).on('scroll', (event) => {
  scroll = $(window).scrollTop();
})

let oldTime = null;
let delta = 0;

const animate =  (t) =>{
  if (oldTime)
    delta = t - oldTime
  smooth += (scroll - smooth) * delta / speed;
  diff = scroll - smooth;
  
  let translateCenter = diff * -2/amount;
  let translateRed = diff * 3/amount;
  let translateGreen = diff * 2/amount;
  let translateBlue = diff * 1/amount;
  
  $('.center').css('transform', 'translateY('+translateCenter+'px)')
  $('.r').css('transform', 'translateY('+translateRed+'px)')
  $('.g').css('transform', 'translateY('+translateGreen+'px)')
  $('.b').css('transform', 'translateY('+translateBlue+'px)')
  
  oldTime = t;
  requestAnimationFrame(animate)
}

requestAnimationFrame(animate)

scripts

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

style.scss

$base: 1vh;

html{
  font-size: $base
}

body{
  height: 100vh;
  width: 100vw;
  background: white;
  color: white;
  font-size: 2rem;
}
$move: 10px;

.section{
  height: 100vh;
  position: relative;
}

.center{
  position: absolute;
  top: calc(50% - 25rem);
  left: calc(50% - 25rem);
  width: 50rem;
  height: 50rem;
  overflow: hidden;
  &.full{
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }
  &.one{ .r, .g, .b{
      background-image: url(http://unsplash.it/g/600/600?image=495);
  }}
  &.two{ .r, .g, .b{
      background-image: url(http://unsplash.it/g/800/600?image=781);
  }}
  &.three{ .r, .g, .b{
      background-image: url(http://unsplash.it/g/600/600?image=942);
  }}
  &.four{ .r, .g, .b{
      background-image: url(http://unsplash.it/g/800/600?image=363);
  }}
  &.five{ .r, .g, .b{
      background-image: url(http://unsplash.it/g/600/600?image=396);
  }}
  .r, .g, .b{
    width: calc(100% + #{$move*2});
    height: calc(100% + #{$move*2});
    position: absolute;
    top: -$move;
    left: -$move;
    background-size:cover;
    mix-blend-mode: screen;
    background-blend-mode: darken;
  }
  .r{
    background-color: rgba(255,0,0,1);
  }
  .g{
    background-color: rgba(0,255,0,1);
  }
  .b{
    background-color: rgba(0,0,255,1);
  }
  
}

.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;
}