Веб-дизайнеру
Веб-разработчику
Дополнительно
“Retina” эффект лупы – увеличение изображения при наведении!
Скачать
Демо
↓ Также Вам будет интересно ↓
Анимированная галерея изображений с эффектами и “сеткой”!
CSS3 эффекты: изображение с блоками подсказок!
3D слайдер на CSS3 и JQuery / 3 примера + автопрокрутка
3D красивая форма подписки на CSS3 + Javascript
CSS3 эффект при наведении на изображение + 5 примеров!
Модальное окно JQuery & CSS3 + 22 эффекта появления!
Apple, уже давно применяет выигрышные стратегии в области маркетинга – создает хорошо продуманные продукты, которые вызывают целую шумиху перед очередным выпуском продукта.
Это же относится и к последней версии iPhone. Они придумали – “Retina Display” (эффект лупы) и сопровождающие его промо-изображения.
И сегодня мы будет превращать статическое изображение в полностью функциональный “Retina” эффект лупы, только с использованием JQuery и CSS. Это будет красивый и даже полезный эффект увеличения изображения при наведении, что может быть использовано и практично для любого изображения.
Скачивайте демо файлы и читайте статью дальше. Другие анимационный эффекты с изображениями, смотрите здесь.
HTML
Разметка кода для эффекта лупы достаточно проста. Как видите, у нас есть только ряд элементов div и изображение.
|
1 2 3 4 5 6 7 8 |
<div id="main"> <div id="iphone"> <div id="webpage"> <img src="/web-developer/jquery/img/webpage.png" width="499" height="283" alt="Web Page" /> <div id="retina"></div> </div> </div> </div> |
Элемент #iphone отображает телефон iphone, само окно, внутри которого #webpage скриншот веб-страницы. Скриншот-картинка отображается в половину своего первоначального размера.
Наконец, мы видим DIV – #retina, который и является “лупой”, округляется с помощью CSS3 и отображает увеличенную версию веб-страницы при перемещении курсора мыши по картинке, области #webpage.
CSS стили
Переходим к части CSS стилей. Мы собираемся стилизовать элементы #iphone, #webpage и #retina, поэтому будем воплощать удивительные эффекты увеличения изображения в жизнь.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
#iphone{ /* The iphone frame div */ width:750px; height:400px; background:url('img/iphone_4G.png') no-repeat center center; } #webpage{ /* Contains the webpage screenshot */ width:499px; height:283px; position:absolute; top:50%; left:50%; margin:-141px 0 0 -249px; } #retina{ /* The Retina effect */ background:url('/web-developer/jquery/img/webpage.png') no-repeat center center white; border:2px solid white; /* Positioned absolutely, so we can move it around */ position:absolute; height:180px; width:180px; /* Hidden by default */ display:none; /* A blank cursor, notice the default fallback */ cursor:url('img/blank.cur'),default; /* CSS3 Box Shadow */ -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; /* CSS3 rounded corners */ -moz-border-radius:90px; -webkit-border-radius:90px; border-radius:90px; } #retina.chrome{ /* A special chrome version of the cursor */ cursor:url('img/blank_google_chrome.cur'),default; } #main{ /* The main div */ margin:40px auto; position:relative; width:750px; } |
Указав абсолютное позиционирование для #webpage, мы можем применить вертикальное и горизонтальное центрирование, тем самым эффективно расположить скриншот веб-страницы по центру окна iphone телефона.
Для #retina также присваивается абсолютное позиционирование, так что его возможно позиционировать в JQuery, просто указав верхнее и левое смещения offset. Это DIV #retina также имеет скриншот веб-страницы в качестве фона (в оригинальном размере). Именно это создает иллюзию увеличения изображения, эффекта лупы.
Для “лупы” #retina мы также применили border-radius со значением ровно половину его ширины, которая превращает его в идеальный круг (по крайней мере в браузерах, которые поддерживают свойство скругления углов CSS3 – Chrome, Safari, Opera, Firefox…).
И, наконец, мы прячем курсор мыши, добавляя пустой файл курсора (Google Chrome не может показывать совершенно пустой курсор, поэтому специально для него мы добавляем белый курсор в 1px – по крайней мере это лучше, чем ничего).
Браузер Opera полностью игнорирует пользовательские курсоры и нет никаких обходных путей, поэтому пользователи этого браузера не не увидят все красоту этого эффект.
JQuery скрипт
Итак, все стили css у нас есть, остался лишь вопрос некоторого JavaScript кодирования с помощью JQuery библиотеки.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
$(document).ready(function(){ /* This code is executed on the document ready event */ var left = 0, top = 0, sizes = { retina: { width:190, height:190 }, webpage:{ width:500, height:283 } }, webpage = $('#webpage'), offset = { left: webpage.offset().left, top: webpage.offset().top }, retina = $('#retina'); if(navigator.userAgent.indexOf('Chrome')!=-1) { /* Applying a special chrome curosor, as it fails to render completely blank curosrs. */ retina.addClass('chrome'); } webpage.mousemove(function(e){ left = (e.pageX-offset.left); top = (e.pageY-offset.top); if(retina.is(':not(:animated):hidden')){ /* Fixes a bug where the retina div is not shown */ webpage.trigger('mouseenter'); } if(left<0 || top<0 || left > sizes.webpage.width || top > sizes.webpage.height) { /* If we are out of the bondaries of the webpage screenshot, hide the retina div */ if(!retina.is(':animated')){ webpage.trigger('mouseleave'); } return false; } /* Moving the retina div with the mouse (and scrolling the background) */ 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'); }); }); |
В функции mouseMove, текущие координаты мыши передаются как e.pageX и e.pageY, но они являются абсолютными по отношению к документу. Высчитав позиции #webpage, мы в итоге имеем относительные координаты для курсора мыши, которые затем используются для позиционирования “лупы” #retina.
Этот JavaScript код, в сочетании CSS стилями, создает эффект лупы, увеличения изображения при наведении, в чистом виде.
Заключение
Все готово! Я надеюсь Вы найдете применение для этого эффекта лупы, который будет прекрасным и полезным дополнением к изображениям. Надеюсь, Вам понравилось! 
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
http://merc-vitrina.ru/ @
Здравствуйте!
Подскажите,как сделать картинку 1600 на 1600
Что-то у меня ни чего не получается…
/
Здравствуйте, Александр! Извините за задержку с ответом.
Вы можете использовать картинку размером 1600 х 1600. Для этого необходимо произвести следующие действия:
1. В файле script.js: на 7 строке в коде
webpage:width:617, height:296указать реальный размер картинки, то есть в Вашем случае это будетwebpage:width:1600, height:16002. В файле index.html: на 29 строке есть код
img src="/web-developer/jquery/img/webpage.png" width="499" height="283" alt="Web Page". Путь к картинке нужно заменить на свой + редактировать размеры, указывая 50%. Допустим, что у вас точно такое же название и формат картинки, тогда в Вашем случае это будет так:img src="/web-developer/jquery/img/webpage.png" width="800" height="800" alt="Web Page"3. В файле styles.css на 34 строке есть код
background:url('/web-developer/jquery/img/webpage.jpg') no-repeat center center white;. Проверьте, чтобы здесь путь к картинке был правильным.И всё готово! Желаю успехов!
Доброе [время суток]!
Моя признательность за хорошую статью!
Всё работает на “УРА”. Одно ограничение – одна картинка на страницу.. Пытался прикрутить к нескольким на странице – не получилось: накладываются друг на дружку. Единственно чего добился – реальный размер не прописываю в скрипте а определяю автоматически “на лету”.
Буду признателен, если подскажете как сделать для нескольких изображений.
Ещё раз премного благодарен!