| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Параллакс слайдер на jQuery
|
|
Параллакс слайдер на jQuery
Слайдер с эффектом параллакса, добавляющим глубины, объемности при листании изображений.
Основной контейнер pxs_container содержит три подблока:
В первом pxs_bg содержаться ещё три DIV выполняющих роль трех различных прозрачных фоновых изображений, создающих как раз эффект объемности общей картины при листании слайдов. Во втором загрузчик и в третьем содержаться сами изображения, их миниатюры и стрелки навигации.
JAVASCRIPT
Незабываем подключать jQuery библиотеку.
Основная идея в том, чтобы при анимации смены слайдов изменялся и фон слайдера, что позволит обеспечить эффект параллакса. Например, при нажатии на стрелку, для смены слайда, у нас анимируется значение свойства left для элемента ul на ширину li элемента. Анимируются также и фоновые изображения, причем самое ближайшее сдвинется на половину ширины экрана, чуть подальше на четверть, а еще дальше на одну восьмую. Это главный принцип параллакс эффекта.
Ширина основного контейнера будет 100%, то есть на всю страницу. Позиционирование у нас будет относительное. Оболочка .pxs_bg для трех DIV-ов содержащих фоны, будет содержать фон ввиде градиентного изображения, что значительно улучшит внешний вид. Каждый из трех DIV будет иметь своё фоновое изображение (ширина будет изменяться динамически с помощью javascript)
Листинг
<div id="pxs_container" class="pxs_container">
<div class="pxs_bg">
<div class="pxs_bg1"></div>
<div class="pxs_bg2"></div>
<div class="pxs_bg3"></div>
</div>
<div class="pxs_loading">Загружаем изображения...</div>
<div class="pxs_slider_wrapper">
<ul class="pxs_slider">
<li><img src="/image/001img.jpg" alt="Первое изображение"></li>
<li><img src="/image/002img.jpg" alt="Второе изображение"></li>
<li><img src="/image/003img.jpg" alt="Третье изображение"></li>
<li><img src="/image/004img.jpg" alt="Четвертое изображение"></li>
<li><img src="/image/005img.jpg" alt="Пятое изображение"></li>
<li><img src="/image/006img.jpg" alt="Шестое изображение"></li>
</ul>
<div class="pxs_navigation">
<span class="pxs_next"></span>
<span class="pxs_prev"></span>
</div>
<ul class="pxs_thumbnails">
<li><img src="/image/img001.jpg" alt="Первое изображение"></li>
<li><img src="/image/img002.jpg" alt="Второе изображение"></li>
<li><img src="/image/img003.jpg" alt="Третье изображение"></li>
<li><img src="/image/img004.jpg" alt="Четвертое изображение"></li>
<li><img src="/image/img005.jpg" alt="Пятое изображение"></li>
<li><img src="/image/img006.jpg" alt="Шестое изображение"></li>
</ul>
</div>
</div>
После того, как загрузятся все изображения, то оболочка будет показана вместе с изображениями. У нас будет длинный список всех элементов li с шириной всего окна. Мы видим на экране слайдер, но на самом деле это один элемент li. Ширина элемента ul будет формироваться динамически, исходя из совокупной ширины всех li элементов. Свойство float:left для всех li, гарантирует, что все li элементы будут идти друг за другом. За счет прозрачной границы (transparent) получим эффект стекла вокруг изображения.
Основной код CSS
Предпросмотр
Скачать
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
