Как создать эффект затухания штор в Jquery? - PullRequest
Новая
       11

Как создать эффект затухания штор в Jquery?

0 голосов
/ 12 апреля 2020

Я хочу добавить предварительный загрузчик на свой веб-сайт, и у меня есть этот код: 

<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>

Вместо этого простого эффекта затухания я хочу, чтобы он выглядел как закрытие штор, как в следующем примере: enter image description here

Есть идеи, как добиться этого уникального эффекта затухания, основанного на моем коде?

Спасибо!

1 Ответ

2 голосов
/ 12 апреля 2020

Покройте фон центрированной белой рамкой и дайте ему развернуться до ширины 0. 

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>
...