—»     —»   Полноэкранный трехмерный эффект для изображений (CSS3+jQuery)
  Раздел: Анимация   Комментариев: 2  

Полноэкранный трехмерный эффект для изображений (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 торцов, один из которых будет отображен с самого начала.

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

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

Опции

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

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

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, jQuery, 3D
Опубликовал Design FactoRy   Прочитано (раз): 7131   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 3 февраля 2012 @ 11:33
Написал: aleks1309 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
интересное решение.трехмерное изображение должно понравиться многим
Комментарий #2: 11 февраля 2012 @ 14:47
Написал: senator3821 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Шикарная программа и отличная вещь для моего блога, спасибо сайту за бесплатное размещение столь интересной программы и соответствующей информации
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930