<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');
}


View Compiled
// 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);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.