"Retina" эффект лупы - увеличение изображения при наведении! | Vladmaxi.net
ГлавнаяВеб-разработчикуJQuery“Retina” эффект лупы – увеличение изображения при наведении!
Дата: 15.07.2013 в 23:45 | Просмотров: 7668

“Retina” эффект лупы – увеличение изображения при наведении!

эффект лупы, увеличение изображения при наведении
Скачатьбесплатно с сервера
Демодемонстрация

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

Это же относится и к последней версии iPhone. Они придумали – “Retina Display” (эффект лупы) и сопровождающие его промо-изображения.

И сегодня мы будет превращать статическое изображение в полностью функциональный “Retina” эффект лупы, только с использованием JQuery и CSS. Это будет красивый и даже полезный эффект увеличения изображения при наведении, что может быть использовано и практично для любого изображения.

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

HTML

Разметка кода для эффекта лупы достаточно проста. Как видите, у нас есть только ряд элементов div и изображение.

Элемент #iphone отображает телефон iphone, само окно, внутри которого #webpage скриншот веб-страницы. Скриншот-картинка отображается в половину своего первоначального размера.

Наконец, мы видим DIV#retina, который и является “лупой”, округляется с помощью CSS3 и отображает увеличенную версию веб-страницы при перемещении курсора мыши по картинке, области #webpage.

эффект увеличения изображения при наведении курсора мыши

CSS стили

Переходим к части CSS стилей. Мы собираемся стилизовать элементы #iphone, #webpage и #retina, поэтому будем воплощать удивительные эффекты увеличения изображения в жизнь.

Указав абсолютное позиционирование для #webpage, мы можем применить вертикальное и горизонтальное центрирование, тем самым эффективно расположить скриншот веб-страницы по центру окна iphone телефона.

Для #retina также присваивается абсолютное позиционирование, так что его возможно позиционировать в JQuery, просто указав верхнее и левое смещения offset. Это DIV #retina также имеет скриншот веб-страницы в качестве фона (в оригинальном размере). Именно это создает иллюзию увеличения изображения, эффекта лупы.

эффект лупы на JQuery и CSS

Для “лупы” #retina мы также применили border-radius со значением ровно половину его ширины, которая превращает его в идеальный круг (по крайней мере в браузерах, которые поддерживают свойство скругления углов CSS3 – Chrome, Safari, Opera, Firefox…).

И, наконец, мы прячем курсор мыши, добавляя пустой файл курсора (Google Chrome не может показывать совершенно пустой курсор, поэтому специально для него мы добавляем белый курсор в 1px – по крайней мере это лучше, чем ничего).

Браузер Opera полностью игнорирует пользовательские курсоры и нет никаких обходных путей, поэтому пользователи этого браузера не не увидят все красоту этого эффект.

JQuery скрипт

Итак, все стили css у нас есть, остался лишь вопрос некоторого JavaScript кодирования с помощью JQuery библиотеки.

В функции mouseMove, текущие координаты мыши передаются как e.pageX и e.pageY, но они являются абсолютными по отношению к документу. Высчитав позиции #webpage, мы в итоге имеем относительные координаты для курсора мыши, которые затем используются для позиционирования “лупы” #retina.

Этот JavaScript код, в сочетании CSS стилями, создает эффект лупы, увеличения изображения при наведении, в чистом виде.

Заключение

Все готово! Я надеюсь Вы найдете применение для этого эффекта лупы, который будет прекрасным и полезным дополнением к изображениям. Надеюсь, Вам понравилось! :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Алексакндр:
      http://merc-vitrina.ru/ @

      Здравствуйте!
      Подскажите,как сделать картинку 1600 на 1600
      Что-то у меня ни чего не получается…

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Здравствуйте, Александр! Извините за задержку с ответом.
        Вы можете использовать картинку размером 1600 х 1600. Для этого необходимо произвести следующие действия:
        1. В файле script.js: на 7 строке в коде webpage:width:617, height:296 указать реальный размер картинки, то есть в Вашем случае это будет webpage:width:1600, height:1600

        2. В файле index.html: на 29 строке есть код img src="img/webpage.png" width="499" height="283" alt="Web Page". Путь к картинке нужно заменить на свой + редактировать размеры, указывая 50%. Допустим, что у вас точно такое же название и формат картинки, тогда в Вашем случае это будет так: img src="img/webpage.png" width="800" height="800" alt="Web Page"

        3. В файле styles.css на 34 строке есть код background:url('img/webpage.jpg') no-repeat center center white;. Проверьте, чтобы здесь путь к картинке был правильным.
        И всё готово! Желаю успехов!

Добавить комментарий