<h1 data-text="Hello" contenteditable>Hello</h1>

body,
html {
  background-color: #f9c9e9;
  padding: 0;
  overflow: hidden;
}

@function makeShadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 320 {
    $val: #{$val}, -#{$i}px #{$i}px #{$color};
  }
  @return $val;
}

@mixin shadow($color) {
  text-shadow: makeShadow($color);
}


@mixin interpolate($properties, $min-screen, $max-screen, $min-value, $max-value) {
  & {
    @each $property in $properties {
      #{$property}: $min-value;
    }

    @media screen and (min-width: $min-screen) {
      @each $property in $properties {
        #{$property}: calc-interpolation($min-screen, $min-value, $max-screen, $max-value); 
      }
    }

    @media screen and (min-width: $max-screen) {
      @each $property in $properties {
        #{$property}: $max-value;
      }
    }
  }
}

// Requires the calc-interpolation function which can also be used independently
@function calc-interpolation($min-screen, $min-value, $max-screen, $max-value) {
  $a: ($max-value - $min-value) / ($max-screen - $min-screen);
  $b: $min-value - $a * $min-screen; 

  $sign: "+";
  @if ($b < 0) {
    $sign: "-";
    $b: abs($b);
  }
  @return calc(#{$a*100}vw #{$sign} #{$b});
}

h1 {
  font-family: 'CoreCircus', arial;
  @include interpolate(font-size, 320px, 700px, 56px, 125px);

  color: darken(#f9c9e9, 20);
  text-transform: uppercase;
  font-weight: 700;
  z-index: 1;
  width: 100%;
  height: 346px;
  max-width: 700px;
  text-align: center;
  position: absolute;
  bottom: 0%;
  left: 0%;
  overflow: hidden;
  
  &::after {
    @include shadow(darken(#f9c9e9, 10));
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;

    animation: swoosh 1s infinite linear;
    mask-position: -30px 0px;
    mask-image: repeating-linear-gradient(
      -45deg,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0) 10px,
      rgba(0, 0, 0, 1) 10px,
      rgba(0, 0, 0, 1) 20px
    );
    will-change: mask-position;
    transform: translateZ(0);
  }
}

@keyframes swoosh {
  0% {
    mask-position: -30px 0px;
  }

  100% {
    mask-position: -1px 0px;
  }
}

/*
 * Webfont: CoreCircus by S-Core
 * URL: http://www.myfonts.com/fonts/s-core/core-circus/regular/
 * Copyright: Copyright (c) 2013 by S-Core Co., Ltd.. All rights reserved.
 * Licensed pageviews: 10,000
*/

@font-face {
  font-family: 'CoreCircus';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.eot');
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.woff2') format('woff2'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.ttf') format('truetype');
}

// JS is to make the text editable, not required for the effect. 
var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
    this.setAttribute("data-text", this.innerText);
});