Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // main function to process the fade request //
- function colorFade(id,element,start,end,steps,speed) {
- var startrgb,endrgb,er,eg,eb,step,rint,gint,bint,step;
- var target = document.getElementById(id);
- steps = steps || 20;
- speed = speed || 20;
- clearInterval(target.timer);
- endrgb = colorConv(end);
- er = endrgb[0];
- eg = endrgb[1];
- eb = endrgb[2];
- if(!target.r) {
- startrgb = colorConv(start);
- r = startrgb[0];
- g = startrgb[1];
- b = startrgb[2];
- target.r = r;
- target.g = g;
- target.b = b;
- }
- rint = Math.round(Math.abs(target.r-er)/steps);
- gint = Math.round(Math.abs(target.g-eg)/steps);
- bint = Math.round(Math.abs(target.b-eb)/steps);
- if(rint == 0) { rint = 1 }
- if(gint == 0) { gint = 1 }
- if(bint == 0) { bint = 1 }
- target.step = 1;
- target.timer = setInterval( function() { animateColor(id,element,steps,er,eg,eb,rint,gint,bint) }, speed);
- }
- // incrementally close the gap between the two colors //
- function animateColor(id,element,steps,er,eg,eb,rint,gint,bint) {
- var target = document.getElementById(id);
- var color;
- if(target.step <= steps) {
- var r = target.r;
- var g = target.g;
- var b = target.b;
- if(r >= er) {
- r = r - rint;
- } else {
- r = parseInt(r) + parseInt(rint);
- }
- if(g >= eg) {
- g = g - gint;
- } else {
- g = parseInt(g) + parseInt(gint);
- }
- if(b >= eb) {
- b = b - bint;
- } else {
- b = parseInt(b) + parseInt(bint);
- }
- color = 'rgb(' + r + ',' + g + ',' + b + ')';
- if(element == 'background') {
- target.style.backgroundColor = color;
- } else if(element == 'border') {
- target.style.borderColor = color;
- } else {
- target.style.color = color;
- }
- target.r = r;
- target.g = g;
- target.b = b;
- target.step = target.step + 1;
- } else {
- clearInterval(target.timer);
- color = 'rgb(' + er + ',' + eg + ',' + eb + ')';
- if(element == 'background') {
- target.style.backgroundColor = color;
- } else if(element == 'border') {
- target.style.borderColor = color;
- } else {
- target.style.color = color;
- }
- }
- }
- // convert the color to rgb from hex //
- function colorConv(color) {
- var rgb = [parseInt(color.substring(0,2),16),
- parseInt(color.substring(2,4),16),
- parseInt(color.substring(4,6),16)];
- return rgb;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement