Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами 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
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Оформление вашего форума :: [Архив] Оформление форума
Страница 1 из 1
Движение фона за мышкой
Нашла интересный эффект движения фона странички за мышкой, это можно применить и на наших страничках ...
Я бы хотела так сделать страницу Портала - http://www.rastapenatal.com.br/
Причем, это не во флеше сделано, а вот как?
Кто в этом понимает - посмотрите, плиЗ!!!
Я бы хотела так сделать страницу Портала - http://www.rastapenatal.com.br/
Причем, это не во флеше сделано, а вот как?
Кто в этом понимает - посмотрите, плиЗ!!!
Re: Движение фона за мышкой
Это называется эффект параллакса, вот только не знаю осуществим ли он.
Вот примеры <>
Вот примеры <>
Re: Движение фона за мышкой
ну вообще этот параллакс двигает не только фон, но и все подряд что находится в элементе. Сейчас я тебе свой параллакс на движение фона напишу
Re: Движение фона за мышкой
Распиши принцип, как его прикручивать к нужному элементу?
Будет ли работать в виджете (вроде бы должно?)
Будет ли работать в виджете (вроде бы должно?)
Re: Движение фона за мышкой
Вот держи:
Сейчас скрипт будет крутить фон всей страницы. Чтоб он работал на портале всунь его в шаблон portal_body или в любой виджет.
Чтобы скрипт крутил фон не всей страницы, а только определенного элемента нужнов скрипте найти (4 строка):
Например, если имеем на странице
Аналогично можно применить этот скрипт по классу. Например:
Или по тегу:
И для всех пользователей, дабы избежать лишних вопросов:
Будет работать на любой странице и на любом движке.
- Код:
<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'),
Например, если имеем на странице
- Код:
<div id="irbis">
Тут какой то контент
</div>
- Код:
element = jQuery('#irbis'),
Аналогично можно применить этот скрипт по классу. Например:
- Код:
element = jQuery('div.irbis'),
Или по тегу:
- Код:
element = jQuery('div'),
И для всех пользователей, дабы избежать лишних вопросов:
Будет работать на любой странице и на любом движке.
Re: Движение фона за мышкой
В общем смысл понятен, но объясните в подробностях как использовать скрипт и куда его вставить.
Re: Движение фона за мышкой
Спасибо, Ирбис!
Вечером сделаю пробный вариант и возможно будут еще вопросы ...
Вечером сделаю пробный вариант и возможно будут еще вопросы ...
Re: Движение фона за мышкой
Если хотим, чтобы прокручивался фон всей страницы, то просто копируете скрипт и вставляете к себе на форум, в любой из шаблонов или виджетов.Альберт Вескер пишет:В общем смысл понятен, но объясните в подробностях как использовать скрипт и куда его вставить.
Если хотим, крутить фон определенного элемента, то вешаем на него идентификатор (если его еще нет конечно) и правим строчку
- Код:
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>
- Код:
<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'),
Что-то Остапа понесло целую петицию накатал. В общем об идентификаторах, если будет желание расширить свои знания можно почитать в любом учебнике по CSS.
Re: Движение фона за мышкой
Сделал все как в описании получил
Добавил в шаблоне overall_header (Верхняя часть страницы) id
И нечего не происходит. bunBB адрес форума http://atlantes.all-up.com
- Код:
<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
Re: Движение фона за мышкой
Тег <img> не поддерживает свойство background. То есть под изображение нельзя класть фон
Re: Движение фона за мышкой
Не вчитывался в тему...но
Добавил в шаблоне 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>
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Оформление вашего форума :: [Архив] Оформление форума
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения