본문 영역
색상전환 효과(ani_type="color") 상세보기
작성자: 관리자
추천: 0 조회: 15473
색상전환 효과(ani_type="color")
ani_type="color(...)"
색상전환 효과는 마우스 오버/아웃시, 색상변화를 애니메이션 처리해 부드럽게 전환해 주는 함수입니다.
색상전환 효과로 적용할 수 있는 스타일시트(CSS) 속성
-
1
글자색(font)
-
2
배경색(background)
-
3
테두리색(border)
-
4
글자 그림자색(text-shadow)
-
5
클래스명(class)
예제
글자색(font)
배경색(background)
<div style="background:yellow" ani_type="color(background:'red')">노란색↔빨강색</div>
노란색↔빨강색
테두리색(border)
<div style="border:1px solid black" ani_type="color(border:'red')">검정색↔빨강색</div>
검정색↔빨강색
글자 그림자색(text-shadow)
<b><font style="color:black;text-shadow:0 0 5px red" ani_type="color(font:'red','text-shadow':'black')">검정색↔빨강색</font></b>
검정색↔빨강색
text-shadow속성은 가운데 - 문자가 있어 자바스크립트 변수로 사용할 수 없으므로 작은따움표 처리된 것에 유의하십시요.글자 그림자(text-shadow) 속성은 익스플로러 9부터 지원합니다.
클래스명(class)
<a class="button large black" ani_type="color(class:red)">빨강색으로 변함</a>
설정값
| 변수명 | 기본값 | 설명 |
|---|---|---|
| class | 스타일시트(CSS) class명 | |
| font | 글자 색상(16진수 HEX값) | |
| background | 배경색(16진수 HEX값) | |
| border | 테두리 선색(16진수 HEX값) | |
| text-shadow | 글자 그림자색(16진수 HEX값) | |
| time | 200 | 실행시간(1초:1000) |
| step | 5 | 변환단계수 |
class는 우선순위가 낮습니다. 만약 속성값으로 class와 font를 주면 font가 우선합니다. ani_type="color"는 class를 가장 먼저 체크합니다. 만약 class설정값이 존재하면 class의 글자색, 배경색, 테두리색, 글자 그림자색을 알아온다. font도 선언하였기 때문에 font의 글자색 값을 덮어쓴다. 이는 원하는 class로 변경하면서 font만 다르게 변경할 수 있는 기능입니다.
위 예제 소스에서 class:red는 red class로 변경하는 것입니다. 차고 없으시길 바랍니다.
색상 사용시 주의점
RGB 색상 사용금지
빛의 3원색인 적색·녹색·청색을 혼합하여 표현하는 색상으로, 0~255단계로 표현하는 색상입니다.
적색 : rgb(255,0,0), 녹색 : rgb(0,255,0), 청색 : rgb(0,0,255)
-
익스플로러, 사파리만 정상적으로 지원(크롬, 파이어폭스, 오페라 지원안함)
-
ani_type="color(...)" 효과의 소괄호() 충돌
예) ani_type="color(font:rgb(255,0,0))" 색상 소괄호와 color() 소괄호 충돌
16진수 HEX값 사용가능
: RGB색상을 16진수로 변환한 값에 앞에 "#" 문자를 붙혀 표현한 색상입니다.
적색 : #FF0000
녹색 : #00FF00
청색 : #0000FF
녹색 : #00FF00
청색 : #0000FF
사람이 쓰는 색상명값은 사용가능
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow 등등..
모든 브라우저에서 지원하는 색상명 147개
보러가기원리
-
1
ani_type="color(font:#CC0000)"가 선언되고,
-
2
마우스가 이 객체에 올라오면(mouseover),
-
3
폰트색상 변경(font:#CC0000)임을 알아 차리고 현재의 폰트색상을 알아온다.
-
4
변환단계수가 정의되어 있지 않기 때문에 기본값 5으로 현재의 폰트색과 변경색(#CC0000) 사이의 값 5가지를 알아온다.
-
5
5번을 실행시간(200/5)의 속도로 색상변경시킨다.
-
6
마우스가 이 객체에서 나가면(mouseout), 꺼구로 적용한다.
왜, 원리를 설명하는냐하면, 만약 step 수를 너무 크게 잡으면 브라우져가 느려지게 되므로 step수를 될 수 있으면 사용하지 말라는 말을 하고 싶어서입니다.
많은 테스트 결과로 5번 정도가 가장 무난하기에 사용자는 step, time 속성이 없다고 생각하고 사용하기를 기대합니다.
성능이 떨어지는 컴퓨터나, 낮은 버젼의 브라우져(익스플로러6 이하)에서 속도 저하가 나타날 수 있습니다.
사용법
1. ani_type="color(...)" 로 사용
<div ani_type="color(font:#FF0000)">폰트 변경</div>
<style>
/* 예제에 사용되는 스타일시트 */
.d_box1, .d_box2, .d_box3{
font-size:13pt;font-family:Arial;font-weight:bold;text-align:center;background:#E0E2DF;
float:left;margin:100px 0px 0px 30px;
width:150px;height:100px;line-height:50px;
}
.d_box1{border:3px solid #CCCCCC}
.d_box2{border:3px dashed #CCCCCC}
.d_box3{border:3px dotted #CCCCCC}
.d_movie{width:100%;height:300px;background:#F1F1F1}
</style>
폰트색상
변경
변경
배경색
변경
변경
테두리선
변경
변경
2. color_toggle(ID,{설정값들})
<div onmouseover="color_toggle(this,{font:'#FF0000'})" onmouseout="color_toggle(this,{font:'#FF0000'})">폰트 변경</div>
| 폰트색 + 배경색 + 테두리선색 변경 |
| 폰트색 + 배경색 + 테두리선색 변경 |
| 폰트색 + 배경색 + 테두리선색 변경 |
| 폰트색 + 배경색 + 테두리선색 변경 |
| 폰트색 + 배경색 + 테두리선색 변경 |
인수
-
1
ID : 적용할 id 혹은 오브젝트
-
2
설정값들 : font, border, background 연관배열
색상은 작은 따움표(')로 처리(문자열 표현법)
전체를 중괄호{}로 묶음(연관배열 처리)
관련 글&정보
등록일:
마지막 수정일:
자바스크립트(JS)
총글수: 18
| 글순서NO | *(첨부파일) | 제목 | 추천 | 조회 | 작성일↑ |
|---|---|---|---|---|---|
| 18 | 없음 | int_utils.js | 추천:0 | 조회:4245 | |
| 17 | 없음 | 손쉬운 애니메이션 효과(ani_type) | 추천:0 | 조회:1111984 | |
| 16 | 없음 | 손쉬운 애니메이션 효과(ani_type) 응용하기 | 추천:0 | 조회:16218 | |
| 15 | 없음 | 현재글:색상전환 효과(ani_type="color") | 추천:0 | 조회:15473 | |
| 14 | 없음 | alt/title 속성 제어(툴팁) | 추천:0 | 조회:5101 | |
| 13 | 없음 | MOVIE 애니메이션(flash 대용) | 추천:0 | 조회:11413 | |
| 12 | 없음 | M9SLIDE(슬라이드) 애니메이션 | 추천:0 | 조회:9879 | |
| 11 | 없음 | M9SLIDE 애니메이션:fade 효과 | 추천:0 | 조회:11142 | |
| 10 | 없음 | M9SLIDE 애니메이션:slide 효과 | 추천:0 | 조회:25144 | |
| 9 | 없음 | M9SLIDE 애니메이션:slice 효과 | 추천:0 | 조회:6680 |
