<div class="outer-container">
	<div class="image-container" style="background-image: url('https://images.unsplash.com/photo-1570528812862-9984124e7e22?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
		
		<h2 class="section-title on-dark">
			<span class="paralax-title">
				Live The Adventure
			</span>
		</h2>
	</div>
	
	<h2 class="section-title">
		<span class="paralax-title">
			Live The Adventure
		</span>
	</h2>
</div>

body {
	margin: 0;
	min-height: 3000px;
	font-family: 'Montserrat', sans-serif;
}
.outer-container {
	max-width: 600px;
	margin: auto;
	width: 90%;
	padding: 200px 0px;
	position: relative;
}

.image-container {
	padding-bottom:(1/1) * 100%;
	background: black;
	position: relative;
	overflow: hidden;
	z-index: 2;
	background-size: cover;
	background-position: center;
}

.section-title {
	margin: 0;
	font-size: 64px;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: -30%;
	transform: translateY(-50%);
	z-index: 1;
	white-space: nowrap;
	
	&.on-dark {
		color: white;
	}
	
	span {
		position: relative;
		display: block;
	}
}

let didScroll = false;
let paralaxTitles = document.querySelectorAll('.paralax-title');

const scrollInProgress = () => {
	didScroll = true
}

const raf = () => {
	if(didScroll) {
		paralaxTitles.forEach((element, index) => {
			element.style.transform = "translateX("+ window.scrollY / 10 + "%)"
		})
		didScroll = false;
	}
	requestAnimationFrame(raf);
}


requestAnimationFrame(raf);
window.addEventListener('scroll', scrollInProgress)