How can I create a curtains fade-out effect in Jquery?

Question

I want to add a preloader to my website and I have this code:

<div class="loader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.loader').fadeOut('slow');
}); });
</script>
<style>
.elementor-element-edit-mode .loader{
display: none;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png') 50% 50% no-repeat #fff;
}
</style>

Instead of this simple fadeout effect, I want it to look like curtains closing, just like the following example:

Any idea how to achieve this unique fadeout effect based on the code I have?

Thank you!

Answer 1

Cover the background with a centered white box and let it collapse to 0 width.

 setTimeout(() => { $("#loader.logo").animate({ opacity: 0 }, 1000); $("#loader.cover").animate({ width: "0%" }, 1000, () => { $("#loader").hide(); // When animation is complete hide the element. }); }, 1500);

 #bg { background: url('http://placekitten.com/630/195'); width: 630px; height: 195px; position: absolute; } #loader { position: fixed; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } #loader.logo { background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png'); background-repeat: no-repeat; background-size: contain; position: absolute; width: 150px; height: 150px; } #loader.cover { background: #fff; width: 100%; height: 100%; position: absolute; } body { margin: 0 }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="bg"></div> <div id="loader"> <div class="cover"></div> <div class="logo"></div> </div>