Создание сайта с нуля. Урок 17 - Верстка. Плавная pop-up галерея (Magnific-Popup)

Это 17-й урок по созданию сайта с нуля под ключ на заказ и сегодня мы поработаем над красивой попап галереей, выполненной с использованием плагина Magnific-Popup.

Смотреть урок на YouTube

Файлы для прохождения урока: Скачать

Magnific-Popup: https://dimsemenov.com/plugins/magnific-popup/

CSS to Sass Converter: https://css2sass.herokuapp.com

Magnific-Popup Animation & Preloader:

// SASS:
.mfp-ready .mfp-figure
  opacity: 0
.mfp-zoom-in
  .mfp-figure, .mfp-iframe-holder .mfp-iframe-scaler
    opacity: 0
    transition: all 0.3s ease-out
    transform: scale(0.95)
  &.mfp-bg, .mfp-preloader
    opacity: 0
    transition: all 0.3s ease-out
  &.mfp-image-loaded .mfp-figure
    opacity: 1
    transform: scale(1)
  &.mfp-ready
    .mfp-iframe-holder .mfp-iframe-scaler
      opacity: 1
      transform: scale(1)
    &.mfp-bg, .mfp-preloader
      opacity: 0.8
  &.mfp-removing
    .mfp-figure, .mfp-iframe-holder .mfp-iframe-scaler
      transform: scale(0.95)
      opacity: 0
    &.mfp-bg, .mfp-preloader
      opacity: 0

.mfp-iframe-scaler
  overflow: visible
.mfp-zoom-out-cur
  cursor: auto
  .mfp-image-holder .mfp-close
    cursor: pointer
.mfp-preloader
  width: 30px
  height: 30px
  background-color: #FFF
  opacity: 0.65
  margin: 0 auto
  animation: rotateplane 1.2s infinite ease-in-out
@-webkit-keyframes rotateplane
  0%
    -webkit-transform: perspective(120px)
  50%
    -webkit-transform: perspective(120px) rotateY(180deg)
  100%
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
@keyframes rotateplane
  0%
    transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  50%
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  100%
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)

// JS:
$('div').magnificPopup({
  mainClass: 'mfp-zoom-in',
  delegate: 'a',
  type: 'image',
  tLoading: '',
  gallery:{
    enabled:true,
  },
  removalDelay: 300,
  callbacks: {
    beforeChange: function() {
      this.items[0].src = this.items[0].src + '?=' + Math.random(); 
    },
    open: function() {
      $.magnificPopup.instance.next = function() {
        var self = this;
        self.wrap.removeClass('mfp-image-loaded');
        setTimeout(function() { $.magnificPopup.proto.next.call(self); }, 120);
      }
      $.magnificPopup.instance.prev = function() {
        var self = this;
        self.wrap.removeClass('mfp-image-loaded');
        setTimeout(function() { $.magnificPopup.proto.prev.call(self); }, 120);
      }
    },
    imageLoadComplete: function() { 
      var self = this;
      setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16);
    }
  }
});

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Большой комплексный курс по современному веб-дизайну

Веб-дизайн с нейросетями для начинающих

Я - фрилансер! Базовый курс для начинающих

Создание сайта с нуля. Урок 17 - Верстка. Плавная pop-up галерея (Magnific-Popup)

Премиум уроки от WebDesign Master

Другие уроки по теме «CMS/Framework»