Очередной блог фрилансера

коротко и полезно о веб-разработке

Menu Close

Создаем заголовок, реагирующий на движения мыши

home

jParallax не представляет ничего нового для любителей jQuery. Но для тех, кто все еще не слышал о нем, далее небольшое описание.

jParallax вращает выделенные элементы, а также все его дочерние элементы, расположенные в абсолютно позиционированных слоях, в просматриваемой области. Эти слои двигаются вслед за движениями мыши, а также в зависимости от их размеров (и установок слоя), они могут перемещаться различными способами.

Далее, я покажу вам, как создать красивый заголовок, реагирующий на движения мыши. Мой сайт с портфолио использует этот трюк, так что вы сразу можете посмотреть результат.

Подключение JavaScript

<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/jquery.jparallax.js" type="text/javascript"></script>

HTML и CSS

Для установки небольшого окна, которое будет реагировать на движения мыши, нам понадобится блок, с id=parallax, шириной в 800 px. Изображения, которое вы ставите первым в списке, отправляется на задний план. Убедитесь, что ширина установлена правильно, поскольку слой, выходящий за пределы окна parallax, будет скрыт.

<div id="parallax">
<img style="width: 400px;" src="images/0.png" alt="" />
<img style="width: 500px;" src="images/1.png" alt="" />
<img style="width: 600px;" src="images/2.png" alt="" />
<img style="width: 550px;" src="images/3.png" alt="" />
</div>

CSS

#parallax
    {position:relative; overflow:hidden; width:800px; height:450px;border:none;
margin:0 auto 20px auto;}

Изображение 0

iland

Изображение 1

birds

Изображение 2

shar

Изображение 3

ship

JavaScript

jQuery(document).ready(function(){
jQuery('#parallax').();
});

Вот так выглядит результат, с настройками по умолчанию. Как видите, это немного странно.

Настройки Слоев

jQuery(’element’).jparallax(настройки, Слой_0_настройки, Слой_1_настройки, и т.д.);

Я отключила движения по оси Y, и разрешила перемещаться слою 0 (картинка 0) и слою 1 (картинка 1).

В результате мы получили красивый заголовок.

jQuery(document).ready(function(){
jQuery('#parallax').jparallax({yparallax:false},{xtravel: '100px'},{xtravel: '300px'});
});

Перевод статьи «Make Your Header Responses To Mouse Movements with jParallax«, автор Аlexandra Тong

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо - поделиться ссылкой в социальных сетях: