Плавное появление элементов на сайте

Сайты с плавно появляющимся контентом смотрятся более профессионально и дорого. Реализуем данный эффект, тем более что на деле он достаточно просто и быстро делается.

Скрипт viewportcheckerЩ.js отлавливает момент появления блока на экране. Подключаем специальные скрипты в FOOTER

<script src="/wp-content/themes/f-shop/scripts/jquery.viewportchecker.min.js"</script>

<script src="/wp-content/themes/f-shop/scripts/jquery.viewportchecker.min.js.map"></script> — не обязательно, это для инструментов разработчика

И обязательно прописываем CSS

.hidden {opacity:0;}
.visible {opacity:1;}

Запуск и настройки скрипта

Скрипт (лучше отдельно от общего $(document).ready(function() — наблюдались проблемы) добавляем на сайт.
В первой строке кода .block — любой элемент который должен появляться плавно.
Во второй строке кода после visible классы анимирования объекта animated и необходимый эффект появления fadeIn.

$(document).ready(function() {

// Плавное появление элементов
jQuery('.block').addClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeIn',
offset: 100
});

});

Альтернативный (универсальный вариант): плавное появление изображений (всех)

// Плавное появление элементов

$(document).ready(function() {

jQuery('img').addClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeIn',
offset: 100
});

});

Плавное появление изображений (в области c div id=content)

// Плавное появление элементов

$(document).ready(function() {

jQuery("#content").find('img').addClass("hidden").viewportChecker({
classToAdd: 'animated fadeIn visible',
offset: 100
});

});

Плавное появление товаров WC

Добавляем на сайт скрипт, а также прописываем классу .product плавность opacity

$(document).ready(function() {

jQuery(".product").addClass("hidden").viewportChecker({
classToAdd: 'animated fadeIn visible',
offset: 200
});

});

.product {
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s ease;
  -webkit-transition: opacity 0.6s ease 0s;
}

Доработка для табов

Некоторые изначально скрытые элементы могут находится в табах, и при переключении на вкладку содержащую эти элементы их не будет видно. Появятся они только при небольшом скроллинге. Исправим это, добавив небольшой скрипт:

$('.related_tab_tab').click(function() {
	
setTimeout(function(){
   $('li.product, .block-podcategory').addClass("animated fadeIn visible");
}, 500);

});

Плавное появление элементов при загрузке страницы

Чтобы элементы плавно с эффектом animate появлялись на изначально видимой области экрана, нужно в css элементам задать свойство visibility: hidden; и вызвать следующий скрипт:

jQuery(document).ready(function(){

jQuery('.post-image').css('visibility', 'visible');
jQuery('.post-image').addClass('animated fadeInLeft');

});

Многократность эффектов

Чтобы эффекты снова повторялись при возвращении на экран, нужно в скрипт добавить свойство repeat: true. Но у этого свойства есть 2 минуса: во-первых offset начинает действовать и на исчезновение элементов (нужно позаботится о плавности, animated уже не подойдет), во-вторых эффекты появления смотрятся актуально при прокрутке вниз (а в данном решении они будут действовать и при прокрутке вверх).