在 jquery 预加载器之后运行 css 动画

Question

I'm working on website where i have an animation in the hero banner. However, there is also a Jquery preloader. If I use my previous code (see below) the css animation start happening meanwhile the preloader is here, so depending of your wifi you might just see the end of it.

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

And If i try the jQuery document ready / or the Javascript windows onload method to render it after the preloader. The animation isn't working anymore. Any suggestion or mistakes that i'm not seeing in my code ?

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

Here is a codepen of the animation : https://codepen.io/knudsem/pen/pobQELG

Answer 1

as there is a delay of 1200ms and a fadeout of 500ms you might use a timeout of 1700ms before you apply the classes:

$(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);
    });