Интересное

Проверено

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

Партнеры

Последние сообщения с форума

Название темы Автор Статистика Последнее сообщение
продажа аккаунтов разных сервисов

Тема в разделе: Услуги и сервисы ваших web-сайтов

Sdelkin

Просмотров: 179356

Ответов: 26

Автор: Sdelkin

3-02-2018, 18:55

хостинг от M-HOSTER

Тема в разделе: Хостинг

wmmax

Просмотров: 57627

Ответов: 0

Автор: wmmax

1-02-2018, 15:42

Комплексное продвижение (прогон) сайтов ру и en

Тема в разделе: Поисковая оптимизация

Kysovue

Просмотров: 142081

Ответов: 73

Автор: Kysovue

25-01-2018, 21:16

Special offer! SSD NVMe хостинг, Выделенный сервер и VPS SSD

Тема в разделе: Хостинг

iphoster

Просмотров: 61107

Ответов: 0

Автор: iphoster

10-11-2017, 22:56

продвижение сайтов, прогоны

Тема в разделе: Поисковая оптимизация

brig2

Просмотров: 77564

Ответов: 7

Автор: brig2

5-11-2017, 14:00

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



ИСХОДНИКИ


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‘ для вашего содержания.

Вот и всё!

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