03:33 Полноэкранный трехмерный эффект для изображений (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 [img]images/medium/1.jpg[/img] [img]images/medium/2.jpg[/img] [img]images/medium/3.jpg[/img] [img]images/medium/4.jpg[/img] [img]images/medium/5.jpg[/img] [img]images/medium/6.jpg[/img] Информация с полным адресом до полноэкранного изображения будет содержаться в атрибуте data-bgimg. Мы будем использовать изображения в структуре кода HTML, который определим в шаблоне jQuery. Эта структура будет состоять из двух блоков: верхнего и нижнего. У каждого будет 6 торцов, один из которых будет отображен с самого начала. Когда мы кликаем по иконке отображения на весь экран, верхний многоугольник поворачивается вверх, показывая свою нижнюю сторону, а нижний многоугольник поворачивается вниз, показывая свою верхнюю сторону. Нижняя часть верхнего многоугольника отобразит нам верхнюю часть полноэкранного изображения, а верхняя часть нижнего многоугольника отобразит нижнюю часть:  Опции current : 0,// index текущего изображенияwidth : 600,// ширина изображенияheight : 400,// высота изображенияperspective : 550,// значение перспективы в webkitspeed : 750,// скорость вращенияeasing : 'ease-in-out',// плавность вращенияonload : function() { return false; }// срабатывание при инициализации слайд-шоу Не забудьте посмотреть видео с эффектом, если ваш браузер не поддерживает свойства CSS3: http://www.screenr.com/Onls Надеемся, что вам понравился наш маленький эксперимент! Смотреть демо | Скачать архивом Внимание! У вас нет прав для просмотра скрытого текста. | |
|
| |
| Всего комментариев: 0 | |
