JSFiddle - React, Tailwind, and code Playground

by Axelvaisper

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>
 
<body>
    <div id="indexWrap">
        <div id="index">
            <h1 id="Test01"><a href="#">Test01</a></h1>
            <h2 id="Test02">Test02</h2>
            <h2 id="Test03"><a href="#">Test03</a></h2>
            <h2 id="Test04"><a href="#">Test04</a></h2>
            <h2 id="Test05"><a href="#">Test05</a></h2>
            <h2 id="Test06"><a href="#">Test06</a></h2>
            <h2 id="Test07"><a href="#">Test07</a></h2>
            <h2 id="Test08"><a href="#">Test08</a></h2>
            <h2 id="Test09"><a href="#">Test09</a></h2>
            <h2 id="Test10"><a href="#">Test10</a></h2>
            <h2 id="Test11"><a href="#">Test11</a></h2>
        </div>
        </div>
        <div id="content">
            <div class="contentBlock">
                <div id="aboutContent"><p>Test</p>
                </div>
            </div>
            <div id="gbaContent" class="contentBlock">
                <h3>Test</h3>
                <p>Test</p>
            </div>
        </div>
<script src="js/main.js"></script>
</body>

CSS

h1, h2 {
    font-weight: 700;
    font-size: 5vw;
    display: inline-block;
    padding-right: 0.5em;
}
a {
    text-decoration: none;
    border-bottom: 0.1em solid #000;
}
#nav {
    position: fixed;
    top:0;
    right:0;
    width:100px;
    height:100px;
    background-color: bisque;
    z-index: 1000;
}
#indexWrap {
    position: fixed;
    width:100%;
    height:100vh;
    display: flex;
    justify-content: center;
    align-content: center;
}
#index {
    line-height: 1.4;
    text-align: center;
    width: 90%;
    margin: auto;
    z-index: 100;
}
#content {
    padding-top: 150vh;
}
.contentBlock {
    height:100vh;
}

JavaScript

var links = ['#Test01', '#Test02', '#Test03', '#Test04', '#Test05', '#Test06', '#Test07',  '#Test08', '#Test09', '#Test10', '#Test11'];
$(window).scroll(function (event) {
    var scrollTop = $(window).scrollTop();
    var height = $(window).height();
    var opacity = ((height - scrollTop) / height);
    var scale = ((height - (scrollTop/10)) / height);
    console.log(opacity);
    if(opacity>=0.05){
        $.each(links, function( i, link ) {
    	 $(link).css({
            'opacity': opacity,
   		 });
    })} else {
    	$(link).css({
            'opacity': 0.05
   	    });
    }
    if(scale>=0.9){
    	 $('#index').css({
            'transform': 'scale('+scale+')'
   		 });
    } else {
    	$('#index').css({
            'transform': 'scale(0.9)'
   	    });
    }
});
$( document ).ready(function() {
    $('#aboutContent').waypoint(function(direction) {
        alert('hit!'); 
    });
});  
$( "#nav" ).click(function() {
    $( "#index" ).animate({
        'transform': 'scale(1)'
      }, 5000, function() {
        // Animation complete.
  });
});