Сегодня наткнулся на один сайт, фон которого скроллится при ресайзе окна браузера, прикольно, ничего не скажешь, но этого мне было мало. Поэтому, захотелось сделать так, что бы фон скроллился постоянно безо всяких гифов и флешей. Включил свою любимую музыку и… вуаля! :)
То, что я здесь накатал использует jQuery, и писалось это очень быстро. Поэтому, сильно не пинайте :)
Где это можно применить? Ну уж точно не на всём сайте, но для открытки либо странички-визитки\презентации — я считаю, самое оно :)
1. HTML
Рисунков у нас всего три, поэтому, для первого рисунка у нас есть body, для двух остальных мы создаём два дива и тут же их закрываем. Но, так как эти два дива будут просто офигеть какими большими, мы их помещаем в ещё один див:
<div id="overflow">
<div id="midground"></div>
<div id="foreground"></div>
</div>
Само собой, для контента у нас есть отдельный див:
<div id="content">
<!-- content goes here -->
</div>
2. CSS
Теперь приступик с стилям.
мы вставили для того, чтобы обрезать ненужную часть и вместе с этим скрыть нижний скролл.
#overflow { width: 100%; overflow: hidden; height: 500px; position: absolute; }
Далее, собственно, рисуем эти два оставшиеся рисунка :
#midground {
background: transparent url(bg-mid.png) left top repeat-x;
margin: 0; padding: 0; width: 1000%;
position: absolute; top: 0;
height: 600px;
z-index: 1;
}
#foreground {
background: transparent url(bg-front.png) left top repeat-x;
margin: 0; padding: 0; width: 1000%; height: 200px;
position: absolute; top: 0; left: -9000px;
z-index: 2;
}
3. jQuery
Думаю как подключать скрипты к страницам объяснять не нужно, поэтому я этот пункт упущу и перейду сразу к коду :
init.js: $(document).ready(function() {
$('#midground').animate({left: "-=9000px"}, { easing: "linear", duration:120000 });
$('#foreground').animate({left: "+=9000px"}, { easing: "linear", duration:120000 });
});
И теперь объясню что это, для тех, кто не в курсе.
1. $(document).ready — выполняется как только html/js полностью загружены.
2. $() - это селектор в jQuery, в качестве параметра он принимает css-селекторы и xpath
3. $.animate() - стандартная функция, принимает в себя параметры css и тип визуализации(easing)
4. $.animate({left: "+=9000px"}) - здесь я двигаю заданный див на заданное кол-во пикселей вправо. Во второй строке - влево.
5. {easing: "linear", duration: 120000} - тип анимации(easing) явно указали "linear", то есть, линейным, т.к. в jQuery по умолчанию стоит "swing". Он в данном случае не устраивает т.к. после начала анимации оно сперва разгоняется и уже только потом набирает нормальную скорость. duration: 120000 - думаю, self-explanatory, указано в миллисекундах.
6. Да, анимация будет не бесконечна - крутиться оно будет две минуты, этого должно быть достаточно успеть перейти на другую страницу :)
Хорошо, хорошо, умник, покажи нам рабочий пример.
Пожалуйста! :)
Проверено в : Firefox 2, Opera 9.26, Internet Explorer 7, Safari 3.0.4.
IE 6 не проверял не работает , но в нём такой эффект лучше явно отключить - думаю, будет тормозить :)
