Эффектный вывод дополнительной информации в галерее изображений

  • Главная»
  • Уроки»
  • jQuery»
  • Эффектный вывод дополнительной информации в галерее изображений

Сделаем интересный эффект с помощью CSS3 и jQuery. Идея заключается в формировании покрывающего полупрозрачного слоя, который выдвигается поверх картинки со стороны перемещения курсора мыши. При дальнейшем движении курсора покрывающий слой сдвигается вслед за ним. Подобный эффект можно использовать для галерей и портфолио работ.

 

HTML

Мы используем неупорядоченный список для построения структуры для демонстрации. В элементе списка размещаются миниатюра и покрывающий слой:

				<ul id="da-thumbs" class="da-thumbs">
					<li>
						<a href="http://ruseller.com/lessons.php?rub=37&id=1392" target="_blank">
							<img src="/images/1.jpg" />
							<div><span>Единая страница для обработки ошибок</span></div>
						</a>
					</li>
					<li>
						<!-- ... -->
					</li>
					<!-- ... -->
				</ul>


 

CSS

Пункт списка будет смещаться влево и позиционируется относительно, потому что покрывающий позиционируется абсолютно:

.da-thumbs li {
    float: left;
    margin: 5px;
    background: #fff;
    padding: 8px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
    display: block;
    position: relative;
}
.da-thumbs li a {
    overflow: hidden;
}
.da-thumbs li a div {
    position: absolute;
    background: rgba(75,75,75,0.7);
    width: 100%;
    height: 100%;
}

Затем определяем некоторые классы, которые будут добавляться в коде JavaScript. Нам нужен класс анимации, несколько классов для начального позиционирования покрывающего слоя, и два класса для конечного положения. Несмотря на то, что все может быть выполнено в JavaScript, но лучше иметь отдельные стили, чтобы можно было легко настраивать внешний вид:

.da-thumbs li a div.da-animate {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
/* Классы начального полжения: */
.da-slideFromTop {
    left: 0px;
    top: -100%;
}
.da-slideFromBottom {
    left: 0px;
    top: 100%;
}
.da-slideFromLeft {
    top: 0px;
    left: -100%;
}
.da-slideFromRight {
    top: 0px;
    left: 100%;
}
/* Классы конечного положения: */
.da-slideTop {
    top: 0px;
}
.da-slideLeft {
    left: 0px;
}

 

JavaScript

Вот что будет происходить: в зависимости от места появления курсора мыши на миниатюре будет присоединяться соответствующий класс, который будет устанавливать правильное начальное положение покрывающего слоя. Затем применяется анимационный класс и затем мы добавляем класс конечного положения, так что покрывающий слой выскальзывает с нужной стороны. Когда курсор мыши покидает элемент, снова присоединяется соответствующий начальный класс и удаляетя класс конечного положения.

Вот так выглядит основная часть нашего маленького плагина:

this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
 
    var $el         = $(this),
        evType      = event.type,
        $hoverElem  = $el.find( 'div' ),
        direction   = _self._getDir( $el, { x : event.pageX, y : event.pageY } ),
        hoverClasses= _self._getClasses( direction );
 
    $hoverElem.removeClass();
 
    if( evType === 'mouseenter' ) {
 
        $hoverElem.hide().addClass( hoverClasses.from );
 
        clearTimeout( _self.tmhover );
 
        _self.tmhover   = setTimeout( function() {
 
            $hoverElem.show( 0, function() {
                $(this).addClass( 'da-animate' ).addClass( hoverClasses.to );
            } );
 
        }, _self.options.hoverDelay );
 
    }
    else {
 
        $hoverElem.addClass( 'da-animate' );
 
        clearTimeout( _self.tmhover );
 
        $hoverElem.addClass( hoverClasses.from );
 
    }
 
} );

События ‘mouseenter’ и ‘mouseleave’ привязываются к пункту списка. С помощью функции _getDir определяем направление перемещения курсора мыши в область элемента (область виртуально делится на четыре треугольника для определения направления). Все классы изначально удаляются и в зависимости от входа или выхода курсора мыши в область устанавливаются либо все три класса,ибо только классы анимации и начального положения.

В демонстрации также представлены варианты с задержкой перемещения покрывающего слоя и с инверсией движения.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/JF3B4v-jxfs/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Эффектный вывод дополнительной информации в галерее изображений | | 2012-06-19 11:58:38 | | Статьи Web-мастеру | | Главная» Уроки» jQuery» Эффектный вывод дополнительной информации в галерее изображений Сделаем интересный эффект с помощью CSS3 и jQuery. Идея заключается в формировании покрывающего полупрозрачного | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: