Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

Движение фона за мышкой Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

Движение фона за мышкой Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях
Важная информация!

Правила форума

для обязательного прочтения!

Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

Последние темы
» Проблема с метатегом Description
автор VeraLV Вчера в 15:31

» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 Март 14th 2024, 11:43

» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37

» Новое: Откройте для себя функцию "Подписка на пользователей"
автор лексей2222 Март 1st 2024, 17:26

» 301 редирект
автор Dana Domirani Февраль 25th 2024, 18:28

» Помощь в нескольких вопросах по форуму
автор лексей2222 Февраль 22nd 2024, 13:21

» [Общая тема] Что делать, если вы забыли / потеряли пароль
автор Dana Domirani Февраль 14th 2024, 00:54

» Загрузка форума
автор лисенок Февраль 13th 2024, 01:09

» 2x2 форум
автор лексей2222 Февраль 12th 2024, 14:47

» сколько сообщений в теме
автор лексей2222 Февраль 10th 2024, 07:24

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

Участников: 5

Перейти вниз

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

Сообщение автор Sunnyta Май 17th 2011, 18:14

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

Сообщения : 1577
Регистрация : 2008-03-20
Благодарности : 63

Без предупреждений

http://www.sun-place.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Альберт Вескер Май 17th 2011, 19:33

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

Мужчина

Сообщения : 683
Возраст : 33
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

Вернуться к началу Перейти вниз

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

Сообщение автор Irbis Май 17th 2011, 19:53

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

Мужчина

Сообщения : 581
Возраст : 37
Регистрация : 2008-02-10
Благодарности : 217

Без предупреждений

https://help.forum2x2.ru/u849

Вернуться к началу Перейти вниз

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

Сообщение автор Sunnyta Май 17th 2011, 21:14

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

Сообщения : 1577
Регистрация : 2008-03-20
Благодарности : 63

Без предупреждений

http://www.sun-place.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Irbis Май 18th 2011, 08:12

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

Мужчина

Сообщения : 581
Возраст : 37
Регистрация : 2008-02-10
Благодарности : 217

Без предупреждений

https://help.forum2x2.ru/u849

Вернуться к началу Перейти вниз

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

Сообщение автор Sunnyta Май 18th 2011, 09:52

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

Сообщения : 1577
Регистрация : 2008-03-20
Благодарности : 63

Без предупреждений

http://www.sun-place.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Irbis Май 18th 2011, 11:22

Вот держи:
Код:
<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'ов на странице.
И для всех пользователей, дабы избежать лишних вопросов:
Будет работать на любой странице и на любом движке.
Irbis
Irbis
 

Мужчина

Сообщения : 581
Возраст : 37
Регистрация : 2008-02-10
Благодарности : 217

Без предупреждений

https://help.forum2x2.ru/u849

Вернуться к началу Перейти вниз

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

Сообщение автор Альберт Вескер Май 18th 2011, 11:50

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

Мужчина

Сообщения : 683
Возраст : 33
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

Вернуться к началу Перейти вниз

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

Сообщение автор Sunnyta Май 18th 2011, 12:15

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

Сообщения : 1577
Регистрация : 2008-03-20
Благодарности : 63

Без предупреждений

http://www.sun-place.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Irbis Май 19th 2011, 07:09

Альберт Вескер пишет:В общем смысл понятен, но объясните в подробностях как использовать скрипт и куда его вставить.
Если хотим, чтобы прокручивался фон всей страницы, то просто копируете скрипт и вставляете к себе на форум, в любой из шаблонов или виджетов.
Если хотим, крутить фон определенного элемента, то вешаем на него идентификатор (если его еще нет конечно) и правим строчку
Код:
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 идентификатор предваряется #.
Что-то Остапа понесло biggrin целую петицию накатал. В общем об идентификаторах, если будет желание расширить свои знания можно почитать в любом учебнике по CSS.
Irbis
Irbis
 

Мужчина

Сообщения : 581
Возраст : 37
Регистрация : 2008-02-10
Благодарности : 217

Без предупреждений

https://help.forum2x2.ru/u849

Вернуться к началу Перейти вниз

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

Сообщение автор Allankarra Май 28th 2011, 22:13

Сделал все как в описании получил
Код:
<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
avatar
Allankarra
 

Сообщения : 100
Возраст : 33
Регистрация : 2010-12-10
Благодарности : 2

Без предупреждений

http://atlantess.the-up.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Irbis Июнь 7th 2011, 13:08

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

Мужчина

Сообщения : 581
Возраст : 37
Регистрация : 2008-02-10
Благодарности : 217

Без предупреждений

https://help.forum2x2.ru/u849

Вернуться к началу Перейти вниз

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

Сообщение автор gorezcaid Июнь 7th 2011, 13:36

Не вчитывался в тему...но
Добавил в шаблоне 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>
Возможно понадобится указание размеров.
gorezcaid
gorezcaid
 

Мужчина

Сообщения : 1806
Возраст : 80
Регистрация : 2010-08-18
Благодарности : 783

Без предупреждений

http://gorezcaid.forumbook.ru/

Вернуться к началу Перейти вниз

Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения