Август 2017
Автор: Рубрика: Верстка Комментариев нет

Всплывающая картинка плагином magnificPopup


Всплывающая картинка плагином magnificPopup

Запустим чистый шаблон командой gulp.

Зайдем в index.html и создадим класс imgs с вложенными картинками.

Присвоим стили css. В браузере отражаться будет.

Код в index.html.

Код в index.html для popup

Установим magnific-popup

Установим magnific-popupкак в этой статье. После подключения плагина откроем common.js. Добавим функцию magnific-Popup и зададим ей параметры в фигурных скобках type: image и gallery: enabled: true появятся стрелочки вправо и влево получится подобие галереи fotorama. Нажимаем в браузере на картинку, она приблизится. Код в common.js.

Установим magnific-popup

Сделаем анимацию картинки.

Зайдем на сайт magnific-popup пункт animation и по инструкции сделаем анимацию появление окон.

Для этого пропишем removalDelay: 300, mainClass: 'mfp-fade скопировав с сайта.

Добавим transitions, скопировав, участок кода с сайта и вставим в main.sass.

Поменяв код под sass.

Делаем эффекты

  • У свойства где прозрачность opacity: 0 добавим transform: scale (0).
  • У opacity: 0.8 добавим transform: scale (1). Теперь картинка будет не только плавно появляться, но еще и с зумом.
  • Добавим к transform rotate (180deg) где прозрачность ноль
  • к opacity: 0.8 добавим rotate (0deg). Будет эффект разворота картинки при появлении.

Код в common.css.

Комментариев нет