우연히 Geforce.com 의 Farcry 4 의 성능 및 트윅 가이드를 보다가 Interactive Comparisons 스크린샷 비교를 보게되었습니다.

 

Interactive Comparisons 샘플

 

jQuery 를 이용한 Before/After 화면을 마우스로 스크롤 하며 화면을 비교/보여주는 스크립트로 써먹을곳이 있겠다 라는 생각에

소스를 따올 생각으로 js 파일을 다운 받아 보았습니다.

 

소스를 열어보니 해당 소스의 출처가 있길래 따라가 보니 다행히 공개된 자료였습니다.

 

그래서 티스토리의 HTML/CSS 편집을 통해 적용해 보았습니다.

 

처음 원본 소스와는 달리 스크롤바의 이미지가 출력되지 않는 문제가 있는데 이 부분은 소스내 이미지 경로를 변경하면 됩니다.

 

before
after

 

이미지 출처 : http://godchoa.tistory.com/2

 

before
after

 

이미지 출처 : 구글

 

Catch My Fame jQuery Before/After Plugin

Example 1

Example 2

 

 

소스내 포함된 jQuery 와 jQueryUI 자료가 구버전이라서 개인적으로 jQuery.com 에서 구글의 cdn 자료로 교체하고, jQueryUI.com 에서 빌더(전체 선택)를 통해 만들어진 파일로 교체하였습니다.

또한 div id 의 container 를 다른이름으로 변경하셔야 합니다.(티스토리내에서도 동일 id 를 사용중이라..)

 

플러그인의 자세한 커스텀 방법은 원본 사이트를 확인해 주세요.

 

 

jquery-ui-1.11.2.custom.zip (no theme, all components)

저작자 표시 비영리 변경 금지
신고

티스토리 툴바