CSS only parallax

Example of

by Stas Orekhovskiy

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.js"></script>
<style type="text/css">
	.parallaxParent {
		height: 100vh;
		overflow: hidden;
	}
	.parallaxParent > * {
		height: 200%;
		position: relative;
		top: -100%;
	}
</style>
<div class="spacer s0"></div>
<div id="parallax1" class="parallaxParent">
	<div style="background-image: url(https://images.wallpaperscraft.com/image/background_close-up_fence_86066_1280x720.jpg);"></div>
</div>
<div class="spacer s1">
	<div class="box2 blue">
		<p>Content 1</p>
		<a href="#" class="viewsource">view source</a>
	</div>
</div>
<div class="spacer s0"></div>
<div id="parallax2" class="parallaxParent">
	<div style="background-image: url(https://images.wallpaperscraft.com/image/background_abstract_texture_129924_1280x720.jpg);"></div>
</div>
<div class="spacer s1">
	<div class="box2 blue">
		<p>Content 2</p>
		<a href="#" class="viewsource">view source</a>
	</div>
</div>
<div class="spacer s0"></div>
<div id="parallax3" class="parallaxParent">
	<div style="background-image: url(../../assets/img/example_parallax_bg3.png);"></div>
</div>
<div class="spacer s2"></div>
<script>
	// init controller
	var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});

	// build scenes
	new ScrollMagic.Scene({triggerElement: "#parallax1"})
					.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
					.addIndicators()
					.addTo(controller);

	new ScrollMagic.Scene({triggerElement: "#parallax2"})
					.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
					.addIndicators()
					.addTo(controller);

	new ScrollMagic.Scene({triggerElement: "#parallax3"})
					.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
					.addIndicators()
					.addTo(controller);
</script>