—»     —»   Эффект лупы в стиле приложений Apple на jQuery
  Раздел: Руководства   Нет комментариев  

Эффект лупы в стиле приложений Apple на jQuery



* Демо-файл * Скачать

Компания Apple уже долгое время держится выигрышной стратегии – создает продукты с отличным привлекательным дизайном. Продукты компании уже сформировали определенную аудиторию почитателей, а грядущие продукты начинают расхваливать и рекламировать задолго до их выпуска на рынок.

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

Эффект лупы в стиле приложений Apple на jQuery

Посмотрите на изображение с сайта apple.com

Нас поразило то, что можно преобразовать статичное изображение в полнофункциональную лупу всего лишь применив CSS и jQuery. Это именно то, что мы сегодня будем делать в нашей статье. Итак, скачайте демо-файл по ссылке сверху и продолжайте читать.

Кажется, что команде Apple тоже понравилась данная технология, и они применили еще на официальном сайте.

Этап 1: XHTML

Код для нужного эффекта достаточно прост и понятен. Здесь всего пару DIV’ов и изображение.

Demo.html

<div id="main">

    <div id="iphone">
        <div id="webpage">
            <img src="img/webpage.png" width="499" height="283" alt="Web Page" />
            <div id="retina"></div>
        </div>
    </div>

</div>

DIV под названием "#iphone" отображает рамку iPhone. Внутри расположен DIV "#webpage", в котором мы видим скриншот страницы. Скриншот, на самом деле, отображается в половину натуральной величины, и мы будем использовать изображение в качестве маленькой версии (отображено на экране iPhone) и в качестве большой версии, которая отображена внутри закругленной подсказки.

И, наконец, идет DIV с сеткой, углы которого закруглены посредством CSS3, а внутри отображен скриншот страницы в качестве фона.

Эффект лупы в стиле приложений Apple на jQuery

Соединяем все вместе

Этап 2: CSS

Переходим к части редактирования кода CSS. Здесь мы будем оформлять DIV’ы iphone, webpage и retina для того, чтобы добиться нужного эффекта.

Styles.css

#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('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;
}

Указав абсолютное позиционирование DIV’у webpage, мы можем применить технику вертикального или горизонтального центрирования, что поможет нам отобразить скриншот в центре рамки iPhone.

DIV retina точно также оснащаем абсолютным позиционированием для того, чтобы его возможно было перемещать посредством jQuery, просто указывая верхний и левый отступы. В этом DIV также есть скриншот в качестве фона (в его оригинальном размере). Смещая фон посредством перемещения DIV’a, создается иллюзия углубления из-за маленького скриншота, который находится под ним.

Эффект лупы в стиле приложений Apple на jQuery

Эффект лупы (Retina)

DIV’у retina мы также применяем border radius со значением в половину ширины DIV’а, что дает нам идеальную окружность (по крайней мере, в тех браузерах, в которых есть поддержка параметра border-radius CSS3: Chrome, Safari, Opera и Firefox.

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

Этап 3: jQuery

На этот раз мы будем пользоваться той же технологией для создания эффекта, который мы видим на официальном сайте Apple.

Так как у нас уже расписано все оформление, то пришло время написать пару строк кода javascript, который поможет работе библиотеки jQuery.

Script.js

$(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, но они абсолютны относительно всего документа. Нам нужно сделать так, чтобы они позиционировались относительно DIV’а retina.

Это и параметр пустого курсора, который мы прошли в части статьи о CSS, создает эффект лупы. В итоге мы получаем эффект посредством чистого кода javascript и CSS.

Заключение

Так как в последнее время в сети полно горячих споров о flash и HTML5, люди стали пытаться найти способы реализации эффектов, которые раньше достигались посредством Flash, без использования сторонних плагинов. Это уже реально для простых эффектов, но мы все равно не можем быть пока на 100% уверенными в том, что приложение будет работать во всех браузерах. Всегда нужно помнить об Internet Explorer.

Надеемся, что сегодня мы предоставили вам немного материала на тему того, что можно сделать без использования Flash.

Что вы думаете по поводу этого эффекта? Как вы думаете, есть ли какие-то пути улучшения?
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, Apple, CSS
Опубликовал Design FactoRy   Прочитано (раз): 8769   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2019    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031