JSFiddle - React, Tailwind, and code Playground

by Clare12345

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>
    <!-- Include ScrollMagic and GSAP plugin -->
  
  
<div class="spacer s0"></div>
<div id="parallax1" class="parallaxParent">
	<div class="parallax_sm_background"style="background-image: url(http://upmediamarketing.com/wp-content/uploads/2015/08/vector_desk_dark_upmedia_web.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(http://upmediamarketing.com/wp-content/uploads/2015/08/41384013_dark_parallax_background_upmedia_web.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(http://janpaepke.github.io/ScrollMagic/img/example_parallax_bg3.png);"></div>
</div>
-->
<div class="spacer s2"></div>

CSS

.parallaxParent {
		height: 50vh;
		overflow: hidden;
	}
	.parallaxParent > * {
		height: 200%;
		position: relative;
		top: -50%;
	}
.spacer {
 height: 100px;    
}
.s1 {
 height: 400px;    
}
.parallax_sm_background {
    background-size: cover; 
    background-size: 100%; 
    background-repeat: no-repeat; 
}

JavaScript

jQuery(document).ready(function($){

	// 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);

});