<div class="wrapper">
	<h1 data-heading="Swimming" contenteditable>Swimming</h1>
</div>

$sky: #8dcfed;

html {
	height: 100%;
}

body {
	background: #55a9db;
	height: 100%;
	overflow: hidden;
}

h1 {
	font-size: 16vw;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	font-weight: 900;
	white-space: nowrap;
	display: inline-block;
	margin: 0;
}

.wrapper {
	width: 100%;
	font-family: 'Bahiana', cursive;
	margin: 0 auto;
	height: 100%;
	
	&:before {
		height: 50%;
		width: 100%;
		background: $sky;
		content: "";
		position: absolute;
		animation: water 3.5s ease-in-out infinite;
		backface-visibility: hidden;
	}
	
	h1 {
		color: #8acdfd;
		animation: floatBelow 3.5s linear infinite;
		backface-visibility: hidden;

		&:before {
			content: attr(data-heading);
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 50%;
			color: $sky;
			overflow: hidden;
		}
		
		&:after {
			content: attr(data-heading);
			position: absolute;
			left: 50%;
			top: 0;
			transform: translate(-50%, 0);
			width: 100%;
			height: 50%;
			color: #eefaff;
			overflow: hidden;
			text-align: center;
			animation: float 3.5s linear infinite;
			backface-visibility: hidden;
		}
	}
}

@keyframes float {
	0% {
		height: 50%;
	}
	50% {
		height: calc(50% - 3px);
	}
	100% {
		height: 50%;
	}
}

$offset: calc(-50% - 9px);

@keyframes floatBelow {
	0%, 100% {
		transform: translate(-50%, -50%) rotate(0);
	}
	25% {
		transform: translate(-50%, calc(-50% - 3px)) rotate(1deg);
	}
	50% {
		transform: translate(-50%, calc(-50% - 9px));
	}
	75% {
		transform: translate(-50%, calc(-50% - 3px)) rotate(-1deg);
	}
}

@keyframes water {
	0%,
	100% {
		height: 50%;
		transform: rotate(0);
	}
	25% {
		transform: rotate(1deg);
	}
	50% {
		height: calc(50% - 10px);
	}
	75% {
		transform: rotate(-1deg);
	}
}


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