※ 랜덤 이미지 효과는 unsplash 사이트 이용.
<style>
.at-loader {
background: #152039;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
position: fixed;
z-index: 100000;
}
.at-loader .loader {
margin: 0;
left: 0%;
top: 0%;
width: 100%;
height: auto;
position: relative;
z-index: 10001;
}
.at-loader .loader img {
display:block;
margin:100px auto 0;
width:auto;
height:70%;
}
.at-loader .loader a {
font-size:30px;
line-height:2;
color:silver;
text-align:center;
text-decoration:none;
}
.at-loader .loader a:active {
color:white;
}
</style>
<div class="at-loader">
<div class="loader">
<a href="https://homzzang.com">
<img src="https://source.unsplash.com/random" alt="">
<p>홈짱닷컴 Homzzang.com</p>
</a>
</div>
</div>
<script>
$(".at-loader .loader").delay(3000).fadeOut();
$(".at-loader").delay(1000).fadeOut("slow");
$(function() {
$('.at-loader').on('click', function () {
$('.at-loader').fadeOut();
});
});
</script>
결과보기
마르스컴퍼니 님 (210911) https://sir.kr/qa/430399+ 홈짱 커스텀
PS. 페이크로더 (FakeLoader.js) 효과
1.
로딩 전 잠깐 이미지/아이콘 노출 후, 본 페이지로 전환하는 효과
https://github.com/joaopereirawd/fakeLoader.js/
2.
나리야 빌더 로딩이미지 효과 코드 있음.
(나리야: /theme/NB-Basic/_loader.php)
