1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE html><html><head> <meta charset="utf-8" /> <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)