Учтите, что для правильного отображения эффекта, браузер должен поддерживать современные свойства 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
Надеемся, что вам понравился наш маленький эксперимент!
Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.