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

JavaScript, Без рубрики, Полезности

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

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

HTML:

<button onclick="start_stop_animation('.text_block');">Запустить/Остановить анимацию загрузки</button>

<div class='text_block'>
  Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. 
</div>

<div>
  Какой то текстовый блок дальше...
</div>

JS:

function loading_animation_start(block){
	$(block).wrap( '<div class="main_overlay_block"></div>' );
  $('.main_overlay_block').prepend('<div class="overlay_block"></div>');
  $(block).addClass('loading_process');
}

function loading_animation_end(block){
  $(block).unwrap();
  $('.overlay_block').remove();
  $(block).removeClass('loading_process');
}

function start_stop_animation(block){
	if ($(block).parent().is('.main_overlay_block')){
  	loading_animation_end(block);
  } else {
  	loading_animation_start(block);
  }
}

CSS:

.overlay_block{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(https://web-finder.ru/files/preloader1.gif) center center no-repeat;
  z-index: 9999;
}

.loading_process{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  filter: blur(5px);
}

.main_overlay_block{
  position: relative;
}

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

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

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

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