Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

Главная » 2013 » Декабрь » 31 » Эффект всплывающей миниатюры для навигации
12:19
Эффект всплывающей миниатюры для навигации

Эффект всплывающей миниатюры для навигации



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


СМОТРЕТЬ  DEMO                               СКАЧАТЬ ИСХОДНИК

HTML:

Для реализации нашего эффекта будет использоваться следующая структура кода HTML:

 

 

<div class="cn-nav">

                <a href="#" class="cn-nav-prev">

                               <span>Previous</span>

                               <div style="background-image:url(../images/thumbs/1.jpg);"></div>

                </a>

                <a href="#" class="cn-nav-next">

                               <span>Next</span>

                               <div style="background-image:url(../images/thumbs/3.jpg);"></div>

                </a>

</div>

 

 

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

CSS

Предположим, что у нас есть внешний контейнер с относительным позиционированием. Устанавливаем для элементов навигации абсолютное позиционирование и высоты и ширину равную 70px, чтобы было пространство для восприятия движений курсора мыши:

.cn-nav > a{

    position: absolute;

    top: 0px;

    height: 70px;

    width: 70px;

}

a.cn-nav-prev{

    left: 0px;

}

a.cn-nav-next{

    right: 0px;

}

 

Элемент span, который содержит стрелки в качестве фоновых изображений, будет иметь высоту и ширину  46 px. Чтобы он выглядел круглым установим радиус границы равным половине ширины/высоты. С помощью трюка 50% и отрицательного значения поля центрируем элемент ссылки. Затем определяется трансформация для всех свойств с длительностью 400ms и эффектом перехода ease:

 

.cn-nav a span{

    width: 46px;

    height: 46px;

    display: block;

    text-indent: -9000px;

    -moz-border-radius: 23px;

    -webkit-border-radius: 23px;

    border-radius: 23px;

    cursor: pointer;

    opacity: 0.9;

    position: absolute;

    top: 50%;

    left: 50%;

    background-size: 17px 25px;

    margin: -23px 0 0 -23px;

    -webkit-transition: all 0.4s ease;

                -moz-transition: all 0.4s ease;

                -o-transition: all 0.4s ease;

                -ms-transition: all 0.4s ease;

                transition: all 0.4s ease;

}

 

Фоновые изображения элемента span:

 

.cn-nav a.cn-nav-prev span{

    background: #666 url(../images/prev.png) no-repeat center center;

}

.cn-nav a.cn-nav-next span{

    background: #666 url(../images/next.png) no-repeat center center;

}

 

Элемент div для миниатюр (они являются фоновыми изображениями) изначально имеет высоту и ширину 0px. Он будет абсолютно позиционироваться в центре элемента ссылки. Радиус границы и поля также имеют значения 0 изначально. Фоновое изображение заполняет элемент, поэтому мы устанавливаем размер для фона 100%. Трансформация для данного элемента будет выполняться для всех свойств в течении 200ms с использованием эффекта перехода ease-out:

 

.cn-nav a div{

    width: 0px;

    height: 0px;

    position: absolute;

    top: 50%;

    left: 50%;

    overflow: hidden;

    background-size: 100% 100%;

    background-position: center center;

    background-repeat: no-repeat;

    margin: 0px;

    -moz-border-radius: 0px;

    -webkit-border-radius: 0px;

    border-radius: 0px;

    -webkit-transition: all 0.2s ease-out;

                -moz-transition: all 0.2s ease-out;

                -o-transition: all 0.2s ease-out;

                -ms-transition: all 0.2s ease-out;

                transition: all 0.2s ease-out;

}

 

Теперь определим, как будет выглядеть элемент при наведении курсора мыши.

Элемент span увеличит ширину и высоту до 100px. Мы установим отрицательное значение поля и сделаем радиус границы равным половине ширины. Также немного увеличим размер фонового изображения. В дополнение изменим цвет фона и прозрачность:

 

.cn-nav a:hover span{

    width: 100px;

    height: 100px;

    -moz-border-radius: 50px;

    -webkit-border-radius: 50px;

    border-radius: 50px;

    opacity: 0.6;

    margin: -50px 0 0 -50px;

    background-size: 22px 32px;

    background-color:#a8872d;

}

 

В завершении маленький элемент div для миниатюр увеличится до 90px, так что все еще будет видно элемент span вокруг в качестве рамки миниатюры. Также немного увеличим размер фона и установим отрицательные значения полей и радиус границы равный половине ширины:

 

.cn-nav a:hover div{

    width: 90px;

    height: 90px;

    background-size: 120% 120%;

    margin: -45px 0 0 -45px;

    -moz-border-radius: 45px;

    -webkit-border-radius: 45px;

    border-radius: 45px;

}

 

На этом все. Надеюсь вам понравилось.

 

СМОТРЕТЬ  DEMO                               СКАЧАТЬ ИСХОДНИК

Источник

Категория: HTML/CSS | Просмотров: 208 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск

Статьи
[Менеджмент]
Факторы микросреды организации
[Безопасность систем]
Защита исходных текстов и двоичного кода
[Устронение ошибок систем]
Возможные нежелательные последствия разгона
[Устронение ошибок систем]
Сообщения об ошибках AMI BIOS (часть 2)
[Операционные системы]
MAC OS
[Устронение ошибок систем]
Сообщения об ошибках AMI BIOS
[Прогараммирование]
Совместимость типов объектов
[Прогараммирование]
Введение в информатику
[Информатика]
Что такое инфоpматика?
[Бухгалтерский учет]
ПРИНЦИПЫ И КОНЦЕПЦИИ БУХГАЛТЕРСКОГО УЧЕТА В РЫНОЧНОЙ ЭКОНОМИКЕ

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2017Конструктор сайтов - uCoz