В прошлой статье "Фокусируем внимание пользователя на модальном окне. Блюр под ним или уменьшение интенсивности цвета", я писал уже про модальные окна и эффекты к ним.
Там некоторых ситуациях необходимо было написать простейший js код. В этой статье только CSS
Идея анимаций не нова, и я не первый кто про них пишет. Но тут мы работаем с WP-Recall, поэтому я покажу как использовать анимации применительно к всплывающему окну входа и регистрации. А у реколл всплывающая форма не только у формы авторизации
Эту технику я использовал в бесплатном Float Chat и в премиум дополнении личного кабинета Across Ocean PRO. Делюсь с вами.
Начало:
Теории не будет – интернет ею завален. Сразу в бой:
- Определяем класс всплывающего блока который мы анимируем. Если вы не умеете работать с консолью разработчика - учитесь
- Применяем к нему анимацию и время ее действия
- Анимация – это ключевые кадры от 0% до 100% - можно их наплодить сколь угодно и все выходит очень просто.
Класс всплывающего блока определили, теперь применим к нему css. Эффект когда форма сверху вниз опустится, с плавным появлением:
.panel_lk_recall.floatform { animation-duration: 0.55s; /* Время работы анимации */ animation-fill-mode: both; /* Поведение анимации */ animation-name: fadeInDown; /* Имя анимации */ } @keyframes fadeInDown { /* Сама анимация */ 0% { /* Старт анимации */ opacity: 0; transform: translate3d(0px, -100%, 0px); } 100% { /* в финале анимации - финал это заданная 0.55s */ opacity: 1; transform: none; } }
Вписываем это в ваш стилевой файл, сохраняем - смотрим.
Не знаете куда вставить стили чтобы не затерлись после обновления? Посмотрите в сторону Alpha fixator - на своем сайте я пишу в него небольшие правки и сниппеты.
Все. Больше ничего.
Демо анимации всплывающей формы входа и регистрации
На просторах интернета я нашел на гитхабе большой список анимаций (14 видов). Но к сожалению кому он принадлежал, сейчас не вспомню - если вы укажете на него линк - добавлю в эту статью.
Скачивайте этот список, делайте ваши сайты удобными и красивыми. Дьявол в мелочах!
Супер 8)
Классно придумано 😀 8)
Спасибо за полезную статью