<!-- https://texteffects.dev/posts/ice-text-effect -->
<div>
	<h1 data-heading="Frozen" contenteditable>
		Frozen
		
		<!-- HTML for if you're animating and/or using text shadows instead of drop shadows-->
		<!-- <span class="layer1" aria-hidden="true">Frozen</span> -->
		<span class="animation" aria-hidden="true">Frozen</span> 
	</h1>
</div>

body {
	background: linear-gradient(to bottom, #000428, #004e92),
		url("https://assets.codepen.io/209981/ice5.jpg");
	background-blend-mode: saturation;
	background-size: cover;
}

div {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	position: relative;
}

h1 {
	transform: translate(0, -40%);
	font-size:  calc(20vw + 0.5rem);
	font-family: "frozen", serif;
	background-image: url("https://assets.codepen.io/209981/ice.jpg");
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: contain;
	position: relative;
	-webkit-text-stroke: 1px #4f90ab;
	
	// If not animating use drop-shadows to keep the effect simple and limit 		HTML elements
	filter: 
		drop-shadow(0 0 2px rgba(255,255,255, 0.7))
		drop-shadow(0 0 2px rgba(41, 131, 172, 0.7))
		drop-shadow(0 0 30px rgba(125, 204, 239, 0.8))
		drop-shadow(0 0 30px rgba(58, 122, 155, 0.8));
}

// If you have performance issues with the animation use text-shadows instead of the drop shadow
/*.layer1 {
	position: absolute;
	left: 0;
	text-shadow: 
		1px -1px 2px rgba(255, 255, 255, 0.2), 
		1px -1px 2px rgba(255, 255, 255, 0.2), 
		-1px -1px 2px rgba(255, 255, 255, 0.2), 
		2px 2px 2px rgba(41, 131, 172, 0.2), 
		-2px 2px 2px rgba(41, 131, 172, 0.2), 
		-2px -2px 2px rgba(41, 131, 172, 0.2), 
		3px 3px 30px rgba(125, 204, 239, 0.5), 
		-3px 3px 30px rgba(125, 204, 239, 0.5), 
		-3px -3px 30px rgba(125, 204, 239, 0.5), 
		-6px 6px 30px rgba(58, 122, 155, 0.5), 
		6px 6px 30px rgba(58, 122, 155, 0.5), 
		-6px -6px 30px rgba(58, 122, 155, 0.5);
		-webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
		mix-blend-mode: hard-light;
}*/

// ANIMATION STYLES

.animation {
	position: absolute;
	left: 0;
	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;
	-webkit-text-fill-color: transparent;
	animation: shine 7s infinite;
	background-size: 200%;
}


// The animation with data-attributes and psuedo-elements (not recommended due to accessibility issues atm) - https://textlab.dev/posts/data-attributes-and-text-effects
// h1::before {
// 	content: attr(data-heading) / "";
// 	position: absolute;
// 	left: 0;
// 	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;
// 	animation: shine 7s infinite;
// 	background-size: 200%;
// }


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

@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");
}

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

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