Публикация в группе: Otshelnik-Fm - мои работы (код, плагины, дополнения, статьи и руководства)

Категории группы: Работаем с Wp-Recall

Добавлено в закладки: 0

В прошлой статье "Фокусируем внимание пользователя на модальном окне. Блюр под ним или уменьшение интенсивности цвета", я писал уже про модальные окна и эффекты к ним.

Там некоторых ситуациях необходимо было написать простейший js код. В этой статье только CSS

Идея анимаций не нова, и я не первый кто про них пишет. Но тут мы работаем с WP-Recall, поэтому я покажу как использовать анимации применительно к всплывающему окну входа и регистрации. А у реколл всплывающая форма не только у формы авторизации ;)

Эту технику я использовал в бесплатном Float Chat и в премиум дополнении личного кабинета Across Ocean PRO. Делюсь с вами.

Начало:

Теории не будет – интернет ею завален. Сразу в бой:

  1. Определяем класс всплывающего блока который мы анимируем. Если вы не умеете работать с консолью разработчика - учитесь
  2. Применяем к нему анимацию и время ее действия
  3. Анимация – это ключевые кадры от 0% до 100% - можно их наплодить сколь угодно и все выходит очень просто.

 


Класс всплывающего блока определили, теперь применим к нему css. Эффект когда форма сверху вниз опустится, с плавным появлением:

Вписываем это в ваш стилевой файл, сохраняем - смотрим.

Не знаете куда вставить стили чтобы не затерлись после обновления? Посмотрите в сторону Alpha fixator - на своем сайте я пишу в него небольшие правки и сниппеты.

Все. Больше ничего.

Демо анимации всплывающей формы входа и регистрации

На просторах интернета я нашел на гитхабе большой список анимаций (14 видов). Но к сожалению кому он принадлежал, сейчас не вспомню - если вы укажете на него линк - добавлю в эту статью.

Скачивайте этот список, делайте ваши сайты удобными и красивыми. Дьявол в мелочах!

Рейтинг: 5

Автор публикации

не в сети 6 часов

Otshelnik-Fm

3 190

http://across-ocean.otshelnik-fm.ru/ - список моих работ к плагину WP-Recall

Birthday in Profile - реализовал в дополнении виджет именинников.

Комментарии: 756Публикации: 100Регистрация: 27-01-2013Продаж/Покупок: 3666/105