<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title>JQuery Rainbow Animation</title>
<style>
.RainbowText{ text-align:center;}
.RainbowText > span{ font-size:30px; font-weight:900; animation-duration:1s; animation-iteration-count:infinite;}
</style>
<script>
// 색상목록
var rainbowArr = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
// 클래스명
var className = "RainbowText";
$(function () {
var html = [];
html.push("<style>");
// rainbowArr에 넣은 수만큼 클래스를 만든다.
for (var i = 0; i < rainbowArr.length; i++) {
// 클래스 선언
html.push(".rainbow" + i + "{color:" + rainbowArr[i] + ";animation-name:rainbow" + i + "Ani;}");
// 애니메이션 키프레임 선언
html.push("@keyframes rainbow" + i + "Ani{");
for (var j = i; j < i + rainbowArr.length + 1; j++) {
// 0% ~ 100% 가 등록한 배열순서대로 색상이 되도록 처리
html.push(((100 / rainbowArr.length) * (j - i)) + "%{color:" + rainbowArr[((j) % rainbowArr.length)] + "}");
}
html.push("}");
}
html.push("</style>");
// body 에 추가
$("body").append(html.join("\n"))
// 선언한 클래스에 html 을 치환
$("." + className).each(function () {
var str = $(this).text();
var html = [];
// text 수 만큼
for (var i = 0; i < str.length; i++) {
// span 으로 잘개쪼개고 클래스명을 지정
html.push("<span class=\"rainbow" + (i % rainbowArr.length) + "\">" + str.substring(i, i + 1) + "</span>");
}
// 클래스의 html태그를 변경
$(this).html(html.join(""));
});
});
</script>
</head>
<body>
<div class="RainbowText">Rainbow</div>
<div class="RainbowText">■■■■■■■</div>
</body>
</html>
20. 6. 9.
Javascript & JQuery Rainbow Text Effect
Rainbow Text Animation
피드 구독하기:
글 (Atom)