| 1 | | // @name The Fade Anything Technique |
| 2 | | // @namespace http://www.axentric.com/aside/fat/ |
| 3 | | // @version 1.0-RC1 |
| 4 | | // @author Adam Michela |
| 5 | | |
| 6 | | var Fat = { |
| 7 | | make_hex : function (r,g,b) |
| 8 | | { |
| 9 | | r = r.toString(16); if (r.length == 1) r = '0' + r; |
| 10 | | g = g.toString(16); if (g.length == 1) g = '0' + g; |
| 11 | | b = b.toString(16); if (b.length == 1) b = '0' + b; |
| 12 | | return "#" + r + g + b; |
| 13 | | }, |
| 14 | | fade_all : function (dur) |
| 15 | | { |
| 16 | | var a = document.getElementsByTagName("*"); |
| 17 | | for (var i = 0; i < a.length; i++) |
| 18 | | { |
| 19 | | var o = a[i]; |
| 20 | | var r = /fade-?(\w{3,6})?/.exec(o.className); |
| 21 | | if (r) |
| 22 | | { |
| 23 | | if (!r[1]) r[1] = ""; |
| 24 | | if (o.id) Fat.fade_element(o.id,null,dur,"#"+r[1]); |
| 25 | | } |
| 26 | | } |
| 27 | | }, |
| 28 | | fade_element : function (id, fps, duration, from, to) |
| 29 | | { |
| 30 | | if (!fps) fps = 30; |
| 31 | | if (!duration) duration = 3000; |
| 32 | | if (!from || from=="#") from = "#FFFF33"; |
| 33 | | if (!to) to = this.get_bgcolor(id); |
| 34 | | |
| 35 | | var frames = Math.round(fps * (duration / 1000)); |
| 36 | | var interval = duration / frames; |
| 37 | | var delay = interval; |
| 38 | | var frame = 0; |
| 39 | | |
| 40 | | if (from.length < 7) from += from.substr(1,3); |
| 41 | | if (to.length < 7) to += to.substr(1,3); |
| 42 | | |
| 43 | | var rf = parseInt(from.substr(1,2),16); |
| 44 | | var gf = parseInt(from.substr(3,2),16); |
| 45 | | var bf = parseInt(from.substr(5,2),16); |
| 46 | | var rt = parseInt(to.substr(1,2),16); |
| 47 | | var gt = parseInt(to.substr(3,2),16); |
| 48 | | var bt = parseInt(to.substr(5,2),16); |
| 49 | | |
| 50 | | var r,g,b,h; |
| 51 | | while (frame < frames) |
| 52 | | { |
| 53 | | r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames)); |
| 54 | | g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames)); |
| 55 | | b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames)); |
| 56 | | h = this.make_hex(r,g,b); |
| 57 | | |
| 58 | | setTimeout("Fat.set_bgcolor('"+id+"','"+h+"')", delay); |
| 59 | | |
| 60 | | frame++; |
| 61 | | delay = interval * frame; |
| 62 | | } |
| 63 | | setTimeout("Fat.set_bgcolor('"+id+"','"+to+"')", delay); |
| 64 | | }, |
| 65 | | set_bgcolor : function (id, c) |
| 66 | | { |
| 67 | | var o = document.getElementById(id); |
| 68 | | o.style.backgroundColor = c; |
| 69 | | }, |
| 70 | | get_bgcolor : function (id) |
| 71 | | { |
| 72 | | var o = document.getElementById(id); |
| 73 | | while(o) |
| 74 | | { |
| 75 | | var c; |
| 76 | | if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color"); |
| 77 | | if (o.currentStyle) c = o.currentStyle.backgroundColor; |
| 78 | | if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; } |
| 79 | | o = o.parentNode; |
| 80 | | } |
| 81 | | if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF"; |
| 82 | | var rgb = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/); |
| 83 | | if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3])); |
| 84 | | return c; |
| 85 | | } |
| 86 | | } |
| 87 | | |
| 88 | | addLoadEvent(function () { |
| 89 | | Fat.fade_all(); |
| 90 | | }); |