Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика

Онлайн всего: 2
Гостей: 2
Пользователей: 0

Свежий софт


Wrecker Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Wrecker Virtual DJ
Virtual DJ
Wrecker SoundForge 11
SoundForge 11
Wrecker Alcohol 120
Alcohol 120
Wrecker Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Рекомендуем



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

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

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


Сегодня будем создавать красивый эффект всплывающих миниатюр для навигации слайдов.  В нашем примере мы будем показывать миниатюры на следующие  и предыдущие изображение  слайдера при наведении на него стрелки мыши. Осуществляется это с помощью 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                               СКАЧАТЬ ИСХОДНИК

 

Источник

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

Поиск

Вход

Гость
  • Вход
  • Регистрация

    • Читаемое

    Категории

    Заходи не жди

    Web Template created with Artisteer.