작성일자
카테고리 Javascript/JQuery

제이쿼리 플러그인을 이용한 모자이크 애니메이션 배너입니다. 우측에 어도비 터치앱 배너을 만들어서 사이드바에 넣었는데 4대 브라우저에서는 잘 나오지만 IE에서만 그냥 이미지로만 나옵니다. 어떤 부분이 잘못됐는지는 나중에 알게 되면 첨부해드리고 우선 상당히 좋은 효과이기 때문에 소개합니다. 위배너는 유료 플러그인에 비해 좀 못하지만 이런 모자이크형태의 배너는 거의가 유료입니다. 이곳 을 클릭하면 원본 사이트로 이동합니다. 소스를 다운 받으면 제이쿼리 파일과 CSS파일만 있어서 시험해보기가 어렵죠. 그래서 html파일과 이미지를 별도로 다운 받아 편집해서 압축파일로 저장했습니다.

coin-slider (2).zip

coin-slider.zip



수정하면서 구글의 제이쿼리 라이브러리를 삽입했습니다. coin slider 플러그인도 링크로 삽입했고 스타일시트도 있습니다. 이미지는 위 방식대로 coin-slider id의 div안에 모두 삽입합니다. 이미지에 대해서 특정한 아이디나 클래스가 있는 것도 아니라서 간편합니다. 원하는 수대로 이미지를 삽입하면 그대로 순서대로 나오게 됩니다.


페이지의 하단으로 내려가면 coin-slider div 바로 아래에 플러그인을 Call하는 제이쿼리 가 있습니다. sDelay는 조각 모자이크가 하나씩 나오는 간격의 시간으로 밀리초(mili second)입니다. hoverPause는 마우스 오버시 애니메이션을 정지할 수 있습니다.
기타 설정 파라미터는 다음과 같습니다.

width: 565, // width of slider panel

이미지의 가로 폭 설정입니다.  

height: 290, // height of slider panel

이미지의 세로 높이 설정입니다. 

spw: 7, // squares per width

이미지의 가로 수치에 대해서 모자이크 조각을 설정합니다. 

sph: 5, // squares per height

세로 수치에 대해서 조각을 설정합니다. 이 수치들이 높으면 트랜지션(Transition)에 문제가 있습니다. 

delay: 3000, // delay between images in ms

이미지가 바뀌는 간격의 밀리초입니다. 

sDelay: 30, // delay beetwen squares in ms

위에서 언급했듯이 조각이 나오는 간격의 시간입니다. 그런데 시간이 지날수록 빨라집니다.
 
opacity: 0.7, // opacity of title and navigation

타이틀과 내비게이션(좌우에 있는 아이콘)의 투명도입니다. 0부터 1까지입니다.
 
titleSpeed: 500, // speed of title appereance in ms

타이틀이 나오는 속도입니다.
 
effect: '', // random, swirl, rain, straight

조각이 나오는 모양 이펙트입니다.
 
navigation: true, // prev next and buttons

이전, 다음 버튼의 내비게이션을 활성화합니다.
 
links : true, // show images as links

이미지위에 오버시 링크를 활성화합니다.
 
hoverPause: true // pause on hover

마우스오버시 애니메이션이 정지되는 설정입니다.


이미지의 크기에 따라서 CSS의 타이틀의 배경 색이나 가로폭도 수정해줍니다.  

미봉책


IE에서 실행이 안되는 문제를 검토해 보았으나 한계에 부딛혀 미봉책을 쓰고야 말았습니다. 첨부된 압축파일에서 html파일을 IE에서 실행하면 자바스크립트를 허용하겠느냐는 메시지가 나오고 YES클 선택하면 실행이 잘되는데 블로그에 삽입하면 이런 메시지도 안나옵니다. 다른 제이쿼리와 어떤 충돌이 있나싶어서 링크를 상단에 배치하기도 하고 새 테스트 블로그를 만들어서 이 플러그인만 설치를 해도 안되더군요. 그래서 미봉책을 쓰게 됐는데 방법은 첨부된 html파일을 블로그의 파일업로드에서 올린 다음 파일 목록에서 이 파일을 찾아 우클릭하고 링크 주소복사를 합니다. 이것을 그대로 IE주소창에 붙여넣고  실행하면 잘 나옵니다. 그러니 이 파일 경로를 iframe태그에 넣고 사이드바에 첨부시켰습니다. 아이프레임에 넣는 방법은 간단합니다.

 
위처럼 아이프레임 태그에 배너의 html주소를 입력하고 크기에 맞춰서 스타일 정하면 스크롤바가 안나옵니다. 좌우 간격을 맞추기 위해 div 태그를 만들고 margin을 설정해주면 됩니다. 아이프레임을 사용하니 다른 브라우저에서는 그렇지 않은데 IE에서는 CPU 점유율이 높아지는군요. 
저작자 표시 비영리 변경 금지
신고

티스토리 툴바