<div id="container">
  <div class="text">
    <h1>Brutal Scrolling</h1>
    <div class="image"><img src="https://unsplash.it/800/600/?random"/></div>
    <p>Integer cras augue facilisis sit, eu lacus mus? Et aenean sociis dapibus, integer lacus pulvinar mattis augue et parturient pulvinar pid nisi non. Augue dictumst habitasse dapibus habitasse porttitor natoque urna tristique porta phasellus, porta lundium. Sagittis enim tempor penatibus? Adipiscing nisi ac sit vut ac! Sed habitasse proin tortor sagittis et ac in, adipiscing turpis placerat montes. Pellentesque mauris sociis ac montes urna. Mauris diam. Sociis enim! Eu dis! Dolor placerat duis? Elementum, hac mattis placerat odio massa proin! Placerat vut cum tristique, placerat in penatibus augue, etiam mauris? Tincidunt non eu amet tortor proin tincidunt ac, arcu, vel tempor est? Placerat risus. Nisi augue a porttitor a cum, integer scelerisque aliquet, aliquam sit velit. Ultricies placerat et cursus.</p>
  </div>
  <div class="text">
    <h2>Lorem ipsum sit ament</h2>
    <p>Integer cras augue facilisis sit, eu lacus mus? Et aenean sociis dapibus, integer lacus pulvinar mattis augue et parturient pulvinar pid nisi non. Augue dictumst habitasse dapibus habitasse porttitor natoque urna tristique porta phasellus, porta lundium. Sagittis enim tempor penatibus? Adipiscing nisi ac sit vut ac! Sed habitasse proin tortor sagittis et ac in, adipiscing turpis placerat montes. Pellentesque mauris sociis ac montes urna. Mauris diam. Sociis enim! Eu dis! Dolor placerat duis? Elementum, hac mattis placerat odio massa proin! Placerat vut cum tristique, placerat in penatibus augue, etiam mauris? Tincidunt non eu amet tortor proin tincidunt ac, arcu, vel tempor est? Placerat risus. Nisi augue a porttitor a cum, integer scelerisque aliquet, aliquam sit velit. Ultricies placerat et cursus.</p>
  </div>
  <div class="text">
    <h2>Lorem ipsum sit ament</h2>
    <div class="image"><img src="https://unsplash.it/640/480/?random"/></div>
    <p>Integer cras augue facilisis sit, eu lacus mus? Et aenean sociis dapibus, integer lacus pulvinar mattis augue et parturient pulvinar pid nisi non. Augue dictumst habitasse dapibus habitasse porttitor natoque urna tristique porta phasellus, porta lundium. Sagittis enim tempor penatibus? Adipiscing nisi ac sit vut ac! Sed habitasse proin tortor sagittis et ac in, adipiscing turpis placerat montes. Pellentesque mauris sociis ac montes urna. Mauris diam. Sociis enim! Eu dis! Dolor placerat duis? Elementum, hac mattis placerat odio massa proin! Placerat vut cum tristique, placerat in penatibus augue, etiam mauris? Tincidunt non eu amet tortor proin tincidunt ac, arcu, vel tempor est? Placerat risus. Nisi augue a porttitor a cum, integer scelerisque aliquet, aliquam sit velit. Ultricies placerat et cursus.</p>
  </div>
  <div class="text">
    <h2>Lorem ipsum sit ament</h2>
    <p>Integer cras augue facilisis sit, eu lacus mus? Et aenean sociis dapibus, integer lacus pulvinar mattis augue et parturient pulvinar pid nisi non. Augue dictumst habitasse dapibus habitasse porttitor natoque urna tristique porta phasellus, porta lundium. Sagittis enim tempor penatibus? Adipiscing nisi ac sit vut ac! Sed habitasse proin tortor sagittis et ac in, adipiscing turpis placerat montes. Pellentesque mauris sociis ac montes urna. Mauris diam. Sociis enim! Eu dis! Dolor placerat duis? Elementum, hac mattis placerat odio massa proin! Placerat vut cum tristique, placerat in penatibus augue, etiam mauris? Tincidunt non eu amet tortor proin tincidunt ac, arcu, vel tempor est? Placerat risus. Nisi augue a porttitor a cum, integer scelerisque aliquet, aliquam sit velit. Ultricies placerat et cursus.</p>
  </div>
  <div class="text">
    <h2>Lorem ipsum sit ament</h2>
    <p>Integer cras augue facilisis sit, eu lacus mus? Et aenean sociis dapibus, integer lacus pulvinar mattis augue et parturient pulvinar pid nisi non. Augue dictumst habitasse dapibus habitasse porttitor natoque urna tristique porta phasellus, porta lundium. Sagittis enim tempor penatibus? Adipiscing nisi ac sit vut ac! Sed habitasse proin tortor sagittis et ac in, adipiscing turpis placerat montes. Pellentesque mauris sociis ac montes urna. Mauris diam. Sociis enim! Eu dis! Dolor placerat duis? Elementum, hac mattis placerat odio massa proin! Placerat vut cum tristique, placerat in penatibus augue, etiam mauris? Tincidunt non eu amet tortor proin tincidunt ac, arcu, vel tempor est? Placerat risus. Nisi augue a porttitor a cum, integer scelerisque aliquet, aliquam sit velit. Ultricies placerat et cursus.</p>
  </div>
  <div class="text">
    <h2>Lorem ipsum sit ament</h2>
    <p>Integer cras augue facilisis sit, eu lacus mus? Et aenean sociis dapibus, integer lacus pulvinar mattis augue et parturient pulvinar pid nisi non. Augue dictumst habitasse dapibus habitasse porttitor natoque urna tristique porta phasellus, porta lundium. Sagittis enim tempor penatibus? Adipiscing nisi ac sit vut ac! Sed habitasse proin tortor sagittis et ac in, adipiscing turpis placerat montes. Pellentesque mauris sociis ac montes urna. Mauris diam. Sociis enim! Eu dis! Dolor placerat duis? Elementum, hac mattis placerat odio massa proin! Placerat vut cum tristique, placerat in penatibus augue, etiam mauris? Tincidunt non eu amet tortor proin tincidunt ac, arcu, vel tempor est? Placerat risus. Nisi augue a porttitor a cum, integer scelerisque aliquet, aliquam sit velit. Ultricies placerat et cursus.</p>
  </div>
  <div class="text">
    <h2>Lorem ipsum sit ament</h2>
    <p>Integer cras augue facilisis sit, eu lacus mus? Et aenean sociis dapibus, integer lacus pulvinar mattis augue et parturient pulvinar pid nisi non. Augue dictumst habitasse dapibus habitasse porttitor natoque urna tristique porta phasellus, porta lundium. Sagittis enim tempor penatibus? Adipiscing nisi ac sit vut ac! Sed habitasse proin tortor sagittis et ac in, adipiscing turpis placerat montes. Pellentesque mauris sociis ac montes urna. Mauris diam. Sociis enim! Eu dis! Dolor placerat duis? Elementum, hac mattis placerat odio massa proin! Placerat vut cum tristique, placerat in penatibus augue, etiam mauris? Tincidunt non eu amet tortor proin tincidunt ac, arcu, vel tempor est? Placerat risus. Nisi augue a porttitor a cum, integer scelerisque aliquet, aliquam sit velit. Ultricies placerat et cursus.</p>
  </div>
  <div class="text">
    <h2>Lorem ipsum sit ament</h2>
    <p>Integer cras augue facilisis sit, eu lacus mus? Et aenean sociis dapibus, integer lacus pulvinar mattis augue et parturient pulvinar pid nisi non. Augue dictumst habitasse dapibus habitasse porttitor natoque urna tristique porta phasellus, porta lundium. Sagittis enim tempor penatibus? Adipiscing nisi ac sit vut ac! Sed habitasse proin tortor sagittis et ac in, adipiscing turpis placerat montes. Pellentesque mauris sociis ac montes urna. Mauris diam. Sociis enim! Eu dis! Dolor placerat duis? Elementum, hac mattis placerat odio massa proin! Placerat vut cum tristique, placerat in penatibus augue, etiam mauris? Tincidunt non eu amet tortor proin tincidunt ac, arcu, vel tempor est? Placerat risus. Nisi augue a porttitor a cum, integer scelerisque aliquet, aliquam sit velit. Ultricies placerat et cursus.</p>
  </div>
  <div class="text">
    <h2>Lorem ipsum sit ament</h2>
    <p>Integer cras augue facilisis sit, eu lacus mus? Et aenean sociis dapibus, integer lacus pulvinar mattis augue et parturient pulvinar pid nisi non. Augue dictumst habitasse dapibus habitasse porttitor natoque urna tristique porta phasellus, porta lundium. Sagittis enim tempor penatibus? Adipiscing nisi ac sit vut ac! Sed habitasse proin tortor sagittis et ac in, adipiscing turpis placerat montes. Pellentesque mauris sociis ac montes urna. Mauris diam. Sociis enim! Eu dis! Dolor placerat duis? Elementum, hac mattis placerat odio massa proin! Placerat vut cum tristique, placerat in penatibus augue, etiam mauris? Tincidunt non eu amet tortor proin tincidunt ac, arcu, vel tempor est? Placerat risus. Nisi augue a porttitor a cum, integer scelerisque aliquet, aliquam sit velit. Ultricies placerat et cursus.</p>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Manuale|Oswald:700');

$color_palette1: #4c1760;
$color_palette2: #F35760;

body {
  
  font-family: 'Manuale', serif;
  background: $color_palette2;
  color: $color_palette1;
  
  a {
    color: $color_palette1;
  }
  
}

#container {
  
  padding: 100px 250px;
  
  .text {
    
    margin-bottom: 40px;
    transition: 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
    
    h1 {
      font-size: 6em;
    }
    
    h2 {
      font-size: 4em;
    }
    
    h1, h2 {
      text-transform: uppercase;
      font-family: 'Oswald', sans-serif;
      color: $color_palette2;
      line-height: 110%;
      letter-spacing: 2px;
      text-shadow: 
        1px 1px 0 $color_palette1,
        2px 2px 0 $color_palette1,
        3px 3px 0 $color_palette1,
        4px 4px 0px $color_palette1,
        5px 5px 0px $color_palette1;
    }
    
    p {
      font-size: 1.5em;
    }
    
    .image {
      
      background: $color_palette2;
    
      img {
        display: block;
        max-width: 100%;
        filter: grayscale(100%);
        mix-blend-mode: multiply;
      }
      
    }
    
  }
  
  &.scroll-up {
    
    .text {
      transform: skewY(-3deg);
    }
    
  }
  
  &.scroll-down {
    
    .text {
      transform: skewY(3deg);
    }
    
  }
  
}
View Compiled
var lastScrollTop = 0;

$(window).scroll(function() {
  
  var st = window.pageYOffset || document.documentElement.scrollTop;
  
  if (st > lastScrollTop) {
    
    // scroll down
    $('#container').removeClass('scroll-up').removeClass('scroll-down');
    $('#container').addClass('scroll-down');
    
  }
  else {
    
    // scroll up
    $('#container').removeClass('scroll-up').removeClass('scroll-down');
    $('#container').addClass('scroll-up');
    
  }
  
  clearTimeout($.data(this, 'scrollTimer'));
  $.data(this, 'scrollTimer', setTimeout(function() {
	   $('#container').removeClass('scroll-up').removeClass('scroll-down');
	}, 100));
  
  lastScrollTop = st;
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js