Эффект наложения с пояснением на 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);
});

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

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

Посмотреть демо | Скачать архивом