Автор

23 04.2013
Эффект зума для миниатюр с помощью jQuery

Эффект зума для миниатюр с помощью jQuery


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

<ul id="pe-thumbs">
    <li>
        <a href="#">
            <img src="images/thumbs/1.jpg" />
            <div>
                <h3>Заголовок описания</h3>
                <p>Текст описания</p>
            </div></a>
    </li>
    <li><!-- ... --></li>
</ul>

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

.pe-thumbs{
    width: 900px;
    height: 400px;
    margin: 20px auto;
    position: relative;
    background: transparent url(../images/3.jpg) top center;
    border: 5px solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

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

.pe-thumbs:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255,102,0,0.2);
}

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

.pe-thumbs li{
    float: left;
    position: relative;
}
.pe-thumbs li a,
.pe-thumbs li a img{
    display: block;
    position: relative;
}

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

.pe-thumbs li a img{
width: 100px;
opacity: 0.2;
}

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

.pe-thumbs li a div.pe-description{
    width: 200px;
    height: 100px;
    background: rgba(0,0,0,0.8);
    position: absolute;
    top: 0px;
    left: -200px;
    color: white;
    display: none;
    z-index: 1001;
    text-align: left;
}

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

.pe-description h3{
    padding: 10px 10px 0px 10px;
    line-height: 20px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 22px;
    margin: 0px;
}
.pe-description p{
    padding: 10px 0px;
    margin: 10px;
    font-size: 11px;
    font-style: italic;
    border-top: 1px solid rgba(255,255,255,0.3);
}

 

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

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

// Список миниатюр
	var $list		= $('#pe-thumbs'),
	// Ширина и смещение влево списка.
	// Данные значения будут использоваться для получения положения контейнера описания.
	listW		= $list.width(),
	listL		= $list.offset().left,
	// Изображения
	$elems		= $list.find('img'),
	// Контейнер описания
	$descrp		= $list.find('div.pe-description'),
	// maxScale : максимально значение масштаба, которое может иметь изображение
	// minOpacity / maxOpacity : минимальное (устанавливается в CSS) и максимальное значение непрозрачности изображения
	settings	= {
		maxScale	: 1.3,
		maxOpacity	: 0.9,
		minOpacity	: Number( $elems.css('opacity') )
	},
	init		= function() {

		// minScale устанавливается в CSS
		settings.minScale = _getScaleVal() || 1;
		// Предварительная загрузка миниатюр
		_loadImages( function() {

			_calcDescrp();
			_initEvents();

		});

	},
	// Получаем значение масштаба из CSS с помощью JavaScript:
	_getScaleVal= function() {

		var st = window.getComputedStyle($elems.get(0), null),
			tr = st.getPropertyValue("-webkit-transform") ||
				 st.getPropertyValue("-moz-transform") ||
				 st.getPropertyValue("-ms-transform") ||
				 st.getPropertyValue("-o-transform") ||
				 st.getPropertyValue("transform") ||
				 "fail...";

		if( tr !== 'none' ) {

			var values = tr.split('(')[1].split(')')[0].split(','),
				a = values[0],
				b = values[1],
				c = values[2],
				d = values[3];

			return Math.sqrt( a * a + b * b );

		}

	},
	// Вычисляем значения для контейнера описания
	// на основе установочных переменных
	_calcDescrp	= function() {

		$descrp.each( function(i) {

			var $el		= $(this),
				$img	= $el.prev(),
				img_w	= $img.width(),
				img_h	= $img.height(),
				img_n_w	= settings.maxScale * img_w,
				img_n_h	= settings.maxScale * img_h,
				space_t = ( img_n_h - img_h ) / 2,
				space_l = ( img_n_w - img_w ) / 2;

			$el.data( 'space_l', space_l ).css({
				height	: settings.maxScale * $el.height(),
				top		: -space_t,
				left	: img_n_w - space_l
			});

		});

	},
	_initEvents	= function() {

		$elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function(event, proximity, distance) {

			var $el			= $(this),
				$li			= $el.closest('li'),
				$desc		= $el.next(),
				scaleVal	= proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,
				scaleExp	= 'scale(' + scaleVal + ')';

			// Изменяем z-index элемента, как только будет достигнуто максимальное значение масштаба.
			// Также показываем контейнер описания
			if( scaleVal === settings.maxScale ) {

				$li.css( 'z-index', 1000 );

				if( $desc.offset().left + $desc.width() > listL + listW ) {

					$desc.css( 'left', -$desc.width() - $desc.data( 'space_l' ) );

				}

				$desc.fadeIn( 800 );

			}
			else {

				$li.css( 'z-index', 1 );

				$desc.stop(true,true).hide();

			}

			$el.css({
				'-webkit-transform'	: scaleExp,
				'-moz-transform'	: scaleExp,
				'-o-transform'		: scaleExp,
				'-ms-transform'		: scaleExp,
				'transform'			: scaleExp,
				'opacity'			: ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )
			});

		});

	},
	_loadImages	= function( callback ) {

		var loaded 	= 0,
			total	= $elems.length;

		$elems.each( function(i) {

			var $el = $(this);

			$('<img/>').load( function() {

				++loaded;
				if( loaded === total )
					callback.call();

			}).attr( 'src', $el.attr('src') );

		});

	};

return {
	init	: init
};

 

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

11 05.2017
Эффект зума для миниатюр с помощью jQuery

Это модальное окно позволяет пользователям входить / регистрироваться на вашем сайте. После открытия пользователь может легко переключиться с одной формы на другую или выбрать опцию сброса пароля.


08 04.2013
Эффект зума для миниатюр с помощью jQuery

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


11 06.2013
Эффект зума для миниатюр с помощью jQuery

Порой разработчик не особо заморачивается дизайном своего ресурса и приходит к выводу, что будет использовать готовые шаблоны для сайта. Это весьма упрощает жизнь верстальщику, так как приходиться работать с готовым материалом, который уже можно изменить на свое усмотрение не создавая дизайн с нуля. В данном посте мы рассмотрим подборку замечательных, на мой взгляд, готовых шаблонов для сайта, которые вы можете скачать и использовать на свое усмотрение. Уверен, что каждый из посетителей найдет что-нибудь примечательное на свой вкус..

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


28 04.2017
Эффект зума для миниатюр с помощью jQuery

Иногда вы просто хотите, чтобы на вашем сайте была оригинальная навигация и я предлагаю вашему вниманию интересное решение адаптивного 3D меню для сайта.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close