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

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

Скрипт 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 уже не подойдет), во-вторых эффекты появления смотрятся актуально при прокрутке вниз (а в данном решении они будут действовать и при прокрутке вверх).

Отложенная подгрузка карты Яндекс

if($("div").is("#YMapsID")) {
	$(document).ready(function() { 
		jQuery("#YMapsID").viewportChecker({
			callbackFunction: function(elem, action){
				$("head").append("<script src='/wp-content/themes/undersun/js/yandex-maps-min.js' defer='defer' type='text/javascript'></script>");
				
				ymaps.ready(function () {
					var myMap = new ymaps.Map('YMapsID', {
						center: [45.048590, 38.972340],
						zoom: 14,
						controls: ['smallMapDefaultSet']
					});

					myMap.geoObjects
						.add(new ymaps.Placemark([45.048590, 38.972340], {
							balloonContent: '',
							iconCaption: 'Красных Партизан, 134'
						}, {
							preset: 'islands#redCircleDotIconWithCaption',
							iconCaptionMaxWidth: '200'
						}));

					myMap.behaviors.disable('scrollZoom'); //Отключаем zoom колесом при наведении
				});
			}
		});
	});
}

Блок вывода карты

<div id="YMapsID" style="width: 100%; height: 400px;"></div>

Новый вывод отложенной карты Яндекс

Прежнее решение перестало работать из-за каких то изменений в скриптах Яндекс

// Подгрузка скрипта
$(document).ready(function() { 
	jQuery("#YMapsID").viewportChecker({
		callbackFunction: function(elem, action){

			var elem = document.createElement('script');
			elem.type = 'text/javascript';
			elem.src = 'https://api-maps.yandex.ru/2.1/?lang=ru_RU&onload=getYaMap';
			document.getElementsByTagName('body')[0].appendChild(elem);

		}, offset: -200
	});
});

// Запуск функции инициализации карты
function getYaMap(){
	
	var myMap = new ymaps.Map('YMapsID', {
		center: [47.219654, 39.712722],
		zoom: 14,
		controls: ['smallMapDefaultSet']
	});

	// Стандартная метка
	myMap.geoObjects
		.add(new ymaps.Placemark([47.219654, 39.712722], {
		balloonContent: '',
		iconCaption: ''
	}, {
		preset: 'islands#blackCircleDotIconWithCaption',
		iconCaptionMaxWidth: '200'
	}));

	// Дополнительная иконка
	myPlacemark = new ymaps.Placemark(
		[47.219654, 39.712722] //myMap.getCenter() - чтобы брать координаты по центру карты
		, {
			hintContent: 'Журавли'
		}, {
			iconLayout: 'default#image', // Необходимо указать данный тип макета
			iconImageHref: '/wp-content/uploads/2020/09/map-marker.png',
			iconImageSize: [59, 85], // Размеры метки
			iconImageOffset: [-29, -85] // Смещение левого верхнего угла иконки относительно её точки привязки
		})

	myMap.geoObjects.add(myPlacemark);

	myMap.behaviors.disable('scrollZoom'); //Отключам zoom колесом при наведении

}

Поделиться в соц. сетях: