Элегантное модальное окно на CSS Scale Transform + 2 эффекта
↓ Также Вам будет интересно ↓
Модальное окно на css стало одним из самых важных элементов для современного сайта. Это полезно для отображения дополнительной информации, простой страницы, например форма входа, регистрации и так далее. В этой статье мы рассмотрим создание модального окна с использованием CSS3 Scale Transform, для элегантности окна.
Функции Scale Transform
Наша цель – оживить модальное окно при его открытии пользователем. Мы сделаем 2 эффекта, увеличения (in) и уменьшения (out). Как мы знаем, есть свойство CSS3 для масштабирования элементов: transform : scale(scale value)
. Используя это свойство мы можем создать наши эффекты анимации увеличения и уменьшения.
Для анимации увеличения (in), масштабирование transform будет иметь значение от 1,2
вначале и до 1
в конце. Анимация уменьшение (out) соответственно: от 0,7
вначале и до 1
в конце. Это означает, что значение transform scale элемента, по умолчанию 1.
Создание HTML & CSS
Наше модальное окно имеет обертку, для отличия его с главной страницей. Это класс overlay-container
, который будет иметь радиальный градиент.
1 2 3 4 5 6 7 8 |
<div class="overlay-container"> <div class="window-container zoomin"> <h3>Модальное окно, эффект "in"</h3> Мы используем CSS3 transform: scale() <br/> От <strong>scale(1.2)</strong> к scale(1) с эффектом перехода <strong>от Вас</strong> :) <br/> <span class="close">Закрыть</span> </div> </div> |
И задаем необходимые стили 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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
.overlay-container { display: none; content: " "; height: 100%; width: 100%; position: absolute; left: 0; top: 0; background: radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%); } .window-container { display: block; background: #fcfcfc; margin: 8em auto; width: 500px; padding: 10px 20px 20px; text-align: left; z-index: 3; border-radius: 3px; box-shadow: 0px 0px 30px rgba(0,0,0,0.2); transition: 0.4s ease-out; opacity: 0; } .window-container h3 { margin: 1em 0 0.5em; font-family: "Oleo Script"; font-weight: normal; font-size: 25px; text-align: center; } .close { margin: 1em auto; display: block; width: 52px; background: linear-gradient(top, #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%); border: 1px solid #aaa; padding: 5px 14px; color: #444; font-family: Helvetica, sans-serif; font-size: 12px; border-radius: 3px; box-shadow: 0 1px 3px #ddd; transition: 0.2s linear; cursor: pointer; } .close:hover { background: linear-gradient(top, #fefefe 0%,#f8f8f8 40%,#e9e9e9 100%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); border: 1px solid #aaa; } .close:active { background: linear-gradient(to bottombottom, #f4f4f4 0%,#efefef 40%,#dcdcdc 100%); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); } |
Модальное окно с классом window-container
будет иметь простой белый фон с гладкими черными тенями, в то время как кнопка закрытия имеет обычные стили, которые Вы можете изменить под себя. Модальное окно также имеет значение прозрачности opacity
равное 0 по умолчанию, transition
0,4 и значение ease-out
. при активации эффекта анимации увеличение, мы устанавливаем значения transform scale
(1.2), тогда как уменьшения (0,7).
1 2 3 4 5 6 7 8 9 10 11 12 |
.zoomin { transform: scale(1.2); } .zoomout { transform: scale(0.7); } .window-container-visible { transform: scale(1); opacity: 1; } |
Существует также класс window-container-visible
, который стоит перед другим. Этот класс будет вводится в window-container
, чтобы запустить анимацию увеличения или уменьшения масштаба.
Эффекты JQuery
Ещё, что нужно сделать, это создание события для показа модального окна. Используя нажатие на кнопку мы покажем overlay-container
вместе с FadeIn ()
и задержкой 100 мс, пока не вводить класс window-container-visible
до window-container
, чтобы запустить эффект анимации. И последнее что необходимо, это добавить событие нажатия кнопки, чтобы закрыть модальное окно.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$('.button').click(function() { type = $(this).attr('data-type'); $('.overlay-container').fadeIn(function() { window.setTimeout(function(){ $('.window-container.'+type).addClass('window-container-visible'); }, 100); }); }); $('.close').click(function() { $('.overlay-container').fadeOut().end().find('.window-container').removeClass('window-container-visible'); }); |
Заключение
Используя scale transform
мы можем улучшить внешний вид модального окна и сделать его более элегантным. Если у Вас есть ещё какие-то идеи, Вы можете свободно экспериментировать. Успехов!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко