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

В этом уроке мы покажем вам рецепт приготовления прикольного фона

Помимо стандартной библиотеки 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”);
});

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

Вот и всё!


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/fepk78cW4oM/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Прикольный jQuery эффект завиcающего фона | | 2012-06-19 12:07:19 | | Статьи Web-мастеру | | В этом уроке мы покажем вам рецепт приготовления прикольного фонаПомимо стандартной библиотеки jQuery, мы воспользуемся плагином jquet.pngfix: DD_belatedPNG.fix(’.png-fix’); Xhtml прост настолько, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: