Полноэкранный трехмерный эффект для изображений (CSS3+jQuery)

Сегодня мы хотим поделиться с вами очередным экспериментом, в котором примет участие свойство CSS – 3D Transform. Идея заключается в том, чтобы отобразить полноэкранную версию изображения путем вращения двух блоков в трехмерном пространстве. Торцы блоков будут вращаться к переднему плану, и впоследствии представят собой изображение на весь экран.

Учтите, что для правильного отображения эффекта, браузер должен поддерживать современные свойства CSS3 (на данный момент лучше всего подойдут Chrome и Safari).

Вы можете ознакомиться с видео данного эффекта здесь: http://www.screenr.com/Onls

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

Использованные в примере изображения предоставлены Jeeheon. Распространяются под лицензионным соглашением Attribution 2.0 Generic (CC BY 2.0).

Как это действует

В нашем небольшом эксперименте, мы добавим изображения в оболочку с заданным классом fd-wrapper:

HTML

<div id="fd-wrapper" class="fd-wrapper">
    <img src="images/medium/1.jpg" data-bgimg="images/large/1.jpg" alt="image01" title="Love Will Tear Us Apart" />
    <img src="images/medium/2.jpg" data-bgimg="images/large/2.jpg" alt="image02" title="Just Can't Get Enough" />
    <img src="images/medium/3.jpg" data-bgimg="images/large/3.jpg" alt="image03" title="In a Manner of Speaking" />
    <img src="images/medium/4.jpg" data-bgimg="images/large/4.jpg" alt="image04" title="Guns of Brixton" />
    <img src="images/medium/5.jpg" data-bgimg="images/large/5.jpg" alt="image05" title="This Is Not a Love Song" />
    <img src="images/medium/6.jpg" data-bgimg="images/large/6.jpg" alt="image06" title="Making Plans for Nigel" />
</div>

Информация с полным адресом до полноэкранного изображения будет содержаться в атрибуте data-bgimg. Мы будем использовать изображения в структуре кода HTML, который определим в шаблоне jQuery. Эта структура будет состоять из двух блоков: верхнего и нижнего. У каждого будет 6 торцов, один из которых будет отображен с самого начала.

Когда мы кликаем по иконке отображения на весь экран, верхний многоугольник поворачивается вверх, показывая свою нижнюю сторону, а нижний многоугольник поворачивается вниз, показывая свою верхнюю сторону. Нижняя часть верхнего многоугольника отобразит нам верхнюю часть полноэкранного изображения, а верхняя часть нижнего многоугольника отобразит нижнюю часть:


Опции

current        : 0,
// index текущего изображения

width        : 600,
// ширина изображения

height        : 400,
// высота изображения

perspective    : 550,
// значение перспективы в webkit

speed        : 750,
// скорость вращения

easing        : 'ease-in-out',
// плавность вращения

onload        : function() { return false; }
// срабатывание при инициализации слайд-шоу

Не забудьте посмотреть видео с эффектом, если ваш браузер не поддерживает свойства CSS3: http://www.screenr.com/Onls

Надеемся, что вам понравился наш маленький эксперимент!

Смотреть демо | Скачать архивом