Прокручивающийся произвольно фон

Постоянно прокручивающееся фоновое изображение.

XHTML и 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/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/pngFix.js"></script>
<script type="text/javascript">
  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);
}

javascript

Сам код, находящийся в файле 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.

СКАЧАТЬСкачек: 1329
193,93 Kb
Кто скачал?

ДЕМОПосмотреть
пример