logo

Lightbox на чистом CSS3 без JavaScript

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

Ранее Lightbox-эффект можно было создать только с помощью Java-скриптов. Однако Java-скрипты не отличаются большой производительностью. Распространение разметки CSS3 и поддержка ее современными браузерами, позволило создавать эффект всплывающего поверх контента изображения без использования Java-скриптов т.е на чистом CSS3.

Используя CSS переходы и анимацию, мы можем сделать вывод увеличенного изображения различными способами.

Псевдокласс :target позволяет сделать переход к элементу с определенным id. Этим мы и воспользуемся для создания эффекта Lightbox.

Для начала создадим блок миниатюр (один из трех, расположенных на демо-странице).


<div class="cat_block">
  <a href="#cat_1"><img class="cat" src="img/cat_1.jpg" alt="" width="240" height="138"></a>
  <a href="#cat_2"><img class="cat" src="img/cat_2.jpg" alt="" width="240" height="138"></a>
  <a href="#cat_3"><img class="cat" src="img/cat_3.jpg" alt="" width="240" height="138"></a>
  <a href="#cat_4"><img class="cat" src="img/cat_4.jpg" alt="" width="240" height="138"></a>
</div>

Блоку для вывода картинки с большим размером присвоим class= «lb»   и id= «cat_1» . Классы и идентификаторы могут иметь любое имя, но чтобы не мудрить использовал lbLightbox, и cat, т.к картинки с кошками. Этот блок первоначально спрятан и при клике на картинку выводиться на экран. Ссылка с class== «lb-close»   позволяет закрыть большую картинку после просмотра. Блок с class= «lb_p»   содержит текст (если это необходимо).

Т.к картинки выводится на экран с различными видами анимации class= «lb»   присвоены еще и числовые значения. Если же вывод картинок будет осуществляться одним способом — достаточно одного класса.


<div class="lb" id="cat_1">
   <img src="img/cat_1.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>Без анимации</p>
   </div>
</div> 
<div class="lb_2" id="cat_2">
   <img src="img/cat_2.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>animation: scaleDown</p>
   </div>
</div> 
<div class="lb_3" id="cat_3">
   <img src="img/cat_3.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>animation: fadeInScale</p>
   </div>
</div> 
<div class="lb_4" id="cat_4">
   <img src="img/cat_4.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>animation: rotate</p>
   </div>
</div> 

Для <div class= «lb» >   прописываем свойство position равное fixed, с нулевой высотой и шириной, а также затемнение основного контента.


.lb{
   width: 0px;
   height: 0px;
   position: fixed;
   overflow: hidden;
   left: 0px;
   top: 0px;
   padding: 0px;
   z-index:1000;
   text-align: center;
 /*затемнение основного контента*/
   opacity:0;
   background: rgba(47,47,56,0.4);       
   transition: opacity 1.2s linear; 
} 

Оформление внешнего вида миниатюр и картинок большего размера каждый делает по своему усмотрению.

Для картинок прописываем:


.lb img {
   max-height: 100%;
   position: relative;
   opacity:1;
/* оформление на свой вкус*/
   border:3px solid #ccc;
   box-shadow: 0px 0px 8px #333;
}

Текст под картинкой:


.lb > .lb_p{
   position: relative;
   opacity:0;
 /* оформление на свой вкус*/
   width: 550px;
   margin:10px auto 0px auto;
   transition: opacity 0.3s linear 1.3s;
}

Ссылка «Закрыть»:


.lb a.lb-close {
   display: block;
   position:absolute;
   z-index: 1001;
 /* оформление на свой вкус*/ 
   top:131px;
   left:46%;
   width:100px;
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 400;
   overflow:hidden;
   opacity: 0;
   transition: opacity  0.5s 1.5s;
} 

Ссылка-якорь в миниатюрах ihref= «#cat-1»   указывает на элемент c id= «#cat-1»  , который представляет собой <div class= «lb» id= «cat_1» > . Для вывода картинки на экран используем псевдоэлемент :target.


/*вывод блока "под картинку" */
.lb:target {
   width: auto;
   height: auto;
   bottom: 0px;
   right: 0px;
   padding: 175px 100px 120px 100px;
}

/* вывод картинки  без анимации */
.lb:target img,
.lb:target a.lb-close,
.lb:target >.lb_p {
   opacity: 1;
}  
 
  /* вывод картинки с анимацией*/

.lb_2:target img {
	animation: scaleDown 1.2s ease-in-out;
}
.lb_2:target a.lb-close,
.lb_2:target,
.lb_2:target >.lb_p {
	opacity: 1;
}
@keyframes scaleDown {
  0% { transform: scale(10,10); opacity: 0; }
  100% { transform: scale(1,1); opacity: 1; }
}

Изменяя время, виды анимации, применяя различные комбинации анимаций можно получить «красивую подачу» любой информации. На демонстрационной странице показаны некоторые виды всплывающих картинок. Но на этом возможности Lightbox не ограничиваются. Дерзайте!!!






Практические примеры, Эффекты для изображений 0

Рекомендую прочитать...

Библиотека Animate.css
animate.css

CSS3 поддерживает покадровую анимацию, которая позволяет создавать сложные анимации объекта. Существует возможность задавать множество параметров работы анимации при помощи свойства animation и правила @keyframen.

Но лучше воспользоваться готовыми решениями, которые позволяют анимировать любой объект. Для этого воспользуемся библиотекой Animate it.

Читать полностью
Трансформация «Дверной глазок»
трансформация Дверной глазок

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

Читать полностью
Анимация при скролле страницы
Анимация при скролле страницы

Как и было обещано в предыдущей статье «Бегущая строка на CSS3» сегодня рассмотрим работу анимации при прокрутке (скролле) страницы. Существуют различные способы для реализации данной проблемы. В статье рассмотрим 2 варианта решения. Они довольно простые и не вызовут затруднений при их реализации.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.