Недавно понадобилось реализовать интересный эффект для одного сайта и заодно сделал его себе на блог. Нужно было, что бы задний фон двигался за курсором мышки и называется это - эффект параллакса. Работает он на библиотеке 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>
Вот и все! :)
RSS лента комментариев этой записи