Элегантное модальное окно на CSS Scale Transform + 2 эффекта | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSЭлегантное модальное окно на CSS Scale Transform + 2 эффекта
Дата: 17.05.2013 в 13:50 | Просмотров: 6315

Элегантное модальное окно на CSS Scale Transform + 2 эффекта

создание модального окна, модальное окно на css
Скачатьбесплатно с сервера
Демодемонстрация

Модальное окно на 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, который будет иметь радиальный градиент.

И задаем необходимые стили css:

Модальное окно с классом window-container будет иметь простой белый фон с гладкими черными тенями, в то время как кнопка закрытия имеет обычные стили, которые Вы можете изменить под себя. Модальное окно также имеет значение прозрачности opacity равное 0 по умолчанию, transition 0,4 и значение ease-out. при активации эффекта анимации увеличение, мы устанавливаем значения transform scale (1.2), тогда как уменьшения (0,7).

Существует также класс window-container-visible, который стоит перед другим. Этот класс будет вводится в window-container, чтобы запустить анимацию увеличения или уменьшения масштаба.

Эффекты JQuery

Ещё, что нужно сделать, это создание события для показа модального окна. Используя нажатие на кнопку мы покажем overlay-container вместе с FadeIn () и задержкой 100 мс, пока не вводить класс window-container-visible до window-container, чтобы запустить эффект анимации. И последнее что необходимо, это добавить событие нажатия кнопки, чтобы закрыть модальное окно.

Заключение

Используя scale transform мы можем улучшить внешний вид модального окна и сделать его более элегантным. Если у Вас есть ещё какие-то идеи, Вы можете свободно экспериментировать. Успехов! ;)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.webstuffshare.com
Перевел: Владислав Бондаренко


Добавить комментарий