3D увеличение изображения при нажатии с CSS3 и JQuery! | Vladmaxi.net
ГлавнаяВеб-разработчикуJQuery3D увеличение изображения при нажатии с CSS3 и JQuery!
Дата: 28.07.2013 в 15:43 | Просмотров: 4642

3D увеличение изображения при нажатии с CSS3 и JQuery!

3d эффект увеличение изображения при нажатии
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня мы хотим поделиться с Вами одним из наших экспериментов с 3D-преобразования – увеличения изображения при нажатии. Идея состоит в том, чтобы показать полноэкранную версию изображения путем вращения двух блоков в трехмерном пространстве. Другие эффекты с изображениями, смотрите здесь.

Обратите внимание, что Вы можете увидеть этот крутой 3D эффект только в браузере, который поддерживает соответствующие свойства CSS3.

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

Как работает этот 3D эффект?

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

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

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

Нижняя поверхность верхнего прямоугольника будет иметь половину увеличенного изображения в качестве фона и верхняя поверхность нижнего блока будет иметь нижнюю часть изображения:

увеличение изображения при нажатии, полноэкранный просмотр

Опции эффекта

Существуют следующие параметры по умолчанию:

  • current: 0, – индекс текущего изображения;
  • width: 600, – ширина изображения;
  • height: 400, – высота изображения;
  • perspective: 550, – значение WebKit-перспективы;
  • speed: 750, – скорость вращения и появления изображения;
  • easing: 'ease-in-out', – смягчение вращательного эффекта, плавность;
  • onLoad: function() { return false; } – срабатывает, когда слайд-шоу инициализируется.

Заключение

Вот и всё! Думаю получился очень интересный и довольно востребованный эффект. Экспериментируйте, и создавайте свои шедевры! Успехов! :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net/codrops/2011/10/31/fullscreen-image-3d-effect/
Перевел: Владислав Бондаренко


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