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

Данный слайдер станет отличным дополнением в дизайне фотосайта или портфолио. Для начала мы рассмотрим созданную разметку HTML. В разметке будет использован неупорядоченный список миниатюр с секцией описания (в первой демонстрации не используется):

С разметкой проблем у вас возникнуть не должно. Поэтому приступим к стилям CSS, и начнем с неупорядоченного списка, который будет центрироваться на странице и иметь тематическое фоновое изображение, просвечивающее через миниатюры с низким значение непрозрачности:

Далее мы слегка затемним фоновое изображение с помощью псевдо-элемента с фоновым цветом в формате rgba:

В слайдере используется список пунктов, который будет смещаться влево и мы установим относительное положение ссылок и изображений:

Каждая миниатюра будет иметь начальную ширину 100 px и непрозрачность 0.2:

Описание будет скрыто по умолчанию и затем выводиться с помощью JavaScript:

В самом конце мы определим стили для описания:

Теперь приступим к jQuery. Для начала мы рассчитаем размер контейнер с описанием и его положение при наведении курсора мыши на миниатюру. Данные значения зависят от максимального масштаба миниатюры и ее расположения в основном контейнере. Например, когда миниатюра находится рядом с правым краем, описание должно появляться слева от миниатюры.

Затем надо привязать событие приближения к изображению. Масштаб изображения будет изменяться в соответствии с положением курсора мыши. Как только масштаб получит максимальное значение, установим большой z-index, чтобы миниатюра выводилась поверх всего, и выведем соответствующее описание:

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях. В уроке используется плагин jQuery Proximity, который написал James Padolsey.