안녕하세요.
인벤 스크립트에 관심을 가져주셔서 감사합니다.


스크립트를 활용해 멋지게 인장을 꾸미고 싶지만,
공부할 시간이나 스크립트를 작성할 여유가 없으신 분들을 위해 준비해 봤습니다.


이번 편에서는,
한 분이 요청해 주신 내용을 바탕으로 작성해 보았습니다.

마우스를 이미지에 올리면, 이미지가 줌-인 되어보이게 구현해 봤습니다.
게임에서 흔하게 볼 수 있는 효과이기도 하죠.

지난번에 다루었던, '마우스 오버(클릭)로 이미지가 바뀌는 갤러리형 인장' 인장에 아래 스타일만 추가해 주시면
줌인도 되고, 원본 이미지도 표시되는 두 가지 효과를 모두 볼 수도 있답니다.


- 게시판의 경우는 인장과 기본 스타일이 달라, 실제 인장에 적용해서 보시는 것을 추천해 드립니다.

코드 예시
코드 보충 설명
적용 예시
<div style="text-align:center;">

<!--이미지 1-->
<img src="http://upload2.inven.co.kr/upload/2016/04/04/bbs/i12525737569.png"
style="max-width:50px; max-height:50px;vertical-align:top;transition:0.2s;"
data-inven-over-css="{'_SELF_':{'max-width':'200px','max-height':'200px'}}"
data-inven-out-css="{'_SELF_':{'max-width':'50px','max-height':'50px'}}">

<!--이미지 2-->
<img src="http://upload2.inven.co.kr/upload/2016/04/01/bbs/i13446269990.png"
style="max-width:50px; max-height:50px;vertical-align:top;transition:0.2s;"
data-inven-over-css="{'_SELF_':{'max-width':'200px','max-height':'200px'}}"
data-inven-out-css="{'_SELF_':{'max-width':'50px','max-height':'50px'}}">

<!--이미지 3-->
<img src="http://upload2.inven.co.kr/upload/2016/04/01/bbs/i11234706357.jpg"
style="max-width:50px; max-height:50px;vertical-align:top;transition:0.2s;"
data-inven-over-css="{'_SELF_':{'max-width':'200px','max-height':'200px'}}"
data-inven-out-css="{'_SELF_':{'max-width':'50px','max-height':'50px'}}">

<!--이미지 4-->
<img src="http://upload2.inven.co.kr/upload/2016/04/04/bbs/i13569785518.png"
style="max-width:50px; max-height:50px;vertical-align:top;transition:0.2s;"
data-inven-over-css="{'_SELF_':{'max-width':'200px','max-height':'200px'}}"
data-inven-out-css="{'_SELF_':{'max-width':'50px','max-height':'50px'}}">

</div>





< 알아두면 좋은 토막지식 - transition:0.2s; >

CSS3 스타일의 하나로, 스타일이 변경될 때 부드럽게 변하는 애니메이션을 넣을 수 있는 스타일입니다.

transition 뒤에 시간(초)을 넣어 주면, 해당 시간 동안 스타일이 변하게 됩니다. 이곳에는 시간뿐만 아니라, width 2s, height 4s, color:1s; 와 같이 가로, 세로, 색상(배경 색상)이 변하는 속도를 각각 설정할 수도 있습니다. 배경 이미지의 투명도도 조절할 수 있으니, 마우스를 올렸을 때 이미지에 움짤과 같은 효과를 줄 때도 이용할 수 있죠.

transition-timing-function을 사용해서 이미지가 변하는 속도를 linear(일정하게), ease(느리게 - 빠르게 - 느린 순서로), ease-in(느리게 시작 - 빠르게 끝), ease-out(빠르게 시작 -느리게 끝) 등으로 변하는 애니메이션의 세세한 설정도 가능합니다.

CSS로 더욱 다양한 동작이 궁금하시다면, 'CSS animation'이나 'CSS transition'으로 검색하셔서 새로운 세계를 경험할 수도 있습니다.

조금 아쉬운 점은 CSS3를 지원하는 최신 브라우저에서만 지원되며, 일부 브라우저에서는 작동되지 않거나 다르게 보일 수 있다는 점입니다.



'이런 식으로 만든 예시가 필요해요', '저런 형태로 만들 수 없나요?' 같은 궁금한 경우는 인벤 스크립트 게시판에 글을 남겨주시면, 도움이 되어 드릴 수 있도록 최선을 다하겠습니다.

감사합니다.

< 복붙 완성 시리즈 바로가기 >

[바로가기] 복붙 완성 시리즈 8 : 카카오톡 프로필 사진을 닮은 인장 틀
[바로가기] 복붙 완성 시리즈 7 : 블록 쌓듯 조립해서 인장 완성! 블록형 인장 틀
[바로가기] 복붙 완성 시리즈 6 : 이미지 속에도 인벤 스크립트를 넣어보자!
[바로가기] 복붙 완성 시리즈 5 : 마우스를 올리면 줌-인(Zoom-in)되는 이미지
[바로가기] 복붙 완성 시리즈 4 : 마우스 오버(클릭)로 이미지가 바뀌는 갤러리형 인장
[바로가기] 복붙 완성 시리즈 3 : 인벤 복권! 그리고 확률을 정하는 방법에 대해
[바로가기] 복붙 완성 시리즈 2 : 오늘의 게임 운세는 인장에서 확인해 보시겠어요?
[바로가기] 복붙 완성 시리즈 1 : 마무리 일격 버튼을 이미지로? 조금 색다른 마격