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

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


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

Установка.
Мы используем неупорядоченный список для построения структуры для демонстрации. В элементе списка размещаются миниатюра и покрывающий слой:
Код
<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>


Пункт списка будет смещаться влево и позиционируется относительно, потому что покрывающий позиционируется абсолютно:
Код
.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;
}


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

Вот так выглядит основная часть нашего маленького плагина:
Код
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 определяем направление перемещения курсора мыши в область элемента (область виртуально делится на четыре треугольника для определения направления). Все классы изначально удаляются и в зависимости от входа или выхода курсора мыши в область устанавливаются либо все три класса,ибо только классы анимации и начального положения.

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

  Просмотров: 3234 | Категория: Скрипты / HTML | Добавил: NA

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.