JSFiddle - React, Tailwind, and code Playground

by jupiterjackrabbit

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://jsfiddle.net/jupiterjackrabbit/5hL71yug/46/js/vendor/jquery-1.11.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://jsfiddle.net/jupiterjackrabbit/5hL71yug/46/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<link rel="stylesheet" href="https://jsfiddle.net/jupiterjackrabbit/5hL71yug/46/css/normalize.min.css">
<script src="http://scrollmagic.io/img/demo_tophat.png"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="https://vimeo.com/260687726"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/TextPlugin.min.js"></script>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet"> 

        <link rel="stylesheet" href="/script.css">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
			
 </head>
<body>
<header>
					<div id="masthead">
					
 <div id="intro"><div><img id="logopic" src="https://www.northbranch-md.com/wp-content/uploads/2018/04/small-logo-pic-1.png"></div>
    <div> <img id="nbname-img" src="https://www.northbranch-md.com/wp-content/uploads/2018/04/logo-name.png"/> </div>
				 					<div id="button-wrapper">
					<button type=submit id="enjoy-css2" class="enjoy-css">VISIT OUR<br> ONLINE PHARMACY</button>
          <button type=submit id="enjoy-css3" class="enjoy-css">MAKE AN <br>...

CSS

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ===== ScrollMagic Class ==============================================
   Author: Petr Tichy - ihatetomatoes.net
   ========================================================================== */


body {
    font: 16px/1.5 Cinzel, serif;
}

.wrapper {
    width: 90%;
    margin: 0 5%;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* =Main */
#masthead {
	position: sticky;
  background-color: #cadf82;
	opacity: 1;

	height: 30vh;
	width: 100vw;
	z-index: 100005;
}

#intro {
  position: relative;
    height: 100vh;
		width: 100vw;   
    /*background: radial-gradient(circle, #74A6EE 0%, #485CB2 100%);*/
		z-index: 100006;
}
#logopic {
	position: absolute;
	display: flex;
  top: 0%;
	left: 45%;
  width: 12%;
  height: 12%;
	 z-index: 10006;
}
#nbname-img {
	position: absolute;
	display: flex;
  top: 12%;
  margin-left: 20%;
  margin-right: 20%;
  width: 60%;
  height: 13%;
	 z-index: 10006;
}
#mainmeow {
	position: absolute;
	height: 680vh;
	width: 100vw;
}
#logologo {
	position: relative;
	height: 100vh;
	top: 10%;
}
#logotrigger {
  position: relative;
  top: 0;
}

.fullscreenbg {
position: fixed;
top: 10%;
right: 0;
bottom: 0;
left:...

JavaScript

jQuery(document).ready(function($) {
	// Init ScrollMagic
	var controller = new ScrollMagic.Controller();
  	// pin the intro
	/*var pinIntroScene = new ScrollMagic.Scene({
		triggerElement: "#intro",
		triggerHook: 0, 
    duration: 800
	})
	.setPin('#intro', {pushFollowers: false})
	.addTo(controller);*/
	  var pinMastHead = new ScrollMagic.Scene ({
		  triggerElement: "#masthead",
		  triggerHook: 0
		})
		.setPin('#masthead', {pushFollowers: false})
		.addTo(controller);
		var pinIntroScene3 = new ScrollMagic.Scene({
		triggerElement: "#masthead",
		triggerHook: 0
	})
	.setPin('#button-wrapper', {pushFollowers: false})
	.addTo(controller);

	// pin again
	var pinIntroScene2 = new ScrollMagic.Scene({
		triggerElement: "#masthead",
		triggerHook: 0
	})
	    .setPin("#enjoy-css2", {pushFollowers: false})
	    .addTo(controller);

	var pinIntroScene4 = new ScrollMagic.Scene({
		triggerElement: "#masthead",
		triggerHook: 0
	})
	    .setPin("#enjoy-css3", {pushFollowers: false})
	    .addTo(controller);

// parallax scene

	var parallaxTl = new TimelineMax();
	parallaxTl
		.from('.content-wrapper', 0, {autoAlpha: 0, ease: Power0.easeNone}, 0.5)
		.from('.bcg', 1, {y: '-50%', ease:Power0.easeNone}, 0.5);

	var slideParallaxScene = new ScrollMagic.Scene({
		triggerElement: '.bcg-parallax',
		triggerHook: 1,
	  duration: "130%"
	})
	.setTween(parallaxTl)
	.addTo(controller);
	
	//parallaxtl2
		var parallaxTl2 = new TimelineMax();
	parallaxTl
		.from('.content-wrapper2', 0.4, {autoAlpha: 0, ease: Power0.easeNone}, 0.4)
		.from('.bcg2', 2, {y: '-75%', ease:Power0.easeNone}, 0);

	var slideParallaxScene2 = new ScrollMagic.Scene({
		triggerElement: '.bcg-parallax2',
		triggerHook: 1,
		duration: '100%'
	})
	.setTween(parallaxTl2)
	.addTo(controller);
	
	//parallax3
		var parallaxTl3 = new TimelineMax();
	parallaxTl
		.from('#parallax2', 0.4, {autoAlpha: 0, ease: Power0.easeNone}, 0.4)
		.from('.bcg3', 2, {y: '-150%', ease:Power0.easeNone}, 0);

	var slideParallaxScene3 =...