Блог

Главная - Вопросы по программированию - Запуск css-анимации после предварительного загрузчика jquery

Запуск css-анимации после предварительного загрузчика jquery

#javascript #jquery #css #css-animations #preloader

#javascript #jquery #css #css-анимации #предварительный загрузчик

Вопрос:

Я работаю над сайтом, где у меня есть анимация в баннере героя. Однако существует также предварительный загрузчик Jquery. Если я использую свой предыдущий код (см. Ниже), анимация css начнет происходить, пока предварительный загрузчик находится здесь, поэтому, в зависимости от вашего Wi-Fi, вы можете просто увидеть его конец.

     // Preloader
$(window).on('load', function (event) {
    $('.preloader').delay(1200).fadeOut(500);
});  
  html, body {
     font-family: 'Montserrat', sans-serif;
     margin: 0;
     width: 100%;
     height: 100%;
}
 .text-center {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
}
 .animated-text {
     font-size: calc(8px   2vw);
     line-height: 45px;
}
 .animated-text a {
     color: #666;
     text-decoration: none;
     flex-grow: 2;
}
 .animated-text .entering {
     color: #fff;
     opacity: 0;
     font-size: calc(12px   4vw);
     font-weight: 800;
     animation: text2 2.5s 1 ease-out;
     animation-delay: 2.9s;
     -webkit-animation-delay: 2.9s;
     animation-fill-mode: forwards;
     text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
 .animated-text span {
     display: inline-block;
     vertical-align: middle;
     font-size: calc(10px   2.8vw);
     font-weight: 300;
     transform: scale(0);
     text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
 .animated-text span:nth-of-type(1) {
     animation: color 0.5s 1;
     animation-delay: 0.1s;
     -webkit-animation-delay: 0.1s;
     animation-fill-mode: forwards;
}
 .animated-text span:nth-of-type(2) {
     animation: color 0.5s 1;
     animation-delay: 0.3s;
     -webkit-animation-delay: 0.3s;
     animation-fill-mode: forwards;
}
 .animated-text span:nth-of-type(3) {
     animation: color 0.5s 1;
     animation-delay: 0.5s;
     -webkit-animation-delay: 0.5s;
     animation-fill-mode: forwards;
}
 .animated-text span:nth-of-type(4) {
     animation: color 0.5s 1;
     animation-delay: 0.7;
     -webkit-animation-delay: 0.7s;
     animation-fill-mode: forwards;
}
 .animated-text span:nth-of-type(5) {
     animation: color 0.5s 1;
     animation-delay: 0.9s;
     -webkit-animation-delay: 0.9s;
     animation-fill-mode: forwards;
}
 .animated-text span:nth-of-type(6) {
     animation: color 0.5s 1;
     animation-delay: 1.1s;
     -webkit-animation-delay: 1.1s;
     animation-fill-mode: forwards;
}
 .animated-text span:nth-of-type(7) {
     animation: color 0.5s 1;
     animation-delay: 1.2s;
     -webkit-animation-delay: 1.2s;
     animation-fill-mode: forwards;
}
 .animated-text span:nth-of-type(8) {
     animation: color 0.5s 1;
     animation-delay: 1.3s;
     -webkit-animation-delay: 1.3s;
     margin-right: 8px;
     margin-left: 8px;
     animation-fill-mode: forwards;
}
 .animated-text span:nth-of-type(9) {
     animation: color 0.5s 1;
     animation-delay: 1.4s;
     -webkit-animation-delay: 1.4s;
     animation-fill-mode: forwards;
}
 .animated-text span:nth-of-type(10) {
     animation: color 0.5s 1;
     animation-delay: 1.5s;
     -webkit-animation-delay: 1.5s;
     animation-fill-mode: forwards;
}
 .animated-text span:nth-of-type(11) {
     animation: color 0.5s 1;
     animation-delay: 1.7s;
     -webkit-animation-delay: 1.7s;
     animation-fill-mode: forwards;
}
 .animated-text span:nth-of-type(12) {
     animation: color 0.5s 1;
     animation-delay: 1.9s;
     -webkit-animation-delay: 1.9s;
     animation-fill-mode: forwards;
}
 .animated-text span:nth-of-type(13) {
     animation: color 0.5s 1;
     animation-delay: 2.1s;
     -webkit-animation-delay: 2.1s;
     animation-fill-mode: forwards;
}
 .animated-text span:nth-of-type(14) {
     animation: color 0.5s 1;
     animation-delay: 2.3s;
     -webkit-animation-delay: 2.3s;
     animation-fill-mode: forwards;
}
 .animated-text span:nth-of-type(15) {
     animation: color 0.5s 1;
     animation-delay: 2.5s;
     -webkit-animation-delay: 2.5s;
     animation-fill-mode: forwards;
}
 @keyframes color {
     from {
         opacity: 0;
         transform: scale(0);
    }
     to {
         opacity: 1;
         color: #fff;
         transform: scale(1);
    }
}
 @keyframes text2 {
     from {
         opacity: 0;
         color: #fff;
         transform: translateY(-50%);
    }
     to {
         opacity: 1;
         color: #fff;
         transform: translateY(50%);
    }
}
 
 



.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image . This will make the text easier to read */
  background-image: url("img/checkout.jpg");
    background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* Set a specific height */
  height: 100vh;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
     display: flex;
     justify-content: center;
     align-items: center;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- **********************PRELOADER******************************************* -->

<div class="preloader">
    <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.19 52.93">
          <defs>
            <style>.cls-1.pepe{fill:#000000;}.cls-2.mojo{fill:#61bbbd;}</style> 
          </defs>
          <path class="cls-1 pepe" d="M278,426.42a18.9,18.9,0,0,1-19.67,20.67c-9.92-.44-18-9.32-18-19.25V394.61a.37.37,0,0,1,.37-.37h7.83a.38.38,0,0,1,.37.37V428a10.54,10.54,0,0,0,10.5,10.59,10.33,10.33,0,1,0-3.71-20l-.08,0h-.09a.41.41,0,0,1-.41-.41v-8.07a.35.35,0,0,1,.29-.35,18.71,18.71,0,0,1,5.19-.34A18.94,18.94,0,0,1,278,426.42Z" transform="translate(-240.34 -394.19)"/>
          <g class="petit-cercle">
          <path class="cls-2 mojo" d="M259.21,424.12h-3.52a.57.57,0,0,0-.57.57v3.52a2.46,2.46,0,0,0,0,.28,4.08,4.08,0,0,0,4.22,3.8,4.13,4.13,0,0,0,3.94-4A4.09,4.09,0,0,0,259.21,424.12Z" transform="translate(-240.34 -394.19)"/>
          </g>
          <g class="grand-truc">
          <path class="cls-2 mojo" d="M287.47,409.25a34,34,0,0,0-28.24-15.06,34.38,34.38,0,0,0-3.79.21.37.37,0,0,0-.32.36v7.9a.37.37,0,0,0,.43.36,25.21,25.21,0,0,1,3.68-.27A25.47,25.47,0,0,1,280.8,414.7a.37.37,0,0,0,.55.09l6-5.07A.36.36,0,0,0,287.47,409.25Z" transform="translate(-240.34 -394.19)"/>
          </g>
    </svg>
</div>

<!-- ************* image section with animation *************** -->


    <div class="hero-image">
        <div class="animated-text text-center">
          <a href="#">
            <span>B</span>
            <span>e</span>
            <span>c</span>
            <span>o</span>
            <span>m</span>
            <span>e</span>
            <span> </span>
            <span>a</span>
            <span> </span>
            <span>m</span>
            <span>e</span>
            <span>m</span>
            <span>b</span>
            <span>e</span>
            <span>r</span>
          </a>
          <div class="entering">
            <h1>Enter the Bali world</h1>
          </div>
        </div>          
    </div>

И если я попробую готовый документ jQuery / или метод onload Javascript для Windows, чтобы отобразить его после предварительного загрузчика. Анимация больше не работает. Какие-либо предложения или ошибки, которые я не вижу в своем коде?

  $(document).ready(function() {
    $("#spanislas1").addClass("span1");
    $("#spanislas2").addClass("span2"); 
    $("#spanislas3").addClass("span3");
    $("#spanislas4").addClass("span4");
    $("#spanislas5").addClass("span5"); 
    $("#spanislas6").addClass("span6");
    $("#spanislas7").addClass("span7");
    $("#spanislas8").addClass("span8"); 
    $("#spanislas9").addClass("span9");
    $("#spanislas10").addClass("span10");
    $("#spanislas11").addClass("span11"); 
    $("#spanislas12").addClass("span12");
    $("#spanislas13").addClass("span13");
    $("#spanislas14").addClass("span14"); 
    $("#spanislas15").addClass("span15");        
    });  
  .span1 {
     animation: color 0.5s 1;
     animation-delay: 0.1s;
     -webkit-animation-delay: 0.1s;
     animation-fill-mode: forwards;
}
 .span2 {
     animation: color 0.5s 1;
     animation-delay: 0.3s;
     -webkit-animation-delay: 0.3s;
     animation-fill-mode: forwards;
}
 .span3 {
     animation: color 0.5s 1;
     animation-delay: 0.5s;
     -webkit-animation-delay: 0.5s;
     animation-fill-mode: forwards;
}
 .span4 {
     animation: color 0.5s 1;
     animation-delay: 0.7;
     -webkit-animation-delay: 0.7s;
     animation-fill-mode: forwards;
}
 .span5 {
     animation: color 0.5s 1;
     animation-delay: 0.9s;
     -webkit-animation-delay: 0.9s;
     animation-fill-mode: forwards;
}
 .span6 {
     animation: color 0.5s 1;
     animation-delay: 1.1s;
     -webkit-animation-delay: 1.1s;
     animation-fill-mode: forwards;
}
 .span7 {
     animation: color 0.5s 1;
     animation-delay: 1.2s;
     -webkit-animation-delay: 1.2s;
     animation-fill-mode: forwards;
}
 .span8 {
     animation: color 0.5s 1;
     animation-delay: 1.3s;
     -webkit-animation-delay: 1.3s;
     margin-right: 8px;
     margin-left: 8px;
     animation-fill-mode: forwards;
}
 .span9 {
     animation: color 0.5s 1;
     animation-delay: 1.4s;
     -webkit-animation-delay: 1.4s;
     animation-fill-mode: forwards;
}
 .span10 {
     animation: color 0.5s 1;
     animation-delay: 1.5s;
     -webkit-animation-delay: 1.5s;
     animation-fill-mode: forwards;
}
 .span11 {
     animation: color 0.5s 1;
     animation-delay: 1.7s;
     -webkit-animation-delay: 1.7s;
     animation-fill-mode: forwards;
}
 .span12 {
     animation: color 0.5s 1;
     animation-delay: 1.9s;
     -webkit-animation-delay: 1.9s;
     animation-fill-mode: forwards;
}
 .span13 {
     animation: color 0.5s 1;
     animation-delay: 2.1s;
     -webkit-animation-delay: 2.1s;
     animation-fill-mode: forwards;
}
 .span14 {
     animation: color 0.5s 1;
     animation-delay: 2.3s;
     -webkit-animation-delay: 2.3s;
     animation-fill-mode: forwards;
}
 .span15 {
     animation: color 0.5s 1;
     animation-delay: 2.5s;
     -webkit-animation-delay: 2.5s;
     animation-fill-mode: forwards;
}
 @keyframes color {
     from {
         opacity: 0;
         transform: scale(0);
    }
     to {
         opacity: 1;
         color: #fff;
         transform: scale(1);
    }
}
 @keyframes text2 {
     from {
         opacity: 0;
         color: #fff;
         transform: translateY(-50%);
    }
     to {
         opacity: 1;
         color: #fff;
         transform: translateY(50%);
    }
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hero-image">
        <div class="animated-text text-center">
          <a href="#">
            <span id="spanislas1">B</span>
            <span id="spanislas2">e</span>
            <span id="spanislas3">c</span>
            <span id="spanislas4">o</span>
            <span id="spanislas5">m</span>
            <span id="spanislas6">e</span>
            <span id="spanislas7"> </span>
            <span id="spanislas8">a</span>
            <span id="spanislas9"> </span>
            <span id="spanislas10">m</span>
            <span id="spanislas11">e</span>
            <span id="spanislas12">m</span>
            <span id="spanislas13">b</span>
            <span id="spanislas14">e</span>
            <span id="spanislas15">r</span>
          </a>
          <div class="entering">
            <h1>Enter the Bali world</h1>
          </div>
        </div>          
    </div>

Вот код анимации: https://codepen.io/knudsem/pen/pobQELG

Ответ №1:

поскольку существует задержка 1200 мс и затухание 500 мс, вы можете использовать тайм-аут в 1700 мс перед применением классов:

 $(document).ready(function() {
    setTimeout(function(){
      $("#spanislas1").addClass("span1");
      $("#spanislas2").addClass("span2"); 
      $("#spanislas3").addClass("span3");
      $("#spanislas4").addClass("span4");
      $("#spanislas5").addClass("span5"); 
      $("#spanislas6").addClass("span6");
      $("#spanislas7").addClass("span7");
      $("#spanislas8").addClass("span8"); 
      $("#spanislas9").addClass("span9");
      $("#spanislas10").addClass("span10");
      $("#spanislas11").addClass("span11"); 
      $("#spanislas12").addClass("span12");
      $("#spanislas13").addClass("span13");
      $("#spanislas14").addClass("span14"); 
      $("#spanislas15").addClass("span15");        
    },1700);
    });