ПРОКРУЧИВАЮЩИЙСЯ ПРОИЗВОЛЬНО ФОН


ПРОКРУЧИВАЮЩИЙСЯ ПРОИЗВОЛЬНО ФОН


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

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.

Скачать исходник:
background_scrolling_effect.rar


скрипт скрипт ПРОКРУЧИВАЮЩИЙСЯ ПРОИЗВОЛЬНО ФОН
Статистика
0  
Всего статей 1026
0  
Всего комментариев 57
0  
Пользователей 10
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация