티스토리꾸미기 - 애니메이션 팝업 나타내기

이번 포스팅은 좀 어려울 수도 있을거라 생각이 듭니다. 예전부터 요청을 계속 받고 있었는데, 하나둘씩 준비해야 될 부분들이 있다보니 계속 포스팅을 못하고 있었는데 이번에는 더 미뤄둘 수 없어 기필고 포스팅을 꼭 해야 겠다고 마음 먹었네요.

최종목표는 제 모바일티스토리 스킨에서 스크롤에 따른 공감버튼을 눌러주세요 부분을 나타나게 하는게 목표입니다.

우선 이 포스팅을 위해서는 제이쿼리란 아이에 대해서 설명을 좀드려야 할듯합니다. 제가 이용하는 방식이 제이쿼리를 이용해서 애니메이션 효과를 나타내는 부분이 있어서 기본적인 사용 방법에 대해서는 좀 알려드릴것 같아요.

 

 

2017/11/13 - [블로그/꾸미기노하우] - 티스토리 꾸미기 배경이미지 삽입하기

2017/10/31 - [블로그/꾸미기노하우] - 티스토리 서식이 안보일때

2017/10/10 - [블로그/꾸미기노하우] - 티스토리 스킨 상단 버튼 없애기(by fastboot)

2017/09/04 - [블로그/꾸미기노하우] - 티스토리 fastboot 스킨 상단 이미지 변경방법

 

 

티스토리꾸미기 제이쿼리 활용

우선 제이쿼리를 사용하기 위해서는 특정한 파일을 호출을 해야 하는데요. 바로 아래와 같은 코드입니다. 아래 선언문을 통해서 내가 이런걸 사용할꺼다라는 신고를 하게 되는 것인데요. 이것도 버전에 따라서 되는것도 있고 안되는 것도 있기에 무조건 기능들이 동작이 되는것이 아닙니다.

우선 라이브러리 로드에 대해서 알아보겠습니다. 아래코드를 살펴봐 주세요. <script> </script> 부분입니다.

 

 

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>

 

사용법은 정말 간단한데요. 위의 코드를 티스토리 어디든 넣어주시면 기능이 동작하게 됩니다. 이걸 선언부라고 하는데요. 이게 선언이 안되어 있으면 동작을 하지 않습니다.

 

주로 사용하시는 애드센스도 비슷하게 코드를 호출하는걸 보실 수 있을꺼에요. 위의 코드가 제이쿼리 기본이라면, 개별로 로드되는 확장개념코드라 보시면 될것 같네요.

 

 

 

그래서 제이쿼리 플러그인 경우 형태는 위의 선언부와 소스부분으로 나뉘어져 있고, 동작이 안된다고 하면, 경로부터 확인을 해보셔야 합니다. 선언부가 제대로 로드가 되었는지, 소스부분이 빠진곳이 있는지등등..

이제 안보이는 팝업을 만들고, 다시 팝업을 나타나게 해보겠습니다. 아래 코드는 팝업을 나타내는 코드로서 모바일 환경에서 나타날 수 있게 진행해볼께요.

 

<!-- 간단팝업메뉴 -->

<div id="new_pop" style="background-color:#30ABF2; width:100%;line-height:80px;height:80px;position:fixed; top:45%;z-index:9999;text-align:center;font-size:15px;color:white;display:none;"> 

공감버튼 클릭 부탁드릴께요!

</div> 

CSS 스타일을 살펴보시면 display:none 속성으로서 기본적으로 안보이게 만들었고, 제이쿼리를 활용하여 보이게 만들겁니다. 이 기능을 좀더 확장하면 스크롤에 따라서 보이고 안보이게 기능을 정의할 수가 있겠죠.

 

속성에 대해서 간단하게 설명드릴께요.

 

background-color:배경색상

width : 가로크기 

height : 높이

line-height : 박스안의 텍스트영역 높이

position : 위치형식지정

top : 상단에서 위치

z-index : 레이어순서

text-align : 글자정렬

font-size : 글자크기

color :  글색

display : 표기유무

 

속성은 이렇게 구성되어 있습니다.

 

 

기본속성이 안보이기 때문에 제이쿼리가 로드가 되면서 보이게 만들면 오늘 과정은 끝날듯 하네요. 이제 제이쿼리가 로드되는 구현부를 만들어 보겠습니다.

 

<script type="text/javascript">
   function start() {
 
    $('#new_pop').fadeIn(1500).delay(1500).fadeOut(1500);    
    
   }
        
   $('document').ready(start());
</script>
 

 

 

제이쿼리를 동작하지 않으면 보이지 않습니다. 하지만 제대로 로드가 된다면 애니메이션 형태로 나타나게 되겠죠. 우선 티스토리가 로드될때 활용할 수 있게 만들어 보겠습니다. 

 

$('document').ready(start()); 요부분이 문서가 처음시작될때 동작하는 스크립트이며, start() 라는 부분을 호출하게 됩니다. 그리고 new_pop이라는 id를 가지는 엘리먼트를 페이트인 1.5초, 딜레이 1.5초, 페이드아웃1.5초 동작을 하는 소스에요

소스를 삽입하시고 티스토리를 로드하시면 애니메이션 형식으로 팝업이 나타는게 보이실 겁니다. 오늘은 여기까지 안내해드리고 다음 포스팅에서 스크롤에 따른 팝업 제어를 해보도록 하겠습니다.

 

아래는 여기에 쓰인 소스들입니다. 다운 받으셔서 바로 적용해보세요

 

사용소스.txt