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

Разметка

Код HTML очень простой. У нас есть основной контейнер “portfolio”, в который добавлены элементы “portfolio_item”. В каждом элементе портфолио содержится div “image_wrap” со снимком веб сайта и div “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. Такой поход работает, потому что изображения имеют по умолчанию установленное свойство display: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 не достаточно. Нам также нужно добавить margin:auto, чтобы анимация работала.

div слоя с комментариями размещается абсолютно, так как нам нужно, чтобы он появлялся над изображением снимка экрана. Для его центрирования используется трюк с отрицательными полями и размещением на 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);
}

Свойство opacity устанавливается в значение 0, потому что мы хотим анимировать прозрачность слоя при выводе его на экран.

При загрузке слой с комментариями скрыт:

.zoom_overlay img{
    display:none;
}

JavaScript

Основная идея эффекта заключается в том, чтобы сделать снимок экрана меньше, а слой с комментариями вывести над ним.

В нашей функции jQuery сначала в переменной сохраняется основной div:

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

Затем мы определяем, что произойдет, когда на снимке экрана будет нажата кнопка мыши. Анимируется изменение высоты и ширины изображения и появляется слой с комментариями. Для слоя с комментариями анимируется изменение его прозрачности, ширины и высоты, а также полей, так как мы центрируем его:

$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);
 
    //слой с комментариями - следующий элемент
    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(){
            //плавно показываем слой с комментариями
            $(this).find('img').fadeIn();
        });
});

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

$portfolio.find('.zoom_overlay').bind('click',function(){
    var $elem   = $(this);
    var $image  = $elem.prev()
                       .find('img:first');
    //Скрываем слой с комментариями
    $elem.find('img')
         .hide()
         .end()
         .stop(true)
         .animate({
            'width'     :'400px',
            'height'    :'400px',
            'marginTop' :'-200px',
            'marginLeft':'-200px',
            'opacity'   :'0'
         },125,function(){
            //Скрываем слой с комментариями
            $(this).hide();
         });
 
    //Показываем изображение
    $image.stop(true)
          .animate({
            'width':'500px',
            'height':'500px'
          },250);
});

Добавлено: 31 Марта 2018 06:58:11 Добавил: Андрей Ковальчук Нравится 0

Добавить