Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

PFOLD - Разворачиваем изображение как бумагу

Урок есть и в видеоформате! Смотреть?

Экспериментальный jQuery плагин, который позволяет показывать увеличенное изображение или иной контент, открывая его так, будто перед нами раскрывается листок бумаги на котором присутствует данное изображение. Стиль разворачивания и количество шагов, можно настроить на понравившиеся.


    PFold является экспериментальным плагином jQuery, который позволяет открывать элементы документа, в виде раскладывающейся перед нами бумаги. Работать такое счастье может не только с изображениями, но и обычные блоки тоже пойдут. Идея заключается в том, чтобы создать несколько складывающихся уровней, и каждый шаг, будет увеличивать размер изображения в 2 раза, имитируя тем самым сложенный листок бумаги который был развёрнут.

    Для контроля над процессом, имеется пару опций, таких как направление разворота для каждого этапа трансформации и количество складок, т.е. слоёв образующих единое изображение при разворачивании.

    Для браузеров не поддерживающих 3D преобразования CSS, будут происходить простые переходы, тем самым появится такое же увеличенное изображение.

    HTML

    Используемая разметка, чрезвычайно проста:

<div id="uc-container" class="uc-container">
    <div class="uc-initial-content">
        <!--любой контент -->
    </div>
    <div class="uc-final-content">
        <!--  конец блока для любого контента -->
    </div>
</div>

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

    jQuery

    Для вызова плагина, используется простая строка

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

    Настройки

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

// Настройки
$.PFold.defaults = {
    // значение перспективы
    perspective : 1200,
 
    // скорость каждого этапа
    speed : 450,
 
    // фильтр смягчения эффекта разворачивания
    easing : 'linear',
 
    // задержка между каждым (un)последующим этапом (ms)
    folddelay : 0,
 
    // количество слоёв разворота, кол-ва шагов анимации
    folds : 2,
 
    // направление каждого шага при развороте
    folddirection : ['right','top'],
 
    // использование наложений, чтобы имитировать тени для каждого складной шаг
    overlays : true,
 
    // перемещение главного контейнера, для сохранения исходного положения
    centered : false,
 
  // позволяет указать различные скорости для контейнера перевода
  // values range : [0 - 1] 

  // если 0, то контейнер переходит непосредственно в конечное положение.
  // это верно, только если центру верно

  containerSpeedFactor : 1,
 // фильтр плавности для контейнера перехода
 // это верно, только если центру верно

    containerEasing : 'linear',

   // возвращаемые значения
    onEndFolding : function() { return false; },
    onEndUnfolding : function() { return false; }
};

    Вот 3 демонстрационных примера, которые помогут ознакомиться вам с необходимыми настройками:

  • Демо-1: 3 этапа, складки разворачиваются в направлениях влево, вниз и вправо;
  • Демо-2: 2 этапа, движение происходит  в разных направлениях, согласно родительского блока в котором находится элемент, т.е. позиции сетки.
  • Демо-3: похожая на демо 2 реализация, за исключением того, что позиционируются элементы на исходном положении миниатюры.

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 27.02.2013
Опубликовал: Сергей Кашурин
Просмотров: 514
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


BOOKBLOCK - плагин пролистывания контента
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.
100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
5 прекраснейших дизайнерских решений для ваших форм входа
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: