Анимации модальных окон на javascript.
Всем привет! Сегодня мы рассмотрим красивые анимации на javascript - animatedModal.js.
AnimatedModal.js - очень простая в плане использования библиотека. Вы можете перейти по ссылке, скачать ее, а затем подключить вот так:
Вставляем подключение библиотеки между тегами head
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
</head>
Помещаем такой код в body
<body>
<!-- Вызовите ваше модальное окно -->
<a id="demo01" href="#animatedModal">DEMO01</a>
<!-- Демонстрация 01 -->
<div id="animatedModal">
<!-- ЭТО ВАЖНО! Чтобы закрыть модальное окно, имя класса должно совпадать с именем, данным в ID
class="close-animatedModal" -->
<div class="close-animatedModal">
CLOSE MODAL
</div>
<div class="modal-content">
<!-- Здесь идет ваше содержание модального окна -->
</div>
</div>
</body>
В самом конце, перед закрывающим тегом </body>, вставляем следующее
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="yourPath/animatedModal.min.js"></script>
</body>
Осталось только сделать инициализацию
<script>
$("#demo01").animatedModal();
</script>
И теперь вы можете довольствоваться красивыми анимациями, посмотреть которые в работе вы можете на сайте разработчика.
У данной библиотеки есть также некоторые опции
- modalTarget - настройка вашей цели
- color - определить цвет заднего фона
- animatedIn - переход, когда модальное окно появляется
- animatedOut - переход, когда модальное окно исчезает
- animationDuration - длительность анимации
- overflow - делает ваше модальное окно прокручивающимся или нет
Работает в IE10+, Firefox, Chrome, Safari, Opera.
Вот такая простая, однако очень эффектная библиотека.
Спасибо за внимание!
-
Создано 10.03.2015 19:00:00
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.