이미지 롤링 [transition] :: 마이구미

이번 글은 css를 통해 이미지 롤링을  만들어 볼 것이다.

이미지 롤링이란... 본인은 이런 명칭을 사용하고 있는지는 몰랐다.

예를 들어 어느 홈페이지에서 이미지에 마우스를 올렸을 때 다른 이미지로 바뀌는 현상이다.

샘플 페이지

페이지 소스 까서 복붙해서 실습해보면 더더욱 이해하기에 좋다.

페이지 소스보기를 통해 소스를 봤다면, 정말 소스가 간단한 걸 봤을 것이다.

css의 transition를 이용하면 해결된다.

일단 html 소스를 보자.

<span class="dissolve">
    <img src="zimg6.jpg" alt="Sunset" width="300" height="300">
</span>

span 태그안에 img 태그가 있다.

여기서 기억할 것은,

처음 로딩될 때의 이미지는 img 태그이고, 마우스를 올렸을 때는 span의 background 이미지를 통해 보여지게 된다.

자 기억했다면, css 소스를 보자.

/*처음 로딩시*/

.dissolve {
    width: 300px;
    height:300px;
    margin: 25px auto;
    display:inline-block;
    -webkit-transition:all .6s ;
    -moz-transition:all.6s ;
    -o-transition:all .6s ;
    -ms-transition:all .6s ;
    transition:all .6s ;
    background:url(http://www.pmob.co.uk/temp/images/zimg5.jpg) no-repeat 0 300px;
}
.dissolve img{
    opacity:1;
    -webkit-transition: opacity .6s ease-in-out;
    -moz-transition:opacity .6s ease-in-out;
    -o-transition:opacity .6s ease-in-out;
    -ms-transition:opacity .6s ease-in-out;
    transition:opacity .6s ease-in-out;
}

로딩 시 css가 어떻게 적용되었는지 보자.

살펴볼 것은 transition, background, opacity이다.

transition는 css의 다양한 속성을 변경시켜 애니메이션의 효과를 줄 수 있다.

익스는 10이상부터 지원가능하다.

또한 아직 스펙이 완전하지 않아 각 브라우저마다 접두어를 통해 적용해야한다.

위에 보다시피 -webkit-, -moz-, -o-, -ms- 있는 걸 볼 수 있다.

속성은 transition-property, transition-duration, transition-delay, transition-timing-function 4가지가 있다.

해석그대로 변화 대상 속성, 지속시간, 지연시간, 변화되는 시간에 대한 조건이다.

자세한 것은 레퍼런스를 통해 확인하길 바란다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

http://www.w3schools.com/css/css3_transitions.asp

opacity는 투명도이다.

기본 값은 1이다 (불투명)

0~1로 설정가능하다.

현재 span태그 안의 img태그에 opacity의 값을 1로 주어 불투명하게 하였다.

그리고 backgroud 속성을 보면 0 300px이 있다. 

backgroud-position 속성에서 x값을 0 y값을 300으로 맞췄다는 의미이다.

이 경우 y값이 300이기 때문에 아무것도 안 보인다. ( 0, 0 을 적용해야 이미지가 보인다 )

일단 왜 백그라운드를 그렇게 했는지 살짝 알고 가자면.

높이가 300px이기에 y값도 300으로 맞춰주었다.

왜냐면 이미지가 위로 올라오는 애니메이션이 보이기 위함이다.

밑의 마우스 hover 시 css를 보면 background-position에 0 0 으로 적용되어있다.

y값이 300에서 0으로 바뀐다는 것은 아래에서 위로 올라온다는 의미로 활용할 수 있다.

이해가 안간다면 참고 페이지 를 들어가보자.

하나 짚고 가보자면,

transition 조건의 transition-property 에 all로 명시된 것이 있다.

모든 속성에 대해 변화를 준다는 의미다.

이 예제의 경우는 all을 대신하여 background로 대신하여 명시해줄 수 있다.

사실 상 적용되는 속성은 background의 x,y 위치값을 통해 이미지 롤링하는 예제이기 때문이다.

마우스 hover시 css를 보자.

/*마우스 올렸을 때*/
.dissolve:hover img{opacity:0;}

.dissolve:hover {
    background:url(http://www.pmob.co.uk/temp/images/zimg5.jpg) no-repeat 0 0;
}

마우스 hover시 기존 이미지가 아닌 다른 이미지를 보여야한다.

위에서도 말했듯이 다른 이미지는 span 태그의 background의 이미지를 통해 보여줄 것이라고 했다.

그리하기위해 span태그 안의 img태그를 opacity 0을 통해 투명하게 보이게 하였다.

span태그는 background-position을 0 0 을 설정하여 background 이미지가 보이게 하였다.

사실상 opacity와 background-position의 값을 변화시켰다.

그리하여 두 이미지를 상황에 따라 보여지게 하였다.

여기서 transition을 활용하여 애니메이션의 효과처럼 보여지게 가능한 것이다.

transition는 차려놓은 밥상에 숟가락만 얻으면 다양한 효과를 볼 수 있다.