Анимация AJAX загрузки. Эффект размытия.

Давно хотел сделать так, чтобы при загрузке информации в какой-либо блок (к примеру, AJAX-ом) помимо обычного прелоадера сам блок бы еще размывался.

Собственно пример можно посмотреть здесь: https://jsfiddle.net/va61mk5t/1/

HTML:

JS:

CSS:

Для отображения анимации производятся следующие манипуляции:

  • создаётся родительский дивник
  • в него prepend-ом пихается дивник оверлея с картинкой-прелоадером по центру
  • сам блок blur-ится (размывается)

Когда необходимо отключить анимацию загрузки — производим всё в точности наоборот:

  • родительский дивник убиваем
  • дивник оверлея убиваем
  • размытие убираем

 

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *