Эффект всплывающей миниатюры для навигации
В данном уроке мы создадим отличный эффект всплывающих миниатюр для навигации с помощью 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-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Чтобы вырастить плодоносящий сайт - его полезно регулярно поливать и удобрять с помощью рекламы и оптимизации Компания "RedLine" |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.