JSFiddle - React, Tailwind, and code Playground

by bornasepic

HTML

<div class="mainframe">
    <div class="profile_info">
        <div class="titles">
            <h3>User</h3>
            <h1><?php echo stripslashes($uid); ?></h1>
        </div>
        <div class="bio">
            <img id="line_one" src="Social_Icons/Line [email protected]">
            <p><?php echo stripslashes($bio); ?></p>
            <img id="line_two" src="Social_Icons/Line [email protected]">
        </div>
    </div>
    <div class="headshot">
        <img src="<?php echo $profile_pic; ?>">
    </div>
</div>

CSS

.mainframe {
    position: fixed;
    height: 200vh;
    width: 200vw;
    margin-top: 0;
    margin-bottom: 0;
    overflow: scroll;
}

.headshot {
    position: relative;
    float: right;
    width: 50%;
    height: 100%;
    background-color: white;
    z-index: 99;
}

.slide-in {
    right: 50%;
}

.slide-up {
    top: -100%;
}

JavaScript

$('.mainframe').scroll(function() {    
    var scroll = $(window).scrollTop();
		i = 1;
    if (scroll >= 50) {
        console.log("firing original");
        setTimeout(function() {
            $(".headshot").addClass("slide-in");
        }, i*100);
        setTimeout(function() {
            $(".mainframe").addClass("slide-up");
        }, i*200);
    } else {
        console.log("firing reverse");
        setTimeout(function() {
            $(".mainframe").removeClass("slide-up");
        }, i*100);
        setTimeout(function() {
            $(".headshot").removeClass("slide-in");
        }, i*200);
    }
});