어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 부메뉴 이동은 알트 키 플러스 2 키이고, 본문 이동은 알트 키 플러스 3 키입니다. 알트 키 플러스 J 키는 일반모드와 텍스트모드로 전환합니다.

현재위치
  1. HOME
  2. >배우기
  3. > 자바스크립트(JS)

본문 영역

색상전환 효과(ani_type="color") 상세보기

작성자: 관리자 추천: 0  조회: 15923

색상전환 효과(ani_type="color")


ani_type="color(...)"


색상전환 효과는 마우스 오버/아웃시, 색상변화를 애니메이션 처리해 부드럽게 전환해 주는 함수입니다.

색상전환 효과로 적용할 수 있는 스타일시트(CSS) 속성
  • 1 글자색(font)
  • 2 배경색(background)
  • 3 테두리색(border)
  • 4 글자 그림자색(text-shadow)
  • 5 클래스명(class)
배경이미지 변경은 적용되지 않습니다.

예제


글자색(font)

<font color="black" ani_type="color(font:'red')">검정색↔빨강색</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>

[클래스명에 의한 색 전환] 예제소스보기


설정값


ani_type의 color 변수 표
변수명 기본값 설명
class 스타일시트(CSS) class명
font 글자 색상(16진수 HEX값)
background 배경색(16진수 HEX값)
border 테두리 선색(16진수 HEX값)
text-shadow 글자 그림자색(16진수 HEX값)
time 200 실행시간(1초:1000)
step 5 변환단계수
font, background, border, text-shadow 는 설정한 값만 적용됩니다.

class는 우선순위가 낮습니다. 만약 속성값으로 classfont를 주면 font가 우선합니다. ani_type="color"class를 가장 먼저 체크합니다. 만약 class설정값이 존재하면 class의 글자색, 배경색, 테두리색, 글자 그림자색을 알아온다. font도 선언하였기 때문에 font의 글자색 값을 덮어쓴다. 이는 원하는 class로 변경하면서 font만 다르게 변경할 수 있는 기능입니다.

[버튼 전환] 예제소스보기

위 예제 소스에서 class:red는 red class로 변경하는 것입니다. 차고 없으시길 바랍니다.

[time&step속성변화에 따른 전환] 예제소스보기


색상 사용시 주의점


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값 사용가능


16진수 HEX값 : RGB색상을 16진수로 변환한 값에 앞에 "#" 문자를 붙혀 표현한 색상입니다.

적색 : #FF0000
녹색 : #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>

폰트색상
변경
배경색
변경
테두리선
변경

[ani_type 활용] 예제소스보기


2. color_toggle(ID,{설정값들})


<div onmouseover="color_toggle(this,{font:'#FF0000'})" onmouseout="color_toggle(this,{font:'#FF0000'})">폰트 변경</div>


폰트색 + 배경색 + 테두리선색 변경
폰트색 + 배경색 + 테두리선색 변경
폰트색 + 배경색 + 테두리선색 변경
폰트색 + 배경색 + 테두리선색 변경
폰트색 + 배경색 + 테두리선색 변경

[color_toggle 활용] 예제소스보기


인수

  • 1 ID : 적용할 id 혹은 오브젝트
  • 2 설정값들 : font, border, background 연관배열
    색상은 작은 따움표(')로 처리(문자열 표현법)
    전체를 중괄호{}로 묶음(연관배열 처리)

관련 글&정보

TOP

등록일:
마지막 수정일:
목록

자바스크립트(JS)

총글수: 18
자바스크립트(JS) 목록 : 이표는 글순서,첨부파일,제목,추천수,조회수,작성일을 확인할 수 있습니다
글순서NO *(첨부파일) 제목 추천 조회 작성일↑
18 없음 int_utils.js 추천:0 조회:4435
17 없음 손쉬운 애니메이션 효과(ani_type) 추천:0 조회:1112801
16 없음 손쉬운 애니메이션 효과(ani_type) 응용하기 추천:0 조회:16476
15 없음 현재글:색상전환 효과(ani_type="color") 추천:0 조회:15923
14 없음 alt/title 속성 제어(툴팁) 추천:0 조회:5366
13 없음 MOVIE 애니메이션(flash 대용) 추천:0 조회:11661
12 없음 M9SLIDE(슬라이드) 애니메이션 추천:0 조회:10294
11 없음 M9SLIDE 애니메이션:fade 효과 추천:0 조회:11401
10 없음 M9SLIDE 애니메이션:slide 효과 추천:0 조회:25401
9 없음 M9SLIDE 애니메이션:slice 효과 추천:0 조회:6926
초기화 
자바스크립트(JS) 검색