CSS3 transform으로 zoomin 효과 내기

전에 transform으로 이미지 위아래로 움직이는 법을 포스팅 한적이 있다.

하지만 그 후에 잘 쓰지 않게되서 금방 까먹어버렸;;;기에ㅠㅠ

다시 복습하는 차원에서 공부해보았다.

오늘은 이미지를 확대/축소 시킬수 있는 zoomin효과를 만들어봤다.

이미지에 마우스 오버가 되거나 스크롤할때 zoomin 효과를 주면 별거 아니지만 좀 있어보이는 것 같다. ㅋㅋ

아.. 하지만 이미지는 잘못 사용하면 위험하므로 예제는 텍스트로 만들었다ㅠㅠ

이미지로 해야한다면 background로 넣어주면 된다는 것~!! 생각보다 어렵지 않다!

연습예제 > http://jsfiddle.net/dmyjbbk9/3/

여기서 중요한 것은!

1. zoomin이 되는 엘리먼트를 감싸는 부모 엘리먼트에 overflow : hidden ; 을 꼭 넣어주자.

플래시를 생각해보면 마스크 역할이 되는 것이다. 물론 디자인에 따라 달라지겠지만~

2. zoomin이 되는 엘리먼트에 마우스를 오버했을때 효과가 시작되게 해야하므로

:hover일때 transform: scale(1.3,1.3); 로 효과를 주자.

내가 지정한 값에서 넓이:1.3배, 높이:1.3배 커지라는 코드이다.

scale 이것만 봐도 크기에 관련된 효과라는 것을 짐작할 수 있을것이다.

3. zoomin이 될때 이미지가 확대/축소 될때에 속도를 조절 할 수 있다.

zoomin이 되는 엘리먼트에 transition : all 2.5s ease ; 로 주게되면

이미지가 천천히~ 확대된다. 빠르게 확대시키고 싶다면 0.1로 지정해주면 된다.

ease 란? 천천히 시작해서 점점 빨라지는 전환 효과인데 기본적으로 많이 쓰는 속성이다.

이 속성 말고 다른 속성을 좀 더 보면,

ease - 천천히 시작해서 점점 빨라지는 전환 효과

linear - 처음부터 끝까지 같은 속도인 전환 효과

ease-in - 시작이 느린 전환 효과

ease-out - 끝이 느린 전환 효과

ease-in-out - 시작과 끝이 느린 전환 효과

cubic-bezier(n,n,n,n) - 직접 함수에 자신이 값을 정의 할 수 있음

세밀한 차이는 직접 작업을 해봐야 느낄 수 있을 것 같다.

전환 효과의 차이를 볼 수 있는 예제이다.

http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition_speed

설명이 더 필요하다면 http://www.w3schools.com/css/css3_transitions.asp 이곳을 참고 바란다.

저 세가지만 잘 파악하고 있으면 쉽게 zoomin효과를 만들 수 있을것이다.

공부하면서 또 한가지 알게된게 matrix 속성이다.

이 속성으로도 같은 효과를 줄 수 있는데 무슨 차이점이 있는지 아직 파악이 되지 않았다.

scale보다 좀 더 어려운 개념인것 같긴한데.. matrix를 좀 더 알아봐야겠다.