[CSS] 도전! 링크 무지개 Hover 효과
CSS3 Animation으로 구현하기
Tistory 플러그인으로 제공되고 있고, 5년 전만 해도 개인 블로그·웹사이트에 많이 적용되었던
마우스 오버 시 링크가 무지개색으로 변하는 효과!
저 당시에는 Javascript 플러그인 Jquery가 널리 사용되지 않았습니다.
따라서 플러그인이 아닌 기본 Javascript로 구현했어야 하나 DOM에 맞춰진 게 아니라 비표준으로 제작되어 MS Explorer 구버전에서만 동작한다는 한계가 있습니다.
아직 CSS3이 표준으로 자리 잡지는 않았지만,
모든 브라우저에서 CSS3을 제공하고 있는 점을 고려하여 Javascript 대신 CSS3으로 이를 구현해보려고 합니다.
아무래도 Javascript 보단 퍼포먼스면에서 더 유리하지 않나 생각해 봅니다. 이제 진행해 볼까요?
1. CSS3 Animation 속성을 사용합니다.
우리는 무지개 효과를 구현하기 위해 CSS3 Animation을 사용합니다.
무지개색이 7가지 이므로 프레임을 약 7단계로 구분하여 각각의 무지개 색을 넣어줄 겁니다.
CSS3 Animation에 관해서는 Mozilla의 공식 레퍼런스에 개제되어 있는 CSS 애니메이션 사용하기를 참고하시기 바랍니다.
2. CSS 코드는 다음과 같습니다.
a:hover, a:focus {
animation-duration: 3s; /* 전체 애니메이션 재생시간 */
animation-name: rainbowLink;
animation-iteration-count: infinite;
}
@keyframes rainbowLink {
0% { color: #ff2a2a; }
14.2857% { color: #ff7a2a; }
28.5714% { color: #ffc52a; }
42.8571% { color: #43ff2a; }
57.1428% { color: #2a89ff; }
71.4285% { color: #202082; }
85.7142% { color: #6b2aff; }
100% { color: #e82aff; }
}접근성을 향상하기 위해 Hover와 별개로 Focus도 추가했습니다.
링크에 포커스가 가거나 마우스 포인터가 올라가 있는 경우 무지개 효과가 나타납니다.
Animation-duration은 총프레임의 재생시간을 설정하는 것이며 3초를 설정했습니다.
무한 반복하기 위해 Animation-iteration-count 값을 infinite로 설정했습니다.
마지막으로 rainbowLink라는 키프레임을 생성하고 이를 링크와 연결시켰습니다.
3. 적용결과
CSS3 Animation을 이용하여 Javascript와 똑같이 구현했습니다.
CSS3를 지원하지 않는 하위 브라우저에서는 작동되지 않겠지만
CSS와 HTML을 분리하였으므로 단계적 축소 개념이 적용되어 애니메이션만 동작하지 않을 뿐
실제 웹 사이트를 이용하는 데에는 아무런 지장이 없습니다.
4. Javascript VS CSS3
각각의 사용종류가 다르기 때문에 어느 게 우세하다는 것을 논하는 것은 의미가 없습니다.
다만 이런 효과의 경우 CSS3로 구현했을 경우 더 쉽고 코드용량이 적다는 것을 알려드리려 합니다.
Javascript 는 심지어 소스 코드가 긴데도 불구하고 MS IE에서만 동작합니다.
CSS3으로 구현된 소스 코드는 CSS3 Animation을 지원하는 브라우저면 모두 정상적으로 동작합니다.
