- Метки урока:
- модальные окна
- css
Модальные окна с красивыми эффектами
Сегодня мы хотим поделиться скриптами модальных окон с красивыми эффектами. Различных вариаций очень много, так что каждый сможет найти своё.
Идея в том, что модальное окошко нужно показать при клике на кнопку (элемент страницы); далее последует приятная анимация и собственно появляется окно.
На версиях iOS < 6 мобильной версии Safari, могут быть проблемы с отображением.
Структура модального окна делится на контейнер и контент:
<div class="md-modal md-effect-1" id="modal-1"> <div class="md-content"> <h3>Modal Dialog</h3> <div> <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> Modal windows will probably tell you something important so don't forget to read what it says.</li> <li><strong>Look:</strong> modal windows enjoy a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button below to close the modal.</li> </ul> <button class="md-close">Close me!</button> </div> </div> </div> ... <div class="md-overlay"></div>
Основной контейнер будет отображаться или скрываться (используя класс “md-show”), а внутренний контент будет анимироваться. Оформляем окна следующими селекторами:
.md-modal { position: fixed; top: 50%; left: 50%; width: 50%; max-width: 630px; min-width: 320px; height: auto; z-index: 2000; visibility: hidden; backface-visibility: hidden; transform: translateX(-50%) translateY(-50%); } .md-show { visibility: visible; } .md-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(143,27,15,0.8); transition: all 0.3s; } .md-show ~ .md-overlay { opacity: 1; visibility: visible; }
Для некоторых эффектов добавим класс html элементам. В особенности для применения 3D эффектов. Заметьте это, что мы применяем всё это к всей странице и контенту:
.md-perspective, .md-perspective body { height: 100%; overflow: hidden; } .md-perspective body { background: #222; perspective: 600px; } .container { background: #e74c3c; min-height: 100%; }
Для контроля различных эффектов, создадим специальные классы, ответственные за специфический эффект и анимацию. Пример индивидуального эффекта:
/* Effect 5: newspaper */ .md-show.md-effect-5 ~ .md-overlay { background: rgba(0,127,108,0.8); } .md-effect-5 .md-content { transform: scale(0) rotate(720deg); opacity: 0; transition: all 0.5s; } .md-show.md-effect-5 .md-content { transform: scale(1) rotate(0deg); opacity: 1; }
У кнопок воспользуемся атрибутом data-* для того чтобы задать источник контента модального окна:
<button class="md-trigger" data-modal="modal-5">Newspaper</button>
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/
Перевел: Станислав Протасевич
Урок создан: 3 Июля 2013
Просмотров: 70514
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.