Сайты с плавно появляющимся контентом смотрятся более профессионально и дорого. Реализуем данный эффект, тем более что на деле он достаточно просто и быстро делается.
Если возникают проблемы при использовании — необходимо обновить скрипт до последней версии.
Скрипт 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 уже не подойдет), во-вторых эффекты появления смотрятся актуально при прокрутке вниз (а в данном решении они будут действовать и при прокрутке вверх).
Как добиться того, чтобы эффекты работали только при прокрутке вниз
Так криво описано, с орфографией проблемы у Вас сударь..
Каюсь. Грешен.
Добрый день,
Могли бы пожалуйста рассказать поподробнее о появлении элементов на изначально видимой области экрана. Когда прогружается полностью страница — установил прелоадер — вся анимация уже проходит. Как это исправить?
Прописал в статье про прелоадер как это можно сделать.