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

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

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

Создание сайта с нуля. Урок #17: Верстка. Плавная pop-up галерея (Magnific-Popup) - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

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

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

CSS to Sass Converter: http://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

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

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

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

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

  • Ajax фильтр на MODx Revolution
  • Посадка типовой секции Landing Page на MODx с использованием MIGX (добавляемые поля)
  • Настройка прав доступа для контент-менеджера в MODX Revolution
  • MODX Revolution - Базовый урок
  • Как создать шаблон для WordPress. Грамотная посадка верстки на WordPress (Right Way)
  • Быстрое создание красивых сайтов на WordPress. Layers Style Kit на реальном примере

Разделы сайта:

  • Курсы
  • Инструменты
  • Веб-дизайн
  • Вёрстка
  • CMS

Полезные ресурсы:

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp 4
2023 © WebDesign Master