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

Пример работы параллакс эффекта, можно посмотреть на моем блоге. Работа скрипта привязана к элементу "body" и он двигает фон в противоположную сторону движения мышки. (не актуально!)

Разместите представленный код ниже, перед закрывающемся тегом </head>:

<script type="text/javascript">
$(document).ready(function(e){
   var left = 0,
   top = 0,
   element = $('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);
      $(this).css({
          backgroundPosition: '-'+(0.2*left)+'px -'+(0.15*top)+'px'
          
      });
    });
});
</script>

Так же прошу обратить внимание, что многие другие javascript библиотеки, так же как и jQuery используют знак "$" как имя переменной или функции. Если скрипт выше не работает, у вас может подключена библиотека jQuery.noConflict. В которой знак "$" заменен на "jQuery", что бы не вызывать конфликта с другими библиотеками которые присутствуют на сайте.

В данном случае, попробуйте использовать кот ниже: 

<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: '-'+(0.2*left)+'px -'+(0.15*top)+'px'
          
      });
    });
});
</script>

 

Вот и все! :)

 

Комментарии   

+3 # Кик 20.07.2018 14:40
Ваще такой параллакс... без демо...
Ответить | Ответить с цитатой | Цитировать
-4 # Administrator 21.07.2018 14:20
Да. Пришлось убрать с сайта за ненадобностью.
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Защитный код
Обновить

Я рекомендую


Челябинская область

Мебель на заказ от производителя

В этот блок попасть не так просто. Я проверяю социальные сети, сайт и отзывы о компании.

Если у вас имеются вопросы по поводу работы сайта, сотрудничества и предложений, Вы можете написать на почту info@alexfine.ru

Я создал первую версию блога и введу его с 2015 года.

Копирование материалов сайта возможно только с указанием активной ссылки "www.alexfine.ru" в качестве источника.

Изображение кнопки наверх

Вконтакте
Вконтакте
Вконтакте
Вконтакте
Вконтакте
+