[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

간단한 사용 예제 및 Demo

See the Pen Before & After Image by Nathan Schmidt (@mrnathan8) on CodePen.

다른 카테고리의 글 목록

Dev. 웹/Front-end 웹개발을 위한 codepen 카테고리의 포스트를 톺아봅니다