Эффект увеличительного стекла

Эффект лупы, или retina-эффект, был придуман в Apple. При наведении на изображении вместо курсора мыши появляется изображение лупы с увеличенным фрагментом. Разберемся, как внедрить этот эффект в сайт Pixli.


Разметка


Принцип действия эффекта следующий:
  1. В коде размещается блок с изображением, уменьшенным примерно вдвое.
  2. После него прописывается блок . Этот блок и будет лупой.
  3. Для лупы устанавливаются настройки: форма, фон и т.д.
  4. Добавляется JavaScript код на основе JQuery, в котором осуществляется увеличение изображения в блоке лупы.
Сложность внедрения в редактор Pixli заключается в том, что блок лупы должен быть расположен сразу после блока изображения. А редактор размещает каждый элемент в новом блоке. Поэтому мы установим все блоки вручную, поместив их в раздел «HTML-код».
Чтобы попробовать, создайте новый сайт на основе пустого шаблона. В область 1 добавьте три блока HTML кода. Можно разместить и в одном и в двух, но для легкости чтения проще разделить код.

В первом блоке укажем стиль, во втором разметку, в третьем код JavaScript. Последний можно вынести в шапку сайта, если вам так удобнее.

Но мы разместим все три рядом, так как понадобятся правки.
Во второй вставим разметку.
<div id="webpage">
	<img src="images/images3878/image.jpg" width="499" height="283" alt="Web Page">
      	<div id="retina"></div>
</div>
Картинку возьмите произвольную. Мы выбрали старую газетную статью. Ее надо загрузить в редакторе и узнать адрес.
Для загрузки воспользуемся кнопкой «Загрузить» в разделе установки фона.

Чтобы узнать путь к рисунку, зайдите в каталог изображений. Это соседняя кнопка с предыдущего рисунка. Затем нажмите правую кнопку мыши и скопируйте URL картинки.
Вы получите примерно такой путь:
http://retine.pixli.ru/images/images3878/mini/image.jpg
Это значит, что изображения нашего сайта хранятся в папке images/images3878. Теперь можно подставить этот путь в код HTML разметки.
Контейнер webpage нам необходим для позиционирования рисунка на экране.

Стиль


CSS стиль наших блоков укажем в первом разделе «HTML-код».
<style>
  #webpage{
	width:480px;
	height:213px;
	position:relative;
	margin:100px auto;
}
#retina{
	background:url('images/images3878/image.jpg') no-repeat center center white;
	border:2px solid white;
	position:absolute;
	height:150px;
	width:150px;
	display:none;
	cursor:none;
	-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
	-webkit-box-shadow:0 0 5px #777;
	box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
	-moz-border-radius:90px;
	-webkit-border-radius:90px;
	border-radius:90px;
}
#retina.chrome{
	cursor:none;
}
</style>
Ширина и высота блока в два раза меньше ширины и высоты изображения газеты. Тем самым мы сжимаем его. А увеличенное изображение в лупе – это как раз его натуральный размер.
Чтобы центрировать изображение газеты, установим ширину области 100%, а для блока webpage укажем относительное позиционирование и значение margin:100 px auto. Первое значение сместить на 100 пикселей по вертикали, а второе центрирует по вертикали. Если вам необходимо размещать изображение относительно других блоков – воспользуйтесь абсолютным позиционированием.
Для блока retine укажем фоновый рисунок – наше изображение. Оно как раз и создаст эффект лупы, отображаясь в нормальную величину. Абсолютно позиционируем, чтобы лупа не выходила за границы и укажем размер с помощью свойств height и width.
Свойстваborder-radius и border-shadow создадут круглую форму лупы и ее объемность. Свойство cursor:none позволит убрать курсор мыши.

JavaScript код


Размещаем его в третьем HTML блоке.
<script>
$(document).ready(function(){
		var left	= 0,
		top = 0,
		sizes = { retina: { width:150, height:150 }, webpage:{ width:480, height:213 } },
		webpage = $('#webpage'),
		offset = { left: webpage.offset().left, top: webpage.offset().top },
		retina = $('#retina');
	if(navigator.userAgent.indexOf('Chrome')!=-1)
	{
		retina.addClass('chrome');
	}
	webpage.mousemove(function(e){
		left = (e.pageX-offset.left);
		top = (e.pageY-offset.top);
		if(retina.is(':not(:animated):hidden')){
		}
		if(left<0 || top<0 || left > sizes.webpage.width || top > sizes.webpage.height)
		{
			if(!retina.is(':animated')){
				webpage.trigger('mouseleave');
			}
			return false;
		}
		retina.css({
			left: left - sizes.retina.width/2,
			top: top - sizes.retina.height/2,
			backgroundPosition: '-'+(1.6*left)+'px -'+(1.35*top)+'px'
		});
	}).mouseleave(function(){
	retina.stop(true,true).fadeOut('fast');
	}).mouseenter(function(){
	retina.stop(true,true).fadeIn('fast');
	});
});
</script>
В функции MouseMove текущие координаты мыши передаются как e.pageX и e.pageY, но они являются абсолютными по отношению к документу. Вычитая смещение позиции блока webpage, мы в конечном итоге получаем относительные координаты для мыши, которые затем используются для позиционирования блока retine.
Результат – отличный эффект лупы для нашего изображения.

Полный текст урока находится на сайте tutorialzine.com
10 may 2017, 17:20    Ivan Web-дизайн 0    1 0

Comments (0)

    You need to login to create comments.