Эффект всплывающей миниатюры для навигации
В данном уроке мы создадим отличный эффект всплывающих миниатюр для навигации с помощью 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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Великие умы обсуждают идеи, средние - обсуждают поступки, а малые - людей Индийская пословица |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.