JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<div class="dummy"></div>
<div id="portfolio_content">
    <div class="portfolio_container">
        <div class="hidden hideme">
        </div>
        
        <div class="tablet_inner">
        </div>
    </div>
</div>

CSS

.dummy{
    width:10px;
    height:1000px;
    position:relative;
    background:green;
}
#portfolio_content{
	width:100%;
	height:840px;
	position:relative;
	margin:0 auto;
	padding:0;
	background: #000;
}
#portfolio_content .portfolio_container{
	width:800px;
	height:620px;
	position:relative;
	margin:0 auto;
    top:20px;
	background:#fff;
}
#portfolio_content .portfolio_container .hidden{
    width:20px;
    height:20px;
    position:absolute;
    top:200px;
    left:90px;
    margin:0;
    padding:0;
    background:blue;
}
#portfolio_content .portfolio_container .tablet_inner{
	width:300px;
	height:395px;
	position:absolute;
	top:117px;
	left:245px;
	margin:0;
	padding:0;
	background:red;
	overflow:hidden;
}

JavaScript

$(document).ready(function(){
$(".hideme").css({"opacity":"0"});

$(window).scroll(function(){
    
	$(".hideme").each(function(i){
            
		var bottom_of_object = $(this).position().top + $(this).outerHeight() / 2;
		var bottom_of_window = $(window).scrollTop() + $(window).height();
            
		if ( bottom_of_window > bottom_of_object ){
			$(this).removeClass("hideme").animate({"opacity": "1"},1000);
		};
	}); 
 });
 
});