Здравствуйте, сегодня рассмотрим как заставить блок с контентом появиться на сайте с задержкой.
Скачать исходники для статьи можно ниже
1. Размещаем контент между тегами “div” и добавим пользовательский идентификатор или класс к нему.
<div class="my-class"></div>
Если вы хотите разместить контент с задержкой в записи/странице wordpress, то вам нужно зайти на страницу “Создать запись”/”Создать страницу” и зайти во вкладку “Текст” – здесь можно вставлять вышеуказанный код:
2. Далее скрываем контент, который будет появляться с задержкой. Вы можете сделать это, добавив следующие строки в ваш файл CSS:
.my-class {
display: none;
}
В wordpress файл стилей можно найти если зайти в админку, далее выбрать пункт “Внешний вид” в левом меню и подпункт “Редактор”, справа в списке шаблонов выбираем файл – style.css.
3. Далее нужно добавить следующий JavaScript, на той странице сайта, на которой вы хотите разместить контент с задержкой:
<script>
$(document).ready(function() {
$('.my-class').delay(1000).fadeIn(500);
});
</script>
Здесь delay(1000) – регулирует время задержки появления блока, в мс (миллисекунд).
Чтобы разместить JavaScript на конкретной записи/странице сайт на wordpress – можно воспользоваться плагином jQuery in Posts Pages, сведения о нем:
Последнее обновление: 2015-5-21
Количество активных загрузок: 100+
Сайт плагина: “wordpress.org/plugins/jquery-in-posts-pages/”
Загрузить плагин с mnogoblog.ru – можно здесь.
После установки и активации плагина jQuery in Posts Pages в каждой записи/странице при их редактировании из админки появиться новое окошко, в котором можно указать JavaScript (скриншот ниже кликабелен – нажмите для увеличения):
