JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/Prinzhorn/skrollr/master/src/skrollr.js"></script>
<div
		class="parallax-image-wrapper parallax-image-wrapper-100"
		data-anchor-target="#dragons + .gap"
		data-bottom-top="transform:translate3d(0px, 200%, 0px)"
		data-top-bottom="transform:translate3d(0px, 0%, 0px)">

		<div
			class="parallax-image parallax-image-100"
			style="background-image:url(http://bmws010.ugear.tw/ImgAdmin/Diary/f1m.jpg)"
			data-anchor-target="#dragons + .gap"
			data-bottom-top="transform: translate3d(0px, -80%, 0px);"
			data-top-bottom="transform: translate3d(0px, 80%, 0px);"
		></div>
		<!--the +/-80% translation can be adjusted to control the speed difference of the image-->
	</div>

	<div
		class="parallax-image-wrapper"
		data-anchor-target="#bacons + .gap"
		data-bottom-top="transform:translate3d(0px, 200%, 0px)"
		data-top-bottom="transform:translate3d(0px, 0%, 0px)"
style="height:1500px;top:-1500px;">

		<div
			class="parallax-image"
			style="background-image:url(http://bmws010.ugear.tw/ImgAdmin/Diary/f1m.jpg);height:1500px;top:0;"
			data-anchor-target="#bacons + .gap"
			data-bottom-top="transform: translate3d(0px, -80%, 0px);"
			data-top-bottom="transform: translate3d(0px, 80%, 0px);"
		></div>
	</div>

	<div
		class="parallax-image-wrapper parallax-image-wrapper-50"
		data-anchor-target="#kittens + .gap"
		data-bottom-top="transform:translate3d(0px, 300%, 0px)"
		data-top-bottom="transform:translate3d(0px, 0%, 0px)">

		<div
			class="parallax-image parallax-image-50"
			style="background-image:url(http://bmws010.ugear.tw/ImgAdmin/Diary/f1m.jpg)"
			data-anchor-target="#kittens + .gap"
			data-bottom-top="transform: translate3d(0px, -60%, 0px);"
			data-top-bottom="transform: translate3d(0px, 60%, 0px);"
		></div>
	</div>

	<div id="skrollr-body">
		<div class="header" id="dragons">
			Skrollr demo of classic parallax sections. Degrades without JavaScript (could be disabled on mobile without breaking everything).
		</div>
		<div...

CSS

* {
		padding:0;
		margin:0;
	}
	html, body {
		height:100%;
	}
	.skrollr-desktop body {
		height:100% !important;
	}
	body {
		font-family:sans-serif;
	}
	p {
		margin:1em 0;
	}
	.parallax-image-wrapper {
		position:fixed;
		left:0;
		width:100%;
		overflow:hidden;
	}
	.parallax-image-wrapper-50 {
		height:50%;
		top:-50%;
	}
	.parallax-image-wrapper-100 {
		height:100%;
		top:-100%;
	}
	.parallax-image {
		display:none;
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
	}
	.parallax-image-50 {
		height:200%;
		top:-50%;
	}
	.parallax-image-100 {
		height:100%;
		top:0;
	}
	.parallax-image.skrollable-between {
		display:block;
	}
	.no-skrollr .parallax-image-wrapper {
		display:none !important;
	}
	#skrollr-body {
		height:100%;
		overflow:visible;
		position:relative;
	}
	.gap {
		background:transparent center no-repeat;
		background-size:cover;
	}
	.skrollr .gap {
		background:transparent !important;
	}
	.gap-50 {
		height:50%;
	}
	.gap-100 {
		height:100%;
	}
	.header, .content {
		background:#fff;
		padding:1em;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
	.content-full {
		height:100%;
	}
	#done {
		height:100%;
	}

JavaScript

skrollr.init({
		smoothScrolling: false,
		mobileDeceleration: 0.004
	});