—»     —»   Эффект наложения с пояснением на jQuery
  Раздел: Руководства   Комментариев: 2  

Эффект наложения с пояснением на jQuery

Эффект наложения с пояснением на jQuery

Сегодня мы научимся создавать простой эффект наложения с отображением пояснения или примечания. Данный эффект отлично подойдет для сайта-портфолио дизайнеров. Идея была взята с изумительного сайта-портфолио www.rareview.com, где для реализации подобного эффекта используется технология Flash. Но сегодня мы воспользуемся jQuery.

Шаблоны веб-сайтов, для которых мы будем выводить пояснение, были найдены посредством подборки из 60 высококачественных бесплатных веб-шаблонов на сайте Honkiat.com.

Итак, приступим к разработке разметки!

Разметка

HTML-код достаточно прост: у нас есть основная обложка «portfolio», в которой у нас заключены элементы «portfolio_item». Каждый из элементов имеет собственный «image_wrap» со скриншотом веб-сайта, а также «zoom_overlay» с изображением веб-сайта со включенной заметкой:

<div class="portfolio">
    <div class="portfolio_item">
        <div class="image_wrap">
            <img src="images/website1.jpg" alt="Website1"/>
        </div>
        <div class="zoom_overlay">
            <img src="images/website1_notes.png" alt="Website1Notes"/>
        </div>
    </div>
    ...
</div>

Теперь давайте добавим стилизации.

CSS-код

Начнем с оформления большой обложки портфолио:

.portfolio{
    width:500px;
    margin:0 auto;
    position:relative;
}

Пунктам портфолио будут заданы следующие стили:

.portfolio_item{
    position:relative;
    margin:30px auto;
}

DIV image_wrap, который содержит скриншот и который мы видим изначально, представляет собой табличный перечень, так как нам нужно отобразить изображение внутри него по центру:

.image_wrap{
    width:500px;
    height:500px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    position:relative;
    cursor:pointer;
}

По горизонтали выравнивание производится посредством text-align:center. Это сработает, так как изначально изображению задан параметр отображения «inline».

Далее мы добавим немного красивой тени вокруг изображения:

.image_wrap > img{
    vertical-align:middle;
    margin:0 auto;
    position:relative;
    -moz-box-shadow:1px 1px 7px #000;
    -webkit-box-shadow:1px 1px 7px #000;
    box-shadow:1px 1px 7px #000;
}

Для того чтобы заработал наш эффект jQuery, нам нужно будет «оживить» ширину изображения. Выравнивание по горизонтали должно центрировать изображение, но здесь недостаточно использовать просто text-align. Нам также нужно добавить автоматические поля для того, чтобы заработала анимация.

DIV overlay будет расположен в абсолютном параметре, так как нам нужно, чтобы он появлялся поверх изображения. Для его центрирования мы применим 50% отрицательного поля:

.zoom_overlay{
    width:400px;
    height:400px;
    margin:-200px 0px 0px -200px;
    background:transparent url(../images/overlay.png) repeat top left;
    position:absolute;
    top:50%;
    left:50%;
    display:none;
    opacity:0;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    cursor:pointer;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

Уровень прозрачности установлен на 0, так как нам нужно анимировать его при показе.

Изображение с заметкой по умолчанию будут скрыты:

.zoom_overlay img{
    display:none;
}

Теперь мы закончили работу над стилизацией. Давайте добавим немного магии.

javascript-код

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

var $portfolio    = $('#portfolio');

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

$portfolio.find('.image_wrap').bind('click',function(){
    var $elem    = $(this);
    var $image    = $elem.find('img:first');
    $image.stop(true)
          .animate({
            'width'    :'400px',
            'height':'400px'
          },250);

    //the overlay is the next element
    var opacity    = '1';
    if($.browser.msie)
        opacity    = '0.5'
    $elem.next()
         .stop(true)
         .animate({
            'width'        :'500px',
            'height'    :'500px',
            'marginTop'    :'-250px',
            'marginLeft':'-250px',
            'opacity'    :opacity
        },250,function(){
            //fade in the annotations
            $(this).find('img').fadeIn();
        });
});

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

$portfolio.find('.zoom_overlay').bind('click',function(){
    var $elem    = $(this);
    var $image    = $elem.prev()
                       .find('img:first');
    //hide overlay
    $elem.find('img')
         .hide()
         .end()
         .stop(true)
         .animate({
            'width'        :'400px',
            'height'    :'400px',
            'marginTop'    :'-200px',
            'marginLeft':'-200px',
            'opacity'    :'0'
         },125,function(){
            //hide overlay
            $(this).hide();
         });

    //show image
    $image.stop(true)
          .animate({
            'width':'500px',
            'height':'500px'
          },250);
});

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

Надеемся, что вам данная статья показалась полезной.

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

Ключевые тэги: javascript, jQuery
Опубликовал Mysterious Master   Прочитано (раз): 8549   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 7 ноября 2010 @ 21:58
Написал: player — группа: Читатели  
На сайте с: 16.04.2010   |   Публикаций: 0   |   Комментариев: 35
ICQ: --- не указано ---
Как всегда очередное спасибо за материал и подробное его объяснение. Ещё хорошо если по совместимости с браузерами написали. wink
Комментарий #2: 8 ноября 2010 @ 13:00
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1492   |   Комментариев: 177
ICQ: --- не указано ---
player, как всегда - пожалуйста smile Дальше будет ...
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2023    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728