<h1 contenteditable data-heading="Frozen">
	Frozen
</h1>

<p>Click word change the text</p>

$color1: white;
$color2: black;

html, body {
  background: linear-gradient(to bottom, #000428, #004e92);
}

p {color: white; text-align: center;}

h1 {
	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/6963bbf342d87b3a2150bd8f59682b89.jpg);
  	-webkit-background-clip: text;
	background-size: contain;
	width: 100%;
	text-align: center;
	color: transparent;
	font-weight: 900;
	
	
	&::before {
		content: attr(data-heading);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		background: linear-gradient(45deg, rgba(255,255,255,0) 45%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0) 55%,rgba(255,255,255,0) 100%);
		-webkit-background-clip: text;
		color: transparent;
		mix-blend-mode: screen;
		animation: shine 1s infinite;
		background-size: 200%;
		text-shadow: 
			2px 2px 10px rgba(#000, 0.2),
			-2px 2px 10px rgba(#000, 0.2),
			-2px -2px 10px rgba(#000, 0.2);
	}
}

@keyframes shine {
	0% {background-position: -100%;}
	100% {background-position: 100%;}
}





/* Not needed for demo */

@font-face {
	font-family:'frozen'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Ice%20kingdom%20-%20Bold%20-%20Por%20Kustren.woff');
}

html, body {
	height: 100%;
}

h1 {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	font-size: 20vw;
	margin: 0;
	font-family: 'frozen', serif;
	font-weight: 700;
}

// JS is to make the text editable for demo purpose, not required for the effect. Thanks for the suggestion @chriscoyier! 
var h1 = document.querySelector("h1");

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