<div class="background"></div>
<h1 contenteditable data-heading="Guru">Guru</h1>
$layer1: #ff6200;
$layer2: #7b2020;
$layer3: #3db564;

html,
body {
	width: 100%;
	height: 100%;
}

.background {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/furu.png);
	background-size: cover;
	width: 100%;
	height: 100%;
	filter: blur(20px);
	position: absolute;
}

h1 {
	font-family: 'nt_gurutwo';
	text-transform: uppercase;
	font-size: 14vw;
	text-align: center;
	line-height: 1;
	margin: 0;
	top: 50%;
	left: 50%;
	position: absolute;
	color: $layer1;
	font-weight: normal;
	letter-spacing: 1rem;
	mix-blend-mode: difference;
	transform: translateZ(0) translate(-50%, -50%);
	animation: floating 4s ease-in-out infinite;
	
	&:before,
	&:after {
		content: attr(data-heading);
		position: absolute;
		overflow: hidden;
		left: 0;
		width: 100%;
		font-weight: normal;
	}
	&:before {
    	font-family: 'nt_guruthree';
		color: $layer2;
		top: 2px;
	}
	&:after {
		color: $layer3;
		width: 100%;
		font-family: 'nt_gurufive';
		top: 4px;
	}
}

@keyframes floating {
	from {
		transform: translate(-50%, -50%);
	}
	65% {
		transform: translate(-50%, -80%);
	}
	to {
		transform: translate(-50%, -50%);
	}
}


View Compiled

// JS is to make the text editable, 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);
});

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/guru.css

External JavaScript

This Pen doesn't use any external JavaScript resources.