[2016.4.27] before / after 실시간 전환 이미지 뷰어

전에 어떤 웹사이트의 광고에서 이런 형태로 이미지 광고 하던데 전/후 비교 사진에서 아주 간편하게 확인할 수 있겠네요~

하나의 뷰어에서 이미지 두개를 보고싶은 만큼 번갈아 볼 수 있게 만들었네요~

예제에서 사용된 기술은 JS : Babel / CSS : Scss 입니다.

그럼 소스를 살짝 살펴 볼까요~

* html 영역

<figure> 

  - 사진, 도표, 삽화, 오디오, 비디오, 코드 등을 담는 컨테이너 역할 태그

  - 브라우저 지원 버전 : IE 9.0+, chrome 6.0+ 등

<input type="range"/>             

  - 슬라이더 출력

참고 : 새로 추가된 HTML5 input types:

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

관련 글

2015/09/23 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.09.23] 메뉴UI - 아크형태로 팝업하는 아기자기한 메뉴 아이콘

2015/12/16 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.12.16] Dropdown button :: Pure CSS - 순수 css 로만 구현된 드랍다운 버튼, 구현방법

2015/09/24 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.09.24] jade, sass, angularJS를 활용한 Up! Down! 게임

2016/01/27 - [IT 밑거름] - [Front-end tools] 프론트엔드 개발 기술/툴 정리

2016/01/26 - [나에게 쓰는 편지..] - 최근 관심있어지는 Front-end 기술들...

간단한 사용 예제 및 Demo