Движение фона за мышкой

Нашла интересный эффект движения фона странички за мышкой, это можно применить и на наших страничках ...
Я бы хотела так сделать страницу Портала - http://www.rastapenatal.com.br/
Причем, это не во флеше сделано, а вот как?
Кто в этом понимает - посмотрите, плиЗ!!!

Это называется эффект параллакса, вот только не знаю осуществим ли он.
Вот примеры <>

Спроси в гугле "jQuery parallax"
_
Уже без меня подсказали

А как???
прикрутить-то поняли?

ну вообще этот параллакс двигает не только фон, но и все подряд что находится в элементе. Сейчас я тебе свой параллакс на движение фона напишу

Распиши принцип, как его прикручивать к нужному элементу?
Будет ли работать в виджете (вроде бы должно?)

Вот держи:

Код:

<script type="text/javascript">
jQuery(document).ready(function(e){
   var left = 0,
   top = 0,
   element = jQuery('body'),
   offset =  { left: element.offset().left, top: element.offset().top };
   element.bind('mousemove', function(e){
      left = (e.pageX-offset.left);
      top = (e.pageY-offset.top);
      jQuery(this).css({backgroundPosition   : '-'+(1.5*left)+'px -'+(1.15*top)+'px'});
});
});
</script>

Как использовать:
Сейчас скрипт будет крутить фон всей страницы. Чтоб он работал на портале всунь его в шаблон portal_body или в любой виджет.
Чтобы скрипт крутил фон не всей страницы, а только определенного элемента нужнов скрипте найти (4 строка):

Код:

element = jQuery('body'),

И заменить body на идентификатор нужного элемента.
Например, если имеем на странице

Код:

<div id="irbis">
  Тут какой то контент
</div>

то в скрипте надо написать

Код:

element = jQuery('#irbis'),

Обрати внимание, что идентификатор нужно предварять диезом (#) как в CSS.
Аналогично можно применить этот скрипт по классу. Например:

Код:

element = jQuery('div.irbis'),

Эффект применится ко всем div'ам с классом irbis.
Или по тегу:

Код:

element = jQuery('div'),

Эффект будет у всех div'ов на странице.
И для всех пользователей, дабы избежать лишних вопросов:
Будет работать на любой странице и на любом движке.

В общем смысл понятен, но объясните в подробностях как использовать скрипт и куда его вставить.

Спасибо, Ирбис!
Вечером сделаю пробный вариант и возможно будут еще вопросы ...

Альберт Вескер пишет:В общем смысл понятен, но объясните в подробностях как использовать скрипт и куда его вставить.

Если хотим, чтобы прокручивался фон всей страницы, то просто копируете скрипт и вставляете к себе на форум, в любой из шаблонов или виджетов.
Если хотим, крутить фон определенного элемента, то вешаем на него идентификатор (если его еще нет конечно) и правим строчку

Код:

element = jQuery('body'),

Например в приветствии на главной имеем такую таблицу:

Код:

<table style="width: 100%; background: url('http://r18.imgfast.net/users/1814/20/07/54/avatars/1425-71.jpg');">
  <tr>
      <td> Превед медвед! </td>
  </tr>
</table>

И хотим, чтобы фоновая картинка этой таблицы крутилась, когда над ней проводишь мышью. Значит сначала вешаем на нашу таблицу любой идентификатор состоящий из латинских букв и цифр (идентификатор не должен начинаться с цифры. То есть 2irbis - не правильно, а irbis2 или ir2bis - верно. И идентификатор должен быть уникальным, то есть не должно быть два элемента на странице с одинаковыми идентификаторами, даже если используются разные теги). Присваивается идентификатор элементу при помощи атрибута id. То есть так:

Код:

<table style="width: 100%; background: url('http://r18.imgfast.net/users/1814/20/07/54/avatars/1425-71.jpg');" id="ScrollTable">

И теперь в скрипте заменяем:

Код:

element = jQuery('body'),

на

Код:

element = jQuery('#ScrollTable'),

Как я и писал выше в синтаксисе jQuery как и в CSS идентификатор предваряется #.
Что-то Остапа понесло целую петицию накатал. В общем об идентификаторах, если будет желание расширить свои знания можно почитать в любом учебнике по CSS.

Сделал все как в описании получил

Код:

<script type="text/javascript">
jQuery(document).ready(function(e){
  var left = 0,
  top = 0,
  element = jQuery('#my-logo'),
  offset =  { left: element.offset().left, top: element.offset().top };
  element.bind('mousemove', function(e){
      left = (e.pageX-offset.left);
      top = (e.pageY-offset.top);
      jQuery(this).css({backgroundPosition  : '-'+(1.5*left)+'px -'+(1.15*top)+'px'});
});
});
</script>

Добавил в шаблоне overall_header (Верхняя часть страницы) id

Код:


<img src="{LOGO}" alt="{L_INDEX}" id="my-logo" />

И нечего не происходит. bunBB адрес форума http://atlantes.all-up.com

Тег <img> не поддерживает свойство background. То есть под изображение нельзя класть фон

Не вчитывался в тему...но

Добавил в шаблоне overall_header (Верхняя часть страницы) id
<img src="{LOGO}" alt="{L_INDEX}" id="my-logo" />

Тег <img> не поддерживает свойство background. То есть под изображение нельзя класть фон

Попробуйте так:

Код:

<div id="my-logo" alt="{L_INDEX}" style="background-image: url({LOGO});"><div>

Возможно понадобится указание размеров.