С каждым днем сайтов с эффектом параллакса становится все больше.
Красивый эффект трехмерности весьма эффектно выглядит, притягивая взор
посетителей своей оригинальностью идеи. Разновидностью данного эффекта
есть вертикальная прокрутка страницы или parallax scrolling, зачастую
такой эффект используется для всего одностраничного сайта. В данном
уроке мы рассмотрим как создать данный эффект с помощью которого можно
оформить шапку сайта. При желании изображения можно заменить на
необходимые, при этом вы получите уникальное оформление сайта.
ДЕМО (посмотреть)
ИСХОДНИК (скачать)
С помощью данного урока можно создать
отличный баннер своего сайта, который будет привлекательным на остальных
сайтах, без использования flash и gif анимации.
Шаг 1. HTML
Для начала мы рассмотрим простую разметку, в которой мы подключим изображения в формате png.
Код
<div id="parallax" class="clear">
<div class="parallax-layer" style="width:1200px; height:250px;">
<img src="images/grass.png" alt="" style="width:1200px; height:250px;"/>
</div>
<div class="parallax-layer" style="width:500px; height:250px;">
<img src="images/frog2.png" alt="" style="width:500px; height:250px;"/>
</div>
<div class="parallax-layer" style="width:1200px; height:300px;">
<img src="images/butterflies3.png" alt="" style="width:1200px; height:300px;"/>
</div>
</div>
После этого нам необходимо подключит скрипты, для этого размещаем скрипты между тегами head, при этом незабываем указывать правильный путь с библиотекам.
Код
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.jparallax.min.js"></script>
<script type="text/javascript" src="js/jquery.event.frame.js"></script>
Шаг 2. CSS
Стили достаточно просты, мы определим
некоторые параметры позиционирования контейнера, контуры, и некоторые
мелочи, следует заметить, что часть стилей мы используем исключительно
для демонстрации.
Код
#parallax-header {
height:200px; background-color:gray;
}
#parallax {
position:relative; overflow:hidden; width:950px; height:250px;
background-image:url('images/background.jpg');
}
.parallax-viewport {
position: relative;
overflow: hidden;
}
.parallax-layer {
position: absolute;
}
Шаг 3. jQuery
Для достижения эффекта параллакса мы будем использовать плагин jparrallax.js, его можно найти в исходниках, после того как его подключили в шаге
первом, его необходимо вызвать для нашего документа, делать это мы будем
с помощью следующей команды:
Код
<script type="text/javascript">
jQuery(document).ready(function()
{
$('#parallax .parallax-layer')
.parallax({
mouseport: $('#parallax')
};);
};);
</script>
Вот и все. данный эффект готов! Он отлично подойдет для оформления вашего сайта.
