ВЕРТИКАЛЬНЫЙ РАЗДВИЖНОЙ АККОРДЕОН

+ -
0
ВЕРТИКАЛЬНЫЙ РАЗДВИЖНОЙ АККОРДЕОН


В этой уроке речь пойдет о вертикальном аккордеоне с возможностью слайдера реализованного конечно же на jQuery. Кусочек аккордеона расдвигается при клике и показывает дополнительную информацию, например текст, а другие кусочки станут прозрачнее и сожмутся. Переход к следующему слайду производится с помощью стрелочек или же колесиком мышки (плагин jQuery Mousewheel от Brandon Aaron).

Посмотрите на все примеры в Демо, всего их 5 штук.
1. По умолчанию - 3 видимых слайда
2. С эффектом easing
3. 5 видимых слайдов и высокая прозрачность
4. 2 видимых слайда и медленная анимация
5. Полноэкранный пример

Разметка HTML
Основная структура. Контейнер для аккордеона, span для навигации и контейнер wrapper для слайдов.
<div id="va-accordion" class="va-container">
    <div class="va-nav">
        <span class="va-nav-prev">Назад</span>
        <span class="va-nav-next">Вперед</span>
    </div>
    <div class="va-wrapper">
        <div class="va-slice va-slice-1">
            <h3 class="va-title">Маркетинг</h3>
            <div class="va-content">
                <p>Генри Ватсон</p>
                <ul>
                    <li><a href="#">О нас</a></li>
                    <li><a href="#">Портфолио</a></li>
                    <li><a href="#">Контакты</a></li>
                </ul>
            </div>
        </div>
        <div class="va-slice va-slice-2">
           ...
        </div>
          ...
    </div>
</div>


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

javascript
Давайте посмотрим на пример с 2 слайдами и низкой скоростью анимации:
$('#va-accordion').vaccordion({
    expandedHeight    : 350,
    animSpeed        : 400,
    animOpacity        : 0.7,
    visibleSlices    : 2
});


Доступны следующие опции:
// ширина аккордеона
accordionW        : 1000,
// высота аккордеона
accordionH        : 450,
// количество видимых слайдов
visibleSlices    : 3,
// высота открытого слайда
// не должна быь больше, чем accordionH
expandedHeight    : 350,
// скорость открытия / закрытия слайда
animSpeed        : 250,
// эффект easing открытия / закртыия слайда
animEasing        : 'jswing',
// значение прозрачности для свернутых слайдов
animOpacity        : 0.2,
// время исчезновения контента (информационной части)
contentAnimSpeed: 900,
// если установлено false,
// сворачиваются все открытые слайды
// перед пролистыванием
savePositions    : true


В этом примере используется полноэкранный режим для аккордеона по высоте и ширине окна.
$('#va-accordion').vaccordion({
    accordionW        : $(window).width(),
    accordionH        : $(window).height(),
    visibleSlices    : 5,
    expandedHeight    : 450,
    animOpacity        : 0.1,
    contentAnimSpeed: 100
});


Скачать исходник:

Похожие новости

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Комментариев 0