.main-content
	.concept.concept-one
		- for (var i=1; i<10; i++)
			.hover(class="hover-"+i)
		h1 Desert
	.concept.concept-two
		each val, index in ['F','O','R','E','S','T']
			.hover
				h1= val
	.concept.concept-three
		.word
			each val, index in ['C','A','N','Y','O','N']
				.hover
					div
					div
					h1= val
	.concept.concept-four
		h1 Glacier
	.concept.concept-five
		h1.word
			each val, index in ['M','O','U','N','T','A','I','N','S']
				span.char= val
	.concept.concept-six
		h1.word
			each val, index in ['O','C','E','A','N']
				span.char= val
	.concept.concept-seven
		h1 fries
	.concept.concept-eight
		h1.word
			each val, index in ['F','A','L','L','S']
				div.char(data-content=val)= val

footer
	a(href="https://twitter.com/meowlivia_" target="_blank")
		i.icon-social-twitter.icons
	a(href="https://github.com/oliviale" target="_blank")
		i.icon-social-github.icons
	a(href="https://dribbble.com/oliviale" target="_blank")
		i.icon-social-dribbble.icons
View Compiled
body {
	background: #fff;
	font-family: "Comfortaa", sans-serif;
	position: relative;
}

footer {
	text-align: center;
	padding: 1em;
	max-width: 80px;
	position: fixed;
	top: 0;
	right: 25px;
	a {
		text-decoration: none;
		display: inline-block;
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: transparent;
		border: 1px dashed #fff;
		color: #fff;
		margin: 5px;
		&:hover {
			background: rgba(255, 255, 255, 0.1);
		}
		.icons {
			margin-top: 12px;
			display: inline-block;
			font-size: 20px;
		}
	}
}

* {
	box-sizing: border-box;
}

.main-content {
	text-align: center;
	text-transform: uppercase;
	scroll-snap-type: y mandatory;
	position: relative;
	height: 100vh;
	overflow-y: scroll;
}

.hover,
.word,
h1 {
	cursor: pointer;
}

h1 {
	position: relative;
	color: #fff;
	font: 900 60px Montserrat;
	text-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.concept {
	position: relative;
	padding: 5em;
	height: 100vh;
	overflow: hidden;
	scroll-snap-align: center;
	&:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: radial-gradient(rgba(0, 0, 0, 0.3), transparent);
		opacity: 0;
		transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
	}
	&:hover:before {
		opacity: 0.5;
	}
}

.concept-one {
	display: grid;
	grid: repeat(3, 1fr)/ repeat(3, 1fr);
	background: yellow;
	padding: 8em;
	background: url("https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/desert.jpg")
		no-repeat center center / cover;
	h1 {
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: 50%;
		margin-top: -30px;
		transition: 0.5s ease;
		z-index: 0;
		letter-spacing: 25px;
	}
	.hover {
		z-index: 1;
	}
	.hover-1:hover ~ h1 {
		left: 30px;
		margin-top: -10px;
	}
	.hover-2:hover ~ h1 {
		margin-top: -10px;
	}
	.hover-3:hover ~ h1 {
		right: 30px;
		margin-top: -10px;
	}
	.hover-4:hover ~ h1 {
		left: 30px;
	}
	.hover-6:hover ~ h1 {
		right: 30px;
	}
	.hover-7:hover ~ h1 {
		left: 30px;
		margin-top: -50px;
	}
	.hover-8:hover ~ h1 {
		margin-top: -50px;
	}
	.hover-9:hover ~ h1 {
		right: 30px;
		margin-top: -50px;
	}
}

.concept-two {
	display: grid;
	grid: 100% / repeat(6, 1fr);
	padding: 5em 15em;
	background: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/forest.jpg)
		center center / cover;
	.hover {
		position: relative;
		display: grid;
		place-items: center;
	}
	h1 {
		color: transparent;
		text-align: 0 1px 1px;
		-webkit-text-stroke: 2px #fff;
		text-shadow: none;
		transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}
	.hover:hover h1 {
		transform: scale(1.5);
		color: #fff;
		-webkit-text-stroke: 2px transparent;
		text-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	}
}

.concept-three {
	padding: 5em;
	.word {
		display: flex;
		align-items: center;
		max-width: 500px;
		margin: auto;
	}
	background: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/canyon.jpg)
		center center / cover;
	.hover {
		flex: 1;
		display: grid;
		height: calc(100vh - 10em);
		grid: repeat(2, 2fr) / 100%;
		position: relative;
		div {
			position: relative;
			z-index: 5;
		}
		div:nth-child(1):hover ~ h1 {
			margin-top: -10px;
		}
		div:nth-child(2):hover ~ h1 {
			margin-top: -50px;
		}
	}
	h1 {
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: 50%;
		margin-top: -30px;
		transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
		z-index: 0;
	}
}

.concept-four {
	height: 100vh;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 2em;
	background: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/glacier.jpg)
		no-repeat center center / cover;
	h1 {
		display: inline-block;
	}
	&:hover h1 {
		letter-spacing: 25px;
		transform: scale(1.3);
		transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}
}

.concept-five {
	background: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/mountains.jpg)
		center center / cover;
	display: flex;
	align-items: center;
	.word {
		width: 600px;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80%;
		&:hover {
			.char:nth-child(even) {
				top: 20px;
			}
			.char:nth-child(odd) {
				top: -20px;
			}
		}
	}
	.char {
		flex: 1;
		position: relative;
		display: inline-block;
		top: 0;
		transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
	}
}

.concept-six {
	display: flex;
	align-items: center;
	background: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/beach.jpg) top
		right / cover;
	.word {
		width: 550px;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80%;
		&:hover {
			.char:nth-child(1) {
				margin-top: -30px;
				transform: rotate(-20deg);
			}
			.char:nth-child(2) {
				margin: -40px 0px 0 10px;
				transform: rotate(5deg);
			}
			.char:nth-child(3) {
				margin: 15px 0 0 10px;
				transform: rotate(12deg);
			}
			.char:nth-child(4) {
				margin: -25px 0 0;
				transform: rotate(5deg);
			}
			.char:nth-child(5) {
				margin: -40px 5px 0;
				transform: rotate(-10deg);
			}
		}
	}
	.char {
		flex: 1;
		transition: 0.3s ease-in-out;
		position: relative;
	}
}

.concept-seven {
	background: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/fries.jpg)
		top center / cover;
	display: flex;
	justify-content: center;
	align-items: center;
	h1 {
		letter-spacing: 35px;
		position: relative;
		&:before {
			content: "fries";
			position: absolute;
			margin: auto;
			left: 0;
			right: 0;
			max-width: 400px;
			color: transparent;
			letter-spacing: 10px;
			text-shadow: none;
		}
	}
	&:hover h1:before {
		transition: 0.6s ease;
		color: rgba(255, 255, 255, 0.8);
		animation: jump-out 0.6s ease forwards;
	}
}

@keyframes jump-out {
	0% {
		opacity: 0;
		transform: scale(1);
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(2);
	}
}

.concept-eight {
	background: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/falls.jpg)
		center center / cover;
	display: flex;
	align-items: center;
	justify-content: center;
	.word {
		display: flex;
		align-items: center;
		justify-items: center;
		width: 450px;
		height: 80%;
		&:hover .char:before {
			transition: 0.6s ease;
			color: rgba(255, 255, 255, 0.8);
			animation: falls 1s ease forwards;
		}
		&:hover .char:nth-child(1):before {
			animation: falls 0.9s ease 0.2s forwards;
		}
		&:hover .char:nth-child(2n + 3):before {
			animation: falls 1s ease 0.3s forwards;
		}
	}
	.char {
		flex: 1;
		position: relative;
		&:before {
			content: attr(data-content);
			position: absolute;
			top: 0;
			color: transparent;
			text-shadow: none;
		}
	}
}

@keyframes falls {
	0% {
		opacity: 0;
		top: 0;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		top: 100px;
	}
}
View Compiled
//    ʕ ᵔᴥᵔ ʔ  <-- a koala

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js