Efecto RGB de luces en borde de div...

255 visitas 2 respuestas

Que tal amigos, hoy estoy tratando de lograr este efecto que me solicitó un amigo para su web personal, se trata de hacer un efecto RGB dimerizado como el de las luces y hasta ahora logre lo siguiente...

$(document).ready(function() {
var r = 255, g = 255, b = 0;
setInterval(function() {
    //r= Math.floor((Math.random() * 255) + 1);
    //g= Math.floor((Math.random() * 255) + 1);
    //b= Math.floor((Math.random() * 255) + 1);
    if(b<256){
        b+=1;
    }
    else{
        b=0;
    }
    $('.main').css('border', '1px solid rgb(' + r + ',' + g + ',' + b + ')');
}, 10);

Lo que no logro es que al llegar a 255 este empiece a decrecer, 255,254,253,etc etc...

Como tendria que hacerlo? Alguien me da una manito? Sean buenos como siempre :D

Saludos AlanB!

por

Registrado desde: 20 Aug 14

Respuestas

0 0

Me respondo a mi mismo llegue a esta solución...

$(document).ready(function() {
var r = 255, g = 255, b = 0;
var r1 = 0;
setInterval(function() {
    //r= Math.floor((Math.random() * 255) + 1);
    //g= Math.floor((Math.random() * 255) + 1);
    //b= Math.floor((Math.random() * 255) + 1);
    if(r1==0){
        b+=1;
        if(b==180){r1=1;}
    }
    if(r1==1){
        b-=1;
        if(b==0){r1=0;}
    }    
    $('.main').css('border', '1px solid rgb(' + r + ',' + g + ',' + b + ')');
}, 10);
});

Saludos, si a alguien se le ocurre otra forma bienvenida sea ;)

por

Registrado desde: 20 Aug 14
0 0

Aquí la solución completa amigos :D el que tenga ganas de jugar con los colores que juegue ;)

    $(document).ready(function() {
    var r = 0, g = 255, b = 0;
    var r1 = 0, g1 = 0, b1 = 0;
        setInterval(function() {
            if(r1==0){r+=1;if(r==255){r1=1;}}
            if(r1==1){r-=1;if(r==0){r1=0;}}    
            if(g1==0){g-=1;if(g==0){g1=1;}}
            if(g1==1){g+=1;if(g==255){g1=0;}}        
            if(b1==0){b+=1;if(b==255){b1=1;}}
            if(b1==1){b-=1;if(b==0){b1=0;}}    
            $('.main').css('border', '2px dotted rgb(' + r + ',' + g + ',' + b + ')');
        }, 20);
    });

Saludos AlanB!

por

Registrado desde: 20 Aug 14