Landing Page loading issue

Hello!

I’ve created a sort of a false landing page or splash page for my site. So the homepage loads a full screen image on top of the rest of the page and when the user scrolls down a little bit, the image fades away revealing the normal home page.

I’m satisfied with how it looks, but it loads a little funky. You can always see a flash of the normal homepage before the splash image loads on top of it. And it even seems to load first without CSS, and then it all comes clunkily together after a second.

I added the splash image by hooking into the __before_body hook and echoing out my html

<?php add_action( '__before_body', 'pec_fullscreen_splash', 1 );
function pec_fullscreen_splash(){
	if(is_page( 'home' )){
	echo '<div class="pec-fullscreen-splash">
		<div class="pec-splash-container">
			<img class="pec-splash-logo"src="https://georgedumontier.com/PEC/wp-content/uploads/2016/07/Precision-Eye-Care_logo.svg"/>
			<div class="pec-splash-nav">
				<ul class="pec-splash-ul">
					<li><a href=""</a></li>
					<li><a href="" </a></li>
					<li><a href="" </a></li>
					<li><a href=""></a></li>
				</ul>
			</div>
		</div>
	</div>';
	}
}?>

The div with class ‘pec-fullscreen-splash’ has this css

.pec-fullscreen-splash{
 width:100vw;
 height:110vh;
 background-color:#430000;
 position:absolute;
 z-index:99999;
 background: url(blablabla.jpg) no-repeat center top fixed;
 background-size:cover;
}

And then I hooked into the wp_head hook to add a little jQuery

<?php add_action( 'wp_head', 'pec_jquery');
function pec_jquery(){
	if(is_page('home')){
		?>
        <script type="text/javascript">
        	var $ = jQuery.noConflict();
        	var $document = $(document);
            $(document).ready(function(){
		$('.pec-splash-fade').on('click',function(){
            		$('.pec-fullscreen-splash').fadeOut(1000);
            	});
            	$(window).scroll(function(){
            	if ($(document).scrollTop() >= 10){
            		$('.pec-fullscreen-splash').fadeOut(1000);
            	};
            });
            });
        </script>
        <?php
	}
}?>

I’m still new to WordPress so I’m not sure if this is the best the way to go about it. Any help is greatly appreciated. Thanks for reading my long post!

Here’s a link https://georgedumontier.com/PEC/