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

Всегда в теме

Статистика


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


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

Рекомендуем



Главная » 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 | Просмотров: 1407 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

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

    Категории

    Заходи не жди