9 122 Скрипты / Parallax

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

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

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

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:

Который нужно будет немного подправить. Во-первых, изменить высоту используемых двух фоновых изображений в пикселях (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.

Скачать 1664Загрузок 193,93 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи