Делаем красивый эффект фона на jQuery
Недавно на просторах интернета, а именно на просторах стоков от Envato, я наткнулся на интересный эффект с фоном. Посмотреть живое демо можно пройдя по этой ссылке . Сегодня же я хочу написать не большой урок, как добитться такого эффекта, урок нацелен исключительно на новичков, так что умельци могу проходить мимо.
Шаг первый. Сырье
И так, давайте для начала подготовим все необходимое, у нас должен быть jQuery(либо подключаем с google api, что собственно и рекомендую всегда делать), а также две картинки для эффекта с фоном ( первая и вторая ), обе картинки я взял из ссылки, о которой писал в начале статьи.
Шаг второй. HTML и СSS
Теперь нам необходимо сверстать очень простую заготовку и написать для неё парочку стилей. Начнем с HTML, давайте в нем сразу подключим файл с CSS стилями(base.css):
<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:
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%; }
Думаю здесь понятно, что у нас получается двойной фон (так как обе картинки с альфа каналом), за счет вложенного контейнера
effect_box_inner
.
Теперь у нас есть готовые стили и сама страница, но пока наш контейнер(#effect_box), на котором должен быть эффект, статический. Давайте перейдем к активации эффекта.
Шаг третий. Оживление
Сначала подключаем jQuery c Google API, и описываем код, который придает нашему контейнеру красивой эффект фона. У главного контейнера мы будем перемещать фон по вертикале, для внутреннего по горизонтали, в итоге получается небольшой красивый эффект.
<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>
Получившийся эффект отлично работает в Google Chrome, Safari, Opera и в IE, а вот FireFox решил как всегда жутко тормозить. На этом думаю все, получился такой вот микро урок, и надеюсь материал кому-либо был интересен и познавателен. Естественно оставшиеся вопросы можно задать в комментариях :)
Уж не знаю, как должно быть но в моем FF 3.6.9 прекрасно выглядит
С очень давних времен FF имел свойство тупить при анимации (не всегда конечно же), у меня стоит FF 3.6.8. Что же, видимо начиная с 3.6.9 его научили правильно работать с анимацией :)
Добрый день! У меня что то ничего не получилось(( Подскажите куда надо вписывать кода в тему на wordpress!!!! Заранее спасибо !!!
Для боди и врапера сделать стили, как у меня #effect_box и #effect_box_inner, а в jQuery уже взаимодействовать с ними.
Не очень понятно как его сделать на 100 % по высоте, вроде в css ставлю но он просто исчезает, не подскажете ?? спасибо
Для начала надо BODY сделать высотой в 100% !
html { height: 100% } body { min-height: 100% } * html body { height: 100% }Для начала я сделал
html { height: 100% } body { min-height: 100% } * html body { height: 100% }
Что сделать для конца, чтобы фон был высотой не 300px а именно 100%
Спасиб.
Для #wrap и #effect_box поставить высоту (height) 100%!
Классный эффект, на своём сайте экспериментирую с ним^ ^
Помогите «правильно прикрутить» данный эффект на сайт где используется Joomla с Шаблоном…
В целом, не могу добиться правильного отображения… Получается либо: http://clip2net.com/s/1IzO3
(если делать согласно статьи) и вставлять в шаблон в следующий код:
(css естественно прописан, точнее код добавлен в существующий, подключаемый template.css)
http://clip2net.com/s/1IzTW
Помогите ;-)
1. Код который вы вставили вырезало, нужно код обрамлять bb-тегами.
2. Вам нужен весь свой шаблон обрамлять в блок с этим фоном.