Делаем красивый эффект фона на jQuery
Недавно на просторах интернета, я наткнулся на интересный эффект с фоном. Посмотреть живое демо можно пройдя ссылке ниже. Сегодня же я хочу написать не большой урок, как добиться такого эффекта, урок нацелен исключительно на новичков, так что умельцы могу проходить мимо.
Шаг первый. Сырье
И так, давайте для начала подготовим все необходимое, у нас должен быть jQuery(либо подключаем с google api, что собственно и рекомендую всегда делать), а также две картинки для эффекта с фоном.
первая
вторая
Шаг второй. HTML и СSS
Теперь нам необходимо сверстать очень простую заготовку и написать для неё парочку стилей. Начнем с HTML, давайте в нем сразу подключим файл с CSS стилями(base.css):
Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQuery Background Effect</title>
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<body>
<div id="wrap">
<div id="effect_box">
<div id="effect_box_inner"></div>
</div>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQuery Background Effect</title>
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<body>
<div id="wrap">
<div id="effect_box">
<div id="effect_box_inner"></div>
</div>
</div>
</body>
</html>
В след за HTML страницей, описываем, приведенные ниже в коде, стили в файле base.css:
Code
body { padding: 0; margin: 0; font-size: 13px; font-family: Tahoma; }
#wrap { width: 100%; margin: 200px auto; }
#effect_box { background: #369 url('lowerBokeh.png') 0px 0px repeat; height: 300px; }
#effect_box_inner { background: url('upperBokeh.png') 0px 0px repeat; height: 100%; }
#wrap { width: 100%; margin: 200px auto; }
#effect_box { background: #369 url('lowerBokeh.png') 0px 0px repeat; height: 300px; }
#effect_box_inner { background: url('upperBokeh.png') 0px 0px repeat; height: 100%; }
Думаю здесь понятно, что у нас получается двойной фон (так как обе картинки с альфа каналом), за счет вложенного контейнера effect_box_inner.
Теперь у нас есть готовые стили и сама страница, но пока наш контейнер(#effect_box), на котором должен быть эффект, статический. Давайте перейдем к активации эффекта.
Шаг третий. Оживление
Сначала подключаем jQuery c Google API, и описываем код, который придает нашему контейнеру красивой эффект фона. У главного контейнера мы будем перемещать фон по вертикале, для внутреннего по горизонтали, в итоге получается небольшой красивый эффект.
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document.body).ready(function()
{
var current_x = 0;
var current_y = 0;
setInterval(function()
{
$('#effect_box').animate({'background-position': '0 ' + --current_y + 'px'}, 30);
$('#effect_box_inner').animate({'background-position': --current_x + 'px 0'}, 30);
}, 60);
});
</script>
<script type="text/javascript">
$(document.body).ready(function()
{
var current_x = 0;
var current_y = 0;
setInterval(function()
{
$('#effect_box').animate({'background-position': '0 ' + --current_y + 'px'}, 30);
$('#effect_box_inner').animate({'background-position': --current_x + 'px 0'}, 30);
}, 60);
});
</script>
Получившийся эффект отлично работает в Google Chrome, Safari, Opera и в IE, а вот FireFox решил как всегда жутко тормозить. На этом думаю все, получился такой вот микро урок, и надеюсь материал кому-либо был интересен и познавателен. Естественно оставшиеся вопросы можно задать в комментариях
-
FalleN -
7284 -
1 -
0
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...