Прокручивающийся произвольно фон
Постоянно прокручивающееся фоновое изображение.
HTML и CSS
В начале подключаем, как обычно, последнюю версию библиотеки jQuery. Далее подключаем файл custom.js обеспечивающий прокрутку фона. И при желании, подключаем фикс pngFix.js исправляющий ошибку прозрачности в браузерах ie5.5/6.
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/jаvascript" src="js/custom.js"></script>
<script type="text/jаvascript" src="js/pngFix.js"></script>
<script type="text/jаvascript">
DD_belatedPNG.fix('.png-fix');
</script>
</head>В XHTML используется всего два DIV-а, содержимое которых можно изменять.
<body>
<div id=“container”>
<div id=“overlay”>
<span class="red">Контент,который можно изменить.</span>
</div>
</div>
</body>Применяем следующие CSS стили для наших DIV-ов
#container {
background:url(../images/gradient.jpg);
position:relative;
width:899px;
height:358px;
}
#overlay {
position:absolute;
top:0;
left;0;
width:899px;
height:358px;
background:url(../images/overlay.png);
}JS
Сам код, находящийся в файле custom.js:
$(function() {
// Define the height of your two background images.
//The image to scroll
var backgroundheight = 2000;
//The image to overlay
var backgroundheight_two = 1000;
// Create a random offset for both images’ starting positions
offset = Math.round(Math.floor(Math.random()* 2001));
offset2 = Math.round(Math.floor(Math.random()* 1001));
function scrollbackground() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight – 1) : offset – 1;
// Put the background onto the div
$('#container').css('background-position', '50%' + offset + 'px');
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground();
},100
);
}
// Initiate the scroll
scrollbackground();
// Use the offset defined earlier and apply it to the div.
$('#overlay').css('background-position', '50%' + offset2 + 'px');<br>
});Который нужно будет немного подправить. Во-первых, изменить высоту используемых двух фоновых изображений в пикселях (2000 и 1000):
var backgroundheight = 2000;
var backgroundheight_two = 1000;Во-вторых, к значениям высоты прибавить 1, чтобы рандомизировать исходное положение фона, и изменить переменные:
offset = Math.round(Math.floor(Math.random()* 2001));
offset2 = Math.round(Math.floor(Math.random()* 1001));Также можно изменить скорость прокрутки фоновых изображении, но значение 100, используемое по умолчание, по моему оптимально.
И наконец, изменить идентификаторы DIV #container и #overlay - если будете использовать другие ID.
