• Страница 1 из 1
  • 1
Движущийся фон сайта
Erya Оффлайн
Проверенный
0
Дата: Вторник, 2015-12-22, 05:52 | Сообщение # 1
Всем привет!

С недавнего времени стал большим фаном этого сайта (Спасибо админы за Вашу работу!)))...И вот решил поспрашивать у знающих людей советов и подсказок по Юкозу!

Как-то на одном из сайтов видел такую фичу...При движении курсором мыши по сайту одновременно двигается изображение фона сайта, выглядит очень круто! Т.е. изображение фона сайта закреплено,а сам контет листается вверх и вниз какобычно, но параллельно с движением курсора мыши например влево, картинка фона сайта движется плавно вправо (не много пикселей на 5-10) и наоборот.

Может кто-то встречал какой нить скрипт или знает решение такой фишки...Был бы очень рад увидеть Ваши ответы!

Спасибо!


Сообщение отредактировал Erya - Вторник, 2015-12-22, 05:56
Профиль
admin Оффлайн
Проверенный
429
Дата: Вторник, 2015-12-22, 10:14 | Сообщение # 2
Этот эффект называется параллакс, ищи скрипты такие.

Помог? Ставь или поддержи проект.
Профиль
Erya Оффлайн
Проверенный
0
Дата: Вторник, 2015-12-22, 19:47 | Сообщение # 3
Цитата admin ()
Этот эффект называется параллакс, ищи скрипты такие.


Спасибо, нашел, то что мне нужно...Есть лишь один маленький нюанс))

Вот сам скрипт:
Код
<script type="text/javascript">
$(document).ready(function() {
    $('*').mousemove(function(e){
   // Вычисляем ширину блока HTML
  var hw = $('html').width();
   // Вычисляем позицию курсора в пикселях относительно центра
  var x = hw/2 - e.pageX;
   // В зависимости от уровня и ширины изображения вычисляем точку его позиционирования по оси X
  var bodybgPosX = (hw - 1940)/2;
  var lvl0bgPosX = (hw - 1082)/2;
  var lvl1bgPosX = (hw - 1500)/2;
   // Используя делитель добиваемся разной скорости движения фона уровней
  $('body').css('background-position', bodybgPosX+(x/120)+'px 0%');
  $('.wrapper-level-0').css('background-position', lvl0bgPosX-(x/40)+'px 3%');
  $('.wrapper-level-1').css('background-position', lvl1bgPosX+(x/30)+'px 3%');
    });
});
</script>


Он двигает фон только в горизонтальном направлении...Кто силен в скриптах, подскажите, что дописать чтобы он работал и по горизонтали и по вертикали ???

Спасибо!
Профиль
Montegor Оффлайн
Проверенный
15
Дата: Вторник, 2015-12-22, 20:48 | Сообщение # 4
Подстрой под себя

Профиль
Erya Оффлайн
Проверенный
0
Дата: Четверг, 2015-12-24, 02:07 | Сообщение # 5
Цитата
Подстрой под себя


Спасибо за ответ!
Но к сожалению...была попытка установить данный код...Результат не оправдал моих ожиданий, он не заработал, нужно было сидеть копаться, искать причину. Плюс сам код объемный, сильно много скриптов и стилей подключать нужно для установки ((. Мой код представленный выше, в разы меньше и к тому же выполняет нужную мне функцию, но к сожалению пока в горизонтальном направлении.

На сайте Автора написано - "В качестве примера будем изучать только горизонтальный эффект параллакса. Ну а если голова работает в нужном направлении, то добавить вертикальный эффект не составит труда."

Видимо у меня все же голова не в том направлении работает ))) Поэтому вопрос по поводу решения верикальной прокрутки фона, остается актуальным)))


Сообщение отредактировал Erya - Четверг, 2015-12-24, 02:08
Профиль
  • Страница 1 из 1
  • 1
Поиск: