Проверено

VDS-хостинг - именно на этом хостинге работает наш сайт.
Sape - биржа временных ссылок, доход 80р/день.
Trustlink - биржа временных ссылок, доход 60р/день.
Telderi - здесь покупаю сайты для дальнейшего заработка.

Партнеры

Прикольный jQuery эффект завиcающего фона



ИСХОДНИКИ
Прикреплённые файлы:
Файл: demo4.zip
Размер: [220,64 Kb] (забрали: 16 раз)


XHTML & CSS

Помимо стандартной библиотеки jQuery, мы воспользуемся плагином jquet.pngfix:

<head>
    <link rel=“stylesheet” type=“text/css” media=“screen” href=“css/style.css” />

    <script type=“text/javascript” src=“js/jquery-1.3.2.min.js”></script>
    <script type=“text/javascript” src=“js/custom.js”></script>
    <script type=“text/javascript” src=“js/jquery.pngfix.js”></script>
    <script>
      DD_belatedPNG.fix(’.png-fix’);
    </script>
</head>


Xhtml прост настолько, насколько это возможно. Вы можете добавить тот контент, который вам нужен. Правила формирования контента не должны расходиться со следующим примером:

<body>
   <div id=“box”>
      <div id=“overlay”>
          <span class="red">You can add further content on top of your design into these divs here.</span>
      </div>
   </div>

</body>


Теперь давайте немного оформим то, что у нас есть. Для того чтобы всё было пучком, нам необходимо указать ширину и высоту контейнера и элемента.

#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);
}


Ну и скрипт…

$(function() {
// Определяем высоту фонового изображения.
var backgroundheight = 2000;
var backgroundheight_two = 1000;
        offset = Math.round(Math.floor(Math.random()* 2001));
        offset2 = Math.round(Math.floor(Math.random()* 1001));
function scrollbackground() {
     offset = (offset < 1) ? offset + (backgroundheight – 1) : offset – 1;
  // Применяем фон к блоку div
     $(’#container’).css(“background-position”, “50% “ + offset + “px”);
     setTimeout(function() {
   scrollbackground();
   },100
  );
    }
scrollbackground();
     $(’#overlay’).css(“background-position”, “50% “ + offset2 + “px”);<br>
});


Это содержание файла custom.js. Во-первых, нам надо указать высоту изображения, инициализировав переменную ‘backgroundheight’. Вставьте эти числа, чтобы создать рандомизированную стартовую позицию для обоих изображений вместо ‘2001’ и ‘1001’ выше.стартовую позицию для обоих изображений вместо ‘2001’ и ‘1001’ выше. Вы можете изменить скорость зависания, изменяя значение ‘100’. Наконец измените ‘#content‘ и ‘#overlay‘ для вашего содержания.

Вот и всё!

Другие новости по теме: