친절한효자손 취미생활

티스토리에 이런 저런 연구를 진행하는 중입니다. 현재 친효스킨에는 본문 로딩 중에 제 트라이드 마크인 효자곰이 보이며 그 주변으로 무언가가 뱅글뱅글 돌아가는것을 확인할 수 있습니다. 본문의 모든 데이터를 로드하는동안 이런 애니메이션이 연출되는건데 이건 어떻게 적용시키는건지 알아보도록 합시다.

 

HTML + Script 세팅하기

먼저 기본 뼈대가 되는 HTML과 애니메이션을 위한 스크립트를 티스토리 스킨 정보에 입력해 봅시다. HTML에 붙여넣기를 진행해야 합니다. 아래의 첨부파일을 다운받고 열어주시기 바랍니다.

 

티스토리 스킨로딩.txt
0.00MB

열어보시면 점선을 기준으로 위에는 HTML과 스크립트 코트가, 아래에는 CSS 코드가 첨부되어 있습니다.

 

<script>
    $(window).on('load', function() {
        $("#loading").hide();
    });

</script>

<div id="loading">
    <img src="./images/loading.svg" alt="loading">
</div>

먼저 이 부분입니다. 해당 코드를 모두 복사합니다. 그리고 자신의 스킨 HTML 정보로 들어갑니다. 그리고 <body>의 바로 아래에 붙여넣기 합니다. 여기까지하면 50%는 끝이났습니다.

 

CSS 세팅하기

이제 스타일을 만들어야 합니다. 첨부파일의 점선 기준 아래에 있는 코드를 몽땅 복사합니다.

 

/* 스킨 로딩 */
#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99;
}

#loading > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: 100;
}

바로 이 부분입니다. 몽땅 복사한다음 자신의 스킨 CSS에 빈 공간을 확보하고 붙여넣기를 해줍니다. CSS는 정해진 위치가 없으니 빈줄을 만들어 붙여넣기 해주시면 됩니다. 주의하실점은 기존 CSS 코드 내부에 붙여넣기를 하는게 아니라 빈공간을 만들고 그곳에 붙여넣기를 해주는 겁니다.

 

SVG 파일 생성하기

이제 모든 세팅은 끝이났습니다. 마지막으로 할 일은 로딩 애니메이션 파일을 생성하는 것입니다. 스킨 로딩 때 보여지는 파일을 의미합니다. 친효스킨의 경우는 바람개비가 그것입니다. 즉 바람개비와 같은 움직이는 애니메이션 파일이 필요합니다. 확장자는 SVG입니다.

 

 

loading.io - Your SVG + GIF + PNG Ajax Loading Icons and Animation Generator

Build Your Ajax Loading Icons, Animated Text and More with SVG / CSS / GIF / PNG !

loading.io

이곳에 방문하시면 매우 간단하게 로딩 이미지를 생성할 수 있습니다. 오른쪽 상단의 Sign in 메뉴를 눌러서 회원 가입부터 진행하시기 바랍니다. 다운로드시 로그인 상태여야 가능하기 때문입니다. 회원 가입은 매우 간단합니다. 인증 절차도 없어요.

 

먼저 1번 영역의 무료 아이콘 중 마음에 드는 애니메이션을 선택합니다. 그러면 2번의 영역에 고른 아이콘이 적용되는데 하나 하나 직접 수정을 해보면서 어디가 어떻게 변하는지 미리보기로 확인해가면서 편집을 진행합니다. 다 완료되었다면 3번의 SVG 메뉴를 눌러줍니다.

 

그러면 STATIC과 ANIMATED 항목이 나오는데 당연히 움직여야 하므로 Animated를 선택합니다.

 

로그인이 되어있는 상태라면 Free Download 버튼이 보일겁니다. 눌러서 파일을 다운로드 받습니다.

 

한번 더 다운로드창이 뜨는데 Download 버튼을 눌러서 최종 마무리를 진행합니다.

 

다운로드가 완료되었습니다. 이제 파일명을 loading 이라고 변경해줍니다. 근데 왜 많고 많은 이름 중 하필 loading 이냐구요? 다른 이름으로 지정하고 싶으시다면 HTML의 이 부분도 같이 변경해줘야 합니다.

 

<div id="loading">
    <img src="./images/loading.svg" alt="loading">
</div>

이 코드 내용을 보시면 img 태그 대상이 바로 loading.svg로 설정되어 있기 때문입니다. 즉 원하는 이름으로 변경하시려면 svg의 파일명과 이 태그의 파일명을 서로 일치시켜야 한다는 이야기입니다. 이해되시죠?

 

SVG 파일 업로드하기

이제 파일 업로드로 가서 추가 버튼을 누르고 다운받은 svg 파일을 올려주기만 하면 끝입니다. 생각보다 과정이 어렵지 않습니다. 그러면 멋지게 적용시켜 보시기 바랍니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 친효님 안녕하세요. 지금 이 포스팅 내용대로 반영을 했습니다.
    그런데 저의 블로그를 로딩을 하면 저 loading.svg 파일이 사라져야 하는데 무한루프중입니다.
    뭐가 잘못된것일까요?
    지금은 주석처리 해놓았습니다.
    2021.03.06 01:47 신고
    • 비밀글 삭제한다고 공지 했습니다.
      2021.03.06 03:06 신고
    • 아 죄송합니다 공개로 바꿔놓겠습니다
      2021.03.06 03:07 신고
    • 친효스킨 2.2에 로딩 적용되어 있지않나요?
      2021.03.06 03:14 신고
    • 네~ 스킨은 v2.2 적용되어 있습니다.
      지금 저의 블로그에 오시면 이미자에 x(엑박)이 뜨는데... 주석을 풀어버리면 새로 올린 svg 파일이 1,2초? 페이지 로딩후에 사라져야 하는데 무한루프에 빠지고 있습니다. ^^:;
      지금 저의 블로그에 와서 보시면 주석 풀어 놓았습니다.
      2021.03.06 03:16 신고
    • 아뇨 그게아니고 2.2에 로딩이 이미 적용되어있지 않은지 여쭤본것입니다.
      2021.03.06 03:19 신고
    • 아아~...
      기본에 바람개비는 적용이 되어 있었습니다.
      html 소스를 중복으로 복사를 해서 그런것일까요?
      2021.03.06 03:22 신고
    • 그럼 로딩이미지만 바꾸시면 됩니다. 아니면 2.3으로 환승하시면 될 것 같군요.
      2021.03.06 03:23 신고
    • 아항... 기존 소스가 있었고 그곳에서 svg 파일 이름을 변경하니 되었습니다.
      저는 스킨 버전v2.2에서 새로이 하는것인줄 이해했어요 ^^;;;
      이제 페이지가 로딩이 되고 없어집니다.
      감사합니다.
      2021.03.06 03:24 신고
  2. 안녕하세요. 위내용처럼했는데 무한로딩이에요 이미지가 사라질않네요.
    2021.03.08 22:38 신고
    • 안녕하세요. 어떻게 진행하셨는지를 모르니까 뭐라 드릴 말씀이 없군요.
      2021.03.08 23:56 신고