Запустим чистый шаблон командой gulp.
Зайдем в index.html и создадим класс imgs с вложенными картинками.
Присвоим стили css. В браузере отражаться будет.
Код в index.html.
Установим magnific-popup
Установим magnific-popupкак в этой статье. После подключения плагина откроем common.js. Добавим функцию magnific-Popup и зададим ей параметры в фигурных скобках type: image и gallery: enabled: true появятся стрелочки вправо и влево получится подобие галереи fotorama. Нажимаем в браузере на картинку, она приблизится. Код в common.js.
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { $(".pic").magnificPopup({ type: 'image', gallery: { enabled: true }, removalDelay: 300, mainClass: 'mfp-fade' }); }); |
Сделаем анимацию картинки.
Зайдем на сайт 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
img display: inline-block width: 250px max-width: 100% .mfp-fade.mfp-bg opacity: 0 transform: scale(0) rotate(180deg) -webkit-transition: all 0.15s ease-out -moz-transition: all 0.15s ease-out transition: all 0.15s ease-out .mfp-fade.mfp-bg.mfp-ready opacity: 0.8 transform: scale(1) rotate(0deg) .mfp-fade.mfp-bg.mfp-removing opacity: 0 .mfp-fade.mfp-wrap .mfp-content opacity: 0 -webkit-transition: all 0.15s ease-out -moz-transition: all 0.15s ease-out transition: all 0.15s ease-out .mfp-fade.mfp-wrap.mfp-ready .mfp-content opacity: 1 .mfp-fade.mfp-wrap.mfp-removing .mfp-content opacity: 0 |