Эффект разворачивающейся бумаги

PFold - экспериментальный плагин jQuery, который формирует эффект разворачивающейся бумаги при открытии элементов. Элементы разворачиваются в 3D для вывода дополнительного содержания. Идея заключается в организации нескольких слоев свертки, на каждом шаге размер элемента удваивается, что имитирует разворачивание бумаги.

Доступны несколько опции для настройки. Например, можно определять направление разворачивания для каждого шага и количество шагов.

Для браузеров, которые не поддерживают 3D трансформации просто проявляется вложенное содержание.

Для использования плагина применяется следующая структура разметки:

<div id="uc-container" class="uc-container">
    <div class="uc-initial-content">
        <!-- Начальное содержание -->
    </div>
    <div class="uc-final-content">
        <!-- Развернутое содержание -->
    </div>
</div>

Размер развернутого содержания зависит от размера начального содержания (определяется в CSS), направлений разворотов и количества шагов. Например, начальный элемент шириной и высотой 200px, разворачивающийся вниз и влево за два шага образует развернутую область размером 400х400px

Плагин вызывается следующим образом:

$( '#uc-container' ).pfold();

 

Доступны следующие опции:

// Опции
$.PFold.defaults = {
    // Значение перспективы
    perspective : 1200,
 
    // Скорость разворачивания каждого шага
    speed : 450,
 
    // Функция разворачивания каждого шага
    easing : 'linear',
 
    // Задержка между шагами (мс)
    folddelay : 0,
 
    // Количество шагов разворачивания
    folds : 2,
 
    // Направление разворачивания
    folddirection : ['right','top'],
 
    // Использование слоя для имитации тени для каждого шага разворачивания
    overlays : true,
 
    // Перемещение основного контейнера для сохранения исходной позиции
    centered : false,
 
    // Можно определить другую скорость для перемещения контейнера
    // Диапазон: [0 - 1] 
    // Если 0, то контейнер мгновенно перемещается в конечное положение.
    // Используется совместно с опцией centered:true
    containerSpeedFactor : 1,
 
    // Функция перехода для перемещения контейнера
    // Используется совместно с опцией centered:true
    containerEasing : 'linear',
 
    // Возвратные функции
    onEndFolding : function() { return false; },
    onEndUnfolding : function() { return false; }
};

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/cvQ2QiuV3ZY/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Эффект разворачивающейся бумаги | | 2012-10-20 02:56:17 | | Статьи Web-мастеру | | PFold - экспериментальный плагин jQuery, который формирует эффект разворачивающейся бумаги при открытии элементов. Элементы разворачиваются в 3D для вывода дополнительного содержания. Идея | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: