Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

Создаём впечатляющий 3D эффект при наведении мыши на миниатюру изображения


Быть первым, значит быть оригинальным. Сегодня мы будем учиться украшать миниатюры изображений с помощью 3D преобразований CSS3 и jQuery. Вам стоит это увидеть, поехали?


    Сегодня, мы хотим показать вам, как создать неповторимый 3D эффект при наведении на миниатюру изображения, с помощью CSS3 и jQuery. Идея создания, навеяна проектом Google SketchUp Showcase.

    В наших примерах, мы будем использовать миниатюры изображений, при наведении на которые, кроме потрясающего 3D эффекта, мы увидим дополнительную информацию о них, с возможностью, при клике мыши просмотреть их в исходном разрешении. Мы создадим необходимую разметку, и напишем некоторый jQuery код, который и будет применять все необходимые 3D эффекты к нашим изображениям, во время наведения на них курсором мыши.

    Обращаю ваше внимание: увидеть всю красоту данных эффектов, вы сможете лишь в тех браузерах, которые поддерживают соответствующие свойства CSS.

    Изображения для демонстрационных примеров предоставлены Angelo González и находятся под лицензией Creative Commons Attribution 2.0 Generic (CC BY 2.0)

    Чтобы не ввести вас в затруднительное положение, все префиксы в данном уроке были убраны. Но вы всегда их сможете найти в файлах демонстрационных примеров.

    Разметка

    Нам необходима довольно простая разметка, со следующей структурой:

<div id="grid" class="main">
  
    <div class="view">
 
        <div class="view-back">
            <span data-icon="A">566</span>
            <span data-icon="B">124</span>
            <a href="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">→</a>
        </div>
 
        <img src="images/1.jpg" />
 
    </div>
 
    <div class="view">
 
    <!-- ... -->
 
    </div>
 
    <!-- ... -->
     
</div>

    Каждый блок с миниатюрой, будет содержать в себе блок с классом view-back, в котором будут находиться необходимые детали описания. Для работы нашего jQuery скрипта, блок с классом view будет иметь следующую структуру:

<div class="view">
 
    <div class="view-back">
        <!-- ... -->
    </div>
     
    <div class="slice s1" style="background-image: url(/zhitelyam/images/1.jpg); ">
        <span class="overlay"></span>
         
        <div class="slice s2" style="background-image: url(/zhitelyam/images/1.jpg); ">
            <span class="overlay"></span>
             
            <div class="slice s3" style="background-image: url(/zhitelyam/images/1.jpg); ">
                <span class="overlay"></span>
                 
                <div class="slice s4" style="background-image: url(/zhitelyam/images/1.jpg); ">
                    <span class="overlay"></span>
                     
                    <div class="slice s5" style="background-image: url(/zhitelyam/images/1.jpg); ">
                        <span class="overlay"></span>
                    </div><!-- /s5 -->
                 
                </div><!-- /s4 -->
                     
            </div><!-- /s3 -->
                 
        </div><!-- /s2 -->
             
    </div><!-- /s1 -->
     
</div><!-- /view -->

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

    jQuery

    Используемая нами jQuery функция, в этом случае будет иметь следующий вид:

$.fn.hoverfold = function( args ) {
 
    this.each( function() {
     
        $( this ).children( '.view' ).each( function() {
         
            var $item   = $( this ),
                img     = $item.children( 'img' ).attr( 'src' ),
                struct  = '<div class="slice s1">';
                    struct  +='<div class="slice s2">';
                        struct  +='<div class="slice s3">';
                            struct  +='<div class="slice s4">';
                                struct  +='<div class="slice s5">';
                                struct  +='</div>';
                            struct  +='</div>';
                        struct  +='</div>';
                    struct  +='</div>';
                struct  +='</div>';
                 
            var $struct = $( struct );
             
            $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
             
        } );
         
    });
 
};

    Теперь мы можем использовать много забавных эффектов наведения! Для начала, давайте определимся с некоторыми общими стилями, а затем рассмотрим первый пример.

    CSS

    Здесь мы определим некоторые стили для блока view, а так же перспективу для него:

.view {
    width: 316px;
    height: 216px;
    margin: 10px;
    float: left;
    position: relative;
    border: 8px solid #fff;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
    background: #333;
    perspective: 500px;
}

    Блокам slice так же нужны некоторые свойства 3D преобразований и переходов:

.view .slice{
    width: 60px;
    height: 100%;
    z-index: 100;
    transform-style: preserve-3d;
    transform-origin: left center;
    transition: transform 150ms ease-in-out;
     
}

    Пришло время задать необходимые стили для описания, которое мы увидим, наведя курсор мыши на любую из миниатюр:

.view div.view-back{
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    background: #666;
    z-index: 0;
}

    Не забудем и про блоки span и стили для ссылок:

.view-back span {
    display: block;
    float: right;
    padding: 5px 20px 5px;
    width: 100%;
    text-align: right;
    font-size: 16px;
    color: rgba(255,255,255,0.6);
}
 
.view-back span:first-child {
    padding-top: 20px;
}
 
.view-back a {
    display: bock;
    font-size: 18px;
    color: rgba(255,255,255,0.4);
    position: absolute;
    right: 15px;
    bottom: 15px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 22px;
    text-align: center;
    font-weight: 700;
}
 
.view-back a:hover {
    color: #fff;
    border-color: #fff;
}

    Для значка before, мы будем использовать шрифт - значок, который мы создали с Fontello. Поскольку мы добавили атрибут data-icon к тегу span, для его отображения будет использоваться псевдо класс :before:

.view-back span[data-icon]:before {
    content: attr(data-icon);
    font-family: 'icons';
    color: #aaa;
    color: rgba(255,255,255,0.2);
    text-shadow: 0 0 1px rgba(255,255,255,0.2);
    padding-right: 5px;
}

    Всё за исключением первого блока с классом slice, мы должны перенести вправо (помните, мы используем вложенную структуру):

.view .s2, 
.view .s3, 
.view .s4, 
.view .s5 {
    transform: translateX(60px);
}

    Давайте настроим позиционирование каждого фонового изображения для блоков с классом slice:

.view .s1 {
    background-position: 0px 0px;
}
.view .s2 {
    background-position: -60px 0px;
}
.view .s3 {
    background-position: -120px 0px;
}
.view .s4 {
    background-position: -180px 0px;
}
.view .s5 {
    background-position: -240px 0px;
}

    Наложения (overlays) по умолчанию будут иметь непрозрачность 0, а при наведении курсора мыши, мы изменим это значение до 1:

.view .overlay {
    width: 60px;
    height: 100%;
    opacity: 0;
    position: absolute;
    transition: opacity 150ms ease-in-out;
}
 
.view:hover .overlay {
    opacity: 1;
}

    Для изображений, давайте исправим z-index (так, чтобы не было видно нижележащего слоя и изнанки). Мы так же добавим замену переходов для браузеров, не поддерживающих свойства CSS 3D преобразований:

.view img {
    position: absolute;
    z-index: 0;
    transition: left 0.3s ease-in-out;
}

    В случае если мы видим, что браузер не поддерживает необходимые 3D свойства, мы просто загрузим дополнительные таблицы стилей fallback.css, которые будут иметь следующее содержание:

.view {
    overflow: hidden;
}
 
.view:hover img {
    left: -85px;
}
 
.view div.view-back {
    background: #666;
}

    Это позволит переместить изображение влево, при срабатывании события hover.

    Настало время примера!

    Пример

    В этом примере, мы хотим создать эффект складок, как в демонстрации 1. Для этого мы будем корректировать значения перспективы и переходов:

.view {
    perspective: 1050px;
}
 
.view div {
    transition: all 0.3s ease-in-out;
}

    2, 3, 4 и 5 блоки slice, для создания эффекта складок, используя поворот в 3D, мы преобразуем так:

.view:hover .s2{
    transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
}
.view:hover .s3, 
.view:hover .s5{
    transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
}
.view:hover .s4{
    transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
}

    Каждый из этих слоёв, будет перемещён влево. Это значение должно быть равным их ширине, но мы хотим избежать даже небольших не состыковок, поэтому переместим их на 59 пикселей. Второй slice будет повёрнут на -45 градусов, для поворота влево. Четвертый, будет повёрнут в противоположную сторону, а третий и пятый, на 90 градусов. Помните, мы используем вложенную структуру. И как только мы повернём родительские блоки, дочерние так же будут повёрнуты.

    Чтобы наш эффект выглядел реалистичнее, мы добавим некоторые наложения градиентов:

.view .s2 > .overlay {
    background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
 
.view .s3 > .overlay {
    background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
 
.view .s4 > .overlay {
    background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
}
 
.view .s5 > .overlay {
    background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

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

.view div.view-back{
    background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}

    Вот и всё! Просмотрите все демонстрационные примеры, чтобы оценить всю прелесть созданного эффекта! Существует масса возможностей создать новые эффекты или улучшить существующие.
    Я надеюсь, вы нашли эту статью вдохновляющей!

    Для интеграции данного примера с сенсорными гаджетами, вы можете использовать версию Richard Bennett.

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 20.03.2013
Опубликовал: Сергей Кашурин
Просмотров: 1086
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


23 jQuery плагина для организации слайд-шоу и галерей на сайте
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.
110 бесплатных PSD элементов, для ваших слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.
24 классных PHP библиотеки, о которых вы должны знать
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.
Сайт дц
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.
Новости с ш а читайте здесь
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.
Светильники уличного освещения светодиодные. Прожектор уличный светодиодный светильник .
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.
sexnsk club
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: