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

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

HIT

14.09.2015

11501

4

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

Если возникают проблемы при использовании — необходимо обновить скрипт до последней версии.

Скрипт 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
});

});
Иногда логотип исчезает и не появляется. Чтобы исправить надо добавить логотипу класс visible

Плавное появление товаров 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 колесом при наведении

}

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

  • Комментарии
  • Вложения

Добавить комментарий

4 комментария

  1. Учитель РУССКОГО языка

    Так криво описано, с орфографией проблемы у Вас сударь..

    1. Alexandr

      Каюсь. Грешен.

  2. as

    Добрый день,
    Могли бы пожалуйста рассказать поподробнее о появлении элементов на изначально видимой области экрана. Когда прогружается полностью страница — установил прелоадер — вся анимация уже проходит. Как это исправить?

    1. Alexandr

      Прописал в статье про прелоадер как это можно сделать.

Плавное появление элементов на сайте
Сортировка постов (по дате, по заголовку, по дате изменений)
Рекомендации для васСортировка постов (по дате, по заголовку, по дате изменений)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.