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

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

Разметка 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; 
}

 

Готово!

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


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/BsXg0a0IuT8/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Эффект всплывающей миниатюры для навигации | | 2012-06-19 12:02:31 | | Статьи Web-мастеру | | В данном уроке мы создадим отличный эффект всплывающих миниатюр для навигации с помощью CSS3. Идея заключается в оформлении навигации стрелками, при наведении курсора мыши на которые будут всплывать | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: