问题描述
我正在网站上制作英雄横幅上的动画。 但是，还有一个Jquery预加载器。 如果我使用以前的代码（请参见下文），则同时在预加载器出现的同时开始发生css动画，因此取决于您的wifi，您可能会看到它的结尾。
// 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.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.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,1-19.67,20.67c-9.92-.44-18-9.32-18-19.25V394.61a.37.37,1,.37-.37h7.83a.38.38,.37.37V428a10.54,10.54,10.5,10.59,10.33,0-3.71-20l-.08,0h-.09a.41.41,1-.41-.41v-8.07a.35.35,.29-.35,18.71,5.19-.34A18.94,18.94,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-.57.57v3.52a2.46,2.46,.28,4.08,4.22,3.8,4.13,3.94-4A4.09,4.09,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-28.24-15.06,34.38,0-3.79.21.37.37,0-.32.36v7.9a.37.37,.43.36,25.21,3.68-.27A25.47,25.47,280.8,414.7a.37.37,.55.09l6-5.07A.36.36,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文档ready /或Javascript windows onload方法在预加载器之后呈现它。动画不再起作用。我在代码中没有看到任何建议或错误？
$(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
解决方法
由于存在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);
});