Переливающаяся градиентная заливка фона
Еще одним украшением для Вашего сайта может стать градиентная заливка фона. Чтобы немного выделится из массы других сайтов, использующих статичные фоновые цвета или изображения, предлагаем Вам воспользоваться JavaScript кодом, который делает переливающуюся градиентную заливку фона.
Другими словами, у Вас будет динамически изменяющийся цвет фона, или проще говоря, цвет фона Вашего сайта будет постоянно плавно переливаться от одного цвета к другому. Хотим обратить Ваше внимание на то, что в некоторых старых браузерах (например, Opera) фон будет просто плавно сменяться (градиентная заливка не работает).
Как видите, скрипт реализующий переливающуюся градиентную заливку фона, смотрится довольно эффектно, но главное не переборщить со слишком яркими цветами и большой скоростью смены цвета фона.
Для того чтобы получить точно такой же переливающийся фон, как и на данной страничке, вставьте на свой сайт, следующий код:
<script type="text/javascript">
var body_colors = new Array("#FFFF00", "#00FFFF", "#66CC00", "#884400", "#77DD77",
"#FFAA00", "#FFFF66", "#BB66FF", "#55BBFF");
var hex_col = new Array("0","1","2","3","4","5","6","7","8","9",
"A","B","C","D","E","F");
var pause = 2000;
var speed = 20;
var steps = 40;
var step = 1;
var red_col_1, red_col_2;
var green_col_1, green_col_2;
var blue_col_1, blue_col_2;
var rgb_red_from, rgb_green_from, rgb_blue_from;
var rgb_red_to, rgb_green_to, rgb_blue_to;
var rgb_red_now, rgb_green_now, rgb_blue_now;
var color_A = 0;
var color_B = 1;
var color_C = 1;
var color_D = 2;
function translate_rgb() {
var hexa = body_colors[color_A];
var hexa_red = hexa.substring(1,3);
var hexa_green = hexa.substring(3,5);
var hexa_blue = hexa.substring(5,7);
rgb_red_from = parseInt("0x" + hexa_red);
rgb_green_from = parseInt("0x" + hexa_green);
rgb_blue_from = parseInt("0x" + hexa_blue);
rgb_red_now = rgb_red_from;
rgb_green_now = rgb_green_from;
rgb_blue_now = rgb_blue_from;
hexa = body_colors[color_B];
hexa_red = hexa.substring(1,3);
hexa_green = hexa.substring(3,5);
hexa_blue = hexa.substring(5,7);
rgb_red_to = parseInt("0x" + hexa_red);
rgb_green_to = parseInt("0x" + hexa_green);
rgb_blue_to = parseInt("0x" + hexa_blue);
color_A++;
color_B++;
color_C++;
color_D++;
if (color_A>=body_colors.length) color_A = 0;
if (color_B>=body_colors.length) color_B = 0;
if (color_C>=body_colors.length) color_C = 0;
if (color_D>=body_colors.length) color_D = 0;
change();
}
function change() {
var timer;
rgb_red_now = rgb_red_now - ((rgb_red_from - rgb_red_to)/speed);
rgb_green_now = rgb_green_now - ((rgb_green_from - rgb_green_to)/speed);
rgb_blue_now = rgb_blue_now - ((rgb_blue_from - rgb_blue_to)/speed);
if (rgb_red_now>255) rgb_red_now = 255;
if (rgb_red_now<0) rgb_red_now = 0;
if (rgb_green_now>255) rgb_green_now = 255;
if (rgb_green_now<0) rgb_green_now = 0;
if (rgb_blue_now>255) rgb_blue_now = 255;
if (rgb_blue_now<0) rgb_blue_now = 0;
if (step<=speed) {
red_col_1 = hex_col[Math.floor(rgb_red_now/16)];
red_col_2 = hex_col[Math.floor(rgb_red_now)%16];
green_col_1 = hex_col[Math.floor(rgb_green_now/16)];
green_col_2 = hex_col[Math.floor(rgb_green_now)%16];
blue_col_1 = hex_col[Math.floor(rgb_blue_now/16)];
blue_col_2 = hex_col[Math.floor(rgb_blue_now)%16];
document.body.style.background = "#" + red_col_1 + red_col_2
+ green_col_1 + green_col_2 + blue_col_1 + blue_col_2;
step++;
timer = setTimeout("change()", steps);
}
else {
clearTimeout(timer);
step = 1;
timer = setTimeout("translate_rgb()", pause);
}
}
translate_rgb();
</script>Пусть объем данного скрипта Вас не пугает, ведь главное какой красивый эффект получается в результате его использования. Для особо ленивых мы сделали данный скрипт в виде отдельного файла, который можно скачать по ссылке - gradient_fon.rar.
Если Вы скачали файл gradient_fon.js, то его необходимо подключить как внешний js файл следующим образом:
<script type="text/javascript" src="gradient_fon.js">
</script>Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.