0
이제 웹 페이지의 프리 로더에서 작업하고 있지만 애니메이션을 멈추는 방법을 피할 수 있습니다. 자바 스크립트는 프리 로더를 멀리두고 페이드 아웃 할 수 있습니다.프리 로더에서 무한 애니메이션 중지
기본적으로 전체 상황을 파악하고 올바르게 작동하지 않습니다.
$(window).load(function() {
$('.cssload-whirlpool').fadeOut();
$('.preloader').delay(350).fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
}).preloader {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: white;
z-index: 99999;
}
.cssload-container {
position: relative;
}
.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgb(204, 204, 204);
border-left-color: rgb(0, 0, 0);
border-radius: 974px;
-o-border-radius: 974px;
-ms-border-radius: 974px;
-webkit-border-radius: 974px;
-moz-border-radius: 974px;
}
.cssload-whirlpool {
margin: -24px 0 0 -24px;
height: 49px;
width: 49px;
animation: cssload-rotate 1150ms linear infinite;
-o-animation: cssload-rotate 1150ms linear infinite;
-ms-animation: cssload-rotate 1150ms linear infinite;
-webkit-animation: cssload-rotate 1150ms linear infinite;
-moz-animation: cssload-rotate 1150ms linear infinite;
}
.cssload-whirlpool::before {
content: "";
margin: -22px 0 0 -22px;
height: 43px;
width: 43px;
animation: cssload-rotate 1150ms linear infinite;
-o-animation: cssload-rotate 1150ms linear infinite;
-ms-animation: cssload-rotate 1150ms linear infinite;
-webkit-animation: cssload-rotate 1150ms linear infinite;
-moz-animation: cssload-rotate 1150ms linear infinite;
}
.cssload-whirlpool::after {
content: "";
margin: -28px 0 0 -28px;
height: 55px;
width: 55px;
animation: cssload-rotate 2300ms linear infinite;
-o-animation: cssload-rotate 2300ms linear infinite;
-ms-animation: cssload-rotate 2300ms linear infinite;
-webkit-animation: cssload-rotate 2300ms linear infinite;
-moz-animation: cssload-rotate 2300ms linear infinite;
}
@keyframes cssload-rotate {
100% {
transform: rotate(360deg);
}
}
@-o-keyframes cssload-rotate {
100% {
-o-transform: rotate(360deg);
}
}
@-ms-keyframes cssload-rotate {
100% {
-ms-transform: rotate(360deg);
}
}
@-webkit-keyframes cssload-rotate {
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes cssload-rotate {
100% {
-moz-transform: rotate(360deg);
}
}<div class="preloader">
<div class="cssload-whirlpool"></div>
</div>
누락 당신은, 애니메이션 또는 뭔가 다른 중지, 제거를 페이드 아웃하려고합니까? –
.preloader는 Z- 인덱스 공백 페이지이므로 비워두면 웹 페이지 내용이 나타납니다. 가짜 사전로드 페이지로 작동해야합니다. – Lukas
jQuery를 스 니펫에 포함하면 나에게 효과가있는 것처럼 보입니다. '$'는 정의되지 않았으므로 오류와 무한한 애니메이션이 표시됩니다. –