제이쿼리를 이용한 떠다니는 아이콘이나 배너는 글을 읽으면서 스크롤하다보면 계속 움직이기 때문에 글을 읽는데 방해가 되므로 광고나 소셜네트워크 아이콘 등 블로그 관리자의 필요에 의한 것은 가급적 달지 않으려고 하지만 방문자의 편의를 위한 아이콘이나 배너는 달아볼만 한 것 같습니다. 방문자의 편의를 위한 것이라면 메뉴바나 글의 위치를 이동할 수 있는 아이콘이 있을 수 있습니다. 물론 관리자의 취향에 따라서 글읽는데 방해가 되지 않는다 생각되면 소셜네트워크 아이콘이나 광고 배너를 설치하는데 사용할 수도 있습니다.
이번글에서는 간단한 제이쿼리 플러그인을 이용해서 웹페이지를 스크롤함에 따라서 아이콘이나 배너가 애니메이션 되는 효과를 만드는 방법을 알아봅니다. 제 블로그의 화면 좌측 끝에 배치되어 있는 뷰온버튼은 CSS를 이용해서 페이지에 고정( position:fixed; )된 것이라서 마우스 스크롤함에 따라서 애니메이션되는 효과는 아닙니다. 본문 좌측에 붙어있는 Top, Bottom 아이콘이 제이쿼리를 이용한 애니메이션 효과입니다.
아이콘의 배경 색상을 본문의 배경 색상과 일치시키고 테두리(border)도 본문의 테두리와 같은 색을 주면서 우측 테두리 값만 없애면 마치 본문에 속해있는 듯한 분위기를 낼 수 있습니다. 스크롤하면서 상단으로부터 고정되는 위치도 변경이 가능하고 어떤 이미지나 배너도 CSS를 변경하면 삽입할 수 있습니다.
floating-social-share.zip
위 압축파일을 다운 받아 압축을 풀고 폴더안에 들어가면 CSS파일과 인덱스 파일이 있습니다. 제이쿼리 플러그인은 인덱스파일에 포함되어있고 제이쿼리 라이브러리는 구글을 이용합니다.
인덱스파일을 텍스트 에디터에 열고 <head> 태그부분을 보면 스타일 시트 파일 링크가 있고 구글 제이쿼리 라이브러리가 링크되어있습니다. 3은 배너를 애니메이션시키는 플러그인입니다. 스타일시트에서 필요한 내용은 간단하므로 블로그에 링크로 포함시키지 않고 style.css에서 직접 입력합니다. 그리고 구글 제이쿼리 라이브러리를 이미 설치했으면 2번의 링크도 필요없습니다. 설치되지 않은 경우는 2와 3을 클릭드래그하여 블럭설정하고 Ctrl+C키를 눌러 복사합니다.
스킨을 수정할때는 항상 작업하기전에 스킨을 저장해 두는 것이 좋습니다. 잘못 설치했을때 바로 원상복구를 해야하기 때문입니다. 방법은 블로그화면에서 admin메뉴를 클릭하면 관리센터로 오게 됩니다. 좌측메뉴에서 스킨을 클릭하면 우측화면에 스킨을 선택할 수 있는 화면이 나옵니다. 상단에서 현재 사용중인 스킨 이름 우측에 세모아이콘을 클릭하면 화면이 늘어나고 스킨저장 버튼이 나옵니다. 클릭하고 날짜를 입력해 저장하면 됩니다. 나중에 원상복구하려면 다시 이곳에 와서 보관함탭을 선택하면 저장된 스킨이 나옵니다. 저장한 스킨의 적용버튼을 클릭하면 바로 원상복구됩니다.
제이쿼리 플러그인을 삽입하기위해 관리센터의 HTML.CSS편집을 클릭하면 코드를 수정할 수 있는 화면이 나옵니다. <head>..</head>태그 사이에 복사한 코드를 Ctrl+V키를 눌러 삽입합니다. 3의 숫자는 배너와 웹브라우저 상단간의 간격입니다. 나중에 설치한 후에 화면을 보면서 조정해도 됩니다.
트위터 아이콘 스크립트를 삽입하려면 이곳 을 클릭하면 위의 페이지로 이동합니다. Share a link에 체크, Show count에 체크하고 3에서 언어를 선택한 다음, 4의 코드를 클릭하면 블럭설정됩니다. Ctrl+C키를 눌러 복사합니다. 이것을 그대로 사용할 경우에는 카운터가 가로로 나오기 때문에 5의 data-count="vertical" 을 나중에 삽입해주면 세로로 나오게 됩니다.
인덱스파일을 아래로 내리면 <div id="floating-box">이 있습니다. 2부분은 기존에 있던 것이므로 블럭설정해서 Delete키를 눌러 제거하고 3과 4처럼 <div></div>을 만들어주고 사이에 복사한 코드를 Ctrl+V키를 눌러 붙여넣습니다. 6에서 data-count="vertical" 를 삽입합니다. 1부터 7까지 클릭드래그하여 블럭 설정한 다음, Ctrl+C키를 눌러 복사합니다.
블로그의 html편집창에서 Ctrl+F키를 누르면 검색창이 나옵니다. <div class="article">을 입력하면 두개가 검색됩니다. 2의 아래화살표를 클릭하여 두번째가 나오게 한 다음 4가 있는 것을 확인합니다. 포스트 본문에 삽입하는 것이기 때문이죠. 그러면 5의 </div><!--close titleWrap-->바로 위에 복사해온 코드를 Ctrl+V키를 눌러 삽입합니다. 제 경우는 이동버튼이 두개 있어서 추가되어있습니다.
css.css파일을 텍스트에디터에 열면 위와같은 스타일시트가 나옵니다. 필요한 것은 1부터 2까지입니다. 우선 2의 box라고 되어있는 부분에 floating-를 넣어 위 이미지처럼 고쳐줍니다. 3의 수치를 -86으로 하고 4의 border는 1픽셀인데 자신의 본문의 테두리에 따라서 수치를 맞춥니다. 5의 테두리의 색상도 본문테두리의 색상에 따라 바꿔줍니다. 테두리를 사용하지 않는 경우는 4를 0으로 하면 됩니다. 6에서 0으로 해야 본문의 배경색상과 경계선이 없게 됩니다. 7의 배경색상도 본문의 배경색상과 일치시킵니다. 제경우처럼 본문에 붙여지는 것이 아니라면 3의 수치를 -100으로 해도됩니다. 그러면 본문과 떨어지게 됩니다. 설정이 다 됐으면 1부터 2까지 클릭드래그하여 블럭설정해서 Ctrl+C키를 눌러 복사합니다.
블로그의 html편집화면에서 아래에 보면 style.css창이 있습니다. 2부분을 클릭드래그하여 아래로 내리면 화면이 늘어납니다. 스크롤바를 내려서 블로그 레이아웃부분을 찾아서 적당한 곳에 4처럼 삽입합니다. 제경우는 다른 버튼을 삽입하여 조정하느라고 5부분의 수치가 다릅니다. 이제 저장버튼을 클릭하여 저장하고 블로그화면에서 어떻게 나오는지 확인합니다.
더보기
'부트스트랩.CSS.JS/JQuery' 카테고리 관련글
