Прикольный 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>
<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>
<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‘ для вашего содержания.
Вот и всё!