[ETC] JQ - fakeLoader(페이크로더) 효과 + 이미지 랜덤 인트로 페이지

※ 랜덤 이미지 효과는 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)