Скроллинг

 


Привет, дорогие читатели. В этой статье я расскажу про скроллинг. Давным-давно я загорелся идеей реализовать его на своём сайте. Но передо мной стоял выбор между выводом ярлыка времени, которое в среднем затрачивается на прочтение статьи, или блока с прогресс-баром при скроллинге.

Соглашусь, что вывод времени на прочтение статьи — спорное решение. А так как мне нравится горизонтальный скроллинг, то и решение было принято в его пользу (вы, наверное, уже обратили внимание на анимацию скроллинга вверху этого поста):skrolling bar

Всё это дело я изначально реализовал интеграцией кода, который нашёл на GitHub. Но потом детально изучив код я понял, что он просто скопирован из плагина (название упустим). Эта мысль подтолкнула меня на поиск модификации. Перепробовав ряд плагинов для анимированного скроллинга, я остановился на Worth The Read. Он функционален и не грузит сайт.

Установка Worth The Read

Давайте установим и активируем это прекрасное расширение в WordPress:

worth the read

После установки необходимо включить вывод прогресс-бара скроллинга. Для этого, в административной панели управления сайтом кликните по пункту «Worth The Read»:

skrolling menyu

 

Далее, загрузится страница настроек. Обратите внимание на меню слева:

worth the read menu

к оглавлению ↑

Reading Progress — Functionality

Стандартно мы находимся в пункте «Style». Для активации скроллинга необходимо перейти в пункт «Reading Progress» — «Functionality». В этом блоке настроек находятся опции, отвечающие за внешнее поведение прогресс-бара скроллинга. Разберём опции подробней.

Display On:

skrolling display on

В этой опции отмечается тип страницы, на которой будет выводиться скроллинг. На скриншоте отображены лишь три типа страницы. Но если у вас установлен плагин, например, MailPoet, который генерирует собственную страницу, то появится дополнительный пункт настроек:

worth the read custom

к оглавлению ↑

Include Comments:

skrolling include comments

Эта настройка отвечает за интеграцию прогресс-бара скроллинга для комментариев. И в том случае, если ваши посты имеют много комментариев и они не разбиты на страницы, то имеет смысл активировать эту опцию.

к оглавлению ↑

Placement:

skrolling placement

Здесь вы можете выбрать расположение прогресс-бара скроллинга из четырёх доступных позиций.

к оглавлению ↑

Offset:

skrolling offset

Эта опция отвечает за смещение прогресс-бара скроллинга от изначального его положения. Например, если прогресс-бар скроллинга закреплён вверху страницы, то смещение будет вниз. Единицы измерения пиксели. Данный параметр выставляется лишь в исключительных случаях, когда стандартное расположение прогресс-бара скроллинга необходимо немного сместить, например, ниже меню навигации.

к оглавлению ↑

Fixed Opacity:

skrolling fixed opacity

Анимированный скроллинг остаётся невидимым сразу после загрузки страницы до выполнения условий его появления. Как только прогресс чтения, например, статьи начнёт отображаться, и в конце статьи он полностью заполнится, то цветовой индикатор исчезнет, а вот фон нет. Поэтому, есть смысл сделать фон максимально прозрачным, чтобы не сильно бросался в глаза. Если данная опция включена, то фон будет непрозрачным.

к оглавлению ↑

Devices:

skrolling touch devices

 

Данная настройка отвечает за отображение прогресс-бара скроллинга на мобильных устройствах. Если у вас аккуратная мобильная версия сайта, то возможно есть смысл включить этот параметр.

Offset:

skrolling content offset

Весьма умная опция. Она создана для страниц с дополнительным контентом вначале страницы. Например, ваша статья начинается с изображения или видео. Если не задействовать опцию «Content Offset», то прогресс-бар скроллинга начнёт заполняться стандартно, думая что картинки это текст. В большинстве случаев это не нужно. Разумеется, если у вас не сайт-галерея. Поэтому, чтобы прогресс-бар скроллинга правильно ориентировался с какого места ему начать заполняться, можно указать смещение стартового маяка пропорционально дополнительному контенту. Например, высота картинки 300 пикселей, поэтому в опции «Content Offset» нужно указать это значение. После этого скроллинг начнёт отображаться после преодоления 300 пикселей контента страницы.

После всех настроек не забудьте сохраниться:

worth the read save

к оглавлению ↑

Reading Progress — Style

Раздел «Style» отвечает за внешний вид индикатора прогресс-бара скроллинга. Рассмотрим каждый пункт индивидуально.

Thickness:

skrolling thickness

Здесь задаётся толщина индикатора.

Foreground:

skrolling foreground

Эта опция отвечает за цвет индикатора (не фона). Также можно установить галку возле «Прозрачный», что полностью проигнорирует заданный цвет индикатора и сделает его прозрачным.

к оглавлению ↑

Foreground Opacity:

skrolling foreground opacity

Непрозрачность переднего плана. Ползунок задаёт значение от 0.00 до 1.00. Чем выше значение, тем меньше прозрачности будет иметь заполняющий индикатор прогресс-бара скроллинга.

к оглавлению ↑

Background:

skrolling background

В этой настройке можно изменить цвет фона прогресс-бара скроллинга.

к оглавлению ↑

Comments Background:

skrolling comments background

В данной части настроек изменяется цвет фона скроллинга комментариев. Этот параметр задаётся лишь в том случае, если в пункте «Reading Progress — Functionality» включён параметр «Include Comments».

к оглавлению ↑

Transparent Background:

skrolling transparent background

Эта опция убирает фон индикатора скроллинга. Иногда это полезно, особенно когда дизайн сайта не сливается с индикатором прогресс-бара скроллинга.

к оглавлению ↑

Muted Opacity:

skrolling muted opacity

Эта опция отвечает за прозрачность заднего фона заполняющего индикатора прогресс-бара во время остановки скроллинга. Например, вы читаете статью и решили остановиться в определённом месте. При этом индикация скроллинга уже заполнен наполовину. И если дальше не прокручивать страницу, то задний фон индикатор прогресс-бара скроллинга изменит свою прозрачность. В опции «Transparent Background» как раз и задаётся прозрачность заднего фона. Чем значение выше, тем прозрачней будет фон. По сути задний фон имеет два состояния прозрачности: в состоянии движения и в состоянии простоя.

Foreground:

skrolling muted foreground

Заполняющий индикатор скроллинга может иметь два цвета. Первый задаётся в опции «Foreground», и отвечает за цвет во время движения индикатора. Второй цвет задаётся в опции «Muted Opacity», и отвечает за цвет индикатора в состоянии простоя. Например, во время скроллинга цвет заполняющего индикатора синий, а как только вы перестали листать страницу цвет индикатора измениться на зелёный.

к оглавлению ↑

Time Commitment — Functionality

Если в меню настроек «Reading Progress» блок настроек «Functionality» отвечает за внешнее поведение скроллинга, то «Functionality» в «Time Commitment» отвечает за логику подсчёта времени, которое понадобиться на чтение конкретного материала. Для этого выводится числовой индикатор времени сразу после заголовка или отдельной строкой под заголовком.

Я считаю, что плагины, которые имеют массу настроек дизайна и логики — самые сложные в понимании. В подобных расширениях WordPress, настройки зависят друг от друга, что может поначалу сбить с толку. Поэтому продолжим изучать опции дальше.

Display On:

worth the read display on

Этот параметр выводит на странице, в конце её заголовка, время которое понадобится на чтение материала. Здесь нужно брать нужный тип страницы.

к оглавлению ↑

Placement:

worth the read placement

В этом параметре настраивается место старта отслеживания процесса скроллинга:

  • Before Title (перед заголовком)
  • After Title (после заголовка)
  • Before Content (перед контентом)

Также вы можете указать другое место старта скроллинга. Для этого необходимо в режиме редактора кода вставит:

skrolling <span class="wtr-time-wrap after-title"><span class="wtr-time-number">16</span> минут(а) чтения</span>

к оглавлению ↑

Words Per Minute:

skrolling words per minute

Скорость чтения. Для английского языка стандартно установлено значение в 200 слов в минуту. Если мне не изменяет память, то русскоязычный норматив по технике чтения в среднем имеет аналогичное значение. Прошу не путать со знаками.

к оглавлению ↑

Format:

skrolling format

В этой опции вместо стандартной надписи, при включённой опции «Display On», вы можете указать собственный текст, который будет отображаться рядом с ярлыком времени, например:

skrolling <span class="wtr-time-wrap after-title"><span class="wtr-time-number">16</span> минут(а) чтения</span> post

Прошу заметить, что решётку и пробел после неё нужно оставить, например: # минут(а) чтения.

к оглавлению ↑

Count Method:

skrolling count method

Это метод подсчёта слов. Он влияет на расчёт общего времени, за которое текст должен быть прочитан. Метод «str_word_count» используется для латинских языков, а «count spaces» предназначен для нелатинских и кириллических языков.

к оглавлению ↑

Block-Level:

skrolling block level

Эта опция отвечает за вывод времени отдельной строкой внизу заголовка. Активируйте ползунок, если хотите чтобы время отображалось под заголовком, а не после него.

к оглавлению ↑

Time Commitment — Style

Как вы уже догадались, эта группа настроек отвечает за внешний вид ярлыка времени.

Font:

skrolling font

В этой опции можно изменить свойства шрифта ярлыка времени.

Custom CSS:

skrolling custom css

А в этом пункте, со знанием CSS, можно внести собственные настройки. Класс «.wtr-time-wrap» отвечает за общий вид метки. А класс «.wtr-time-number» изменяет внешний вид только числа.

к оглавлению ↑

Страница/пост и Worth The Read

Казалось бы всё, что ещё можно изучить. Так вот, при редактировании поста или страницы в «Настройки экрана» плагин добавил возможность отключения показа как прогресс-бара скроллинга, так и ярлыка времени:

skrolling worth the read

Эта опция позволяет выборочно включать прогресс-бар скроллинга, что весьма удобно.

Напоследок хочу добавить, что плагин Worth The Read имеет весь необходимый функционал для гибкой настройки скроллинга на любом типе сайта построенном на базе WordPress. Вопрос вывода ярлыка времени остаётся открытым и по сей день. Многие веб-мастера считают, что ярлык времени может спугнуть читателя. Другие же наоборот, считают что всё зависит от эксклюзивности и полезности контента на вашем сайте.

Отдельно хочу порекомендовать прочесть статью «Улучшенная пагинация WordPress», в которой я рассказываю о весьма простом и бесплатном плагине.

Спасибо, что выделили минимум 16 минут на ознакомление с материалом этой статьи. Это именно то время, которое отобразил плагин Worth The Read. Но вы сами должны понимать, что реальное время чтения напрямую зависит от осмысления прочитанного. Если это просто рассказ, то 16 минут для такого объёма — это логичное время, а если это технический текст, как в данной статье, то и 16 минут будет мало.

Делитесь полезной информацией с друзьями:

Рекомендую:

Книга «Wordpress для начинающих» Дэрил Бартлетт Книга «Wordpress для начинающих» Дэрил Бартлетт
Книга «Создание веб-сайта для чайников» Дэвид Кроудер Книга «Создание веб-сайта для чайников» Дэвид Кроудер

Сергей

Привет! Моё имя Сергей, и я — автор этого блога. Рад, что вас заинтересовал мой проект. Не забывайте оставлять комментарии к статьям. По всем другим вопросам обращайтесь через контактную форму на странице "Контакты".

Читайте также:

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

  1. Анастасия:

    Сергей привет. Забавная вещица эта полоса. Установила себе на сайт. Наклацала настройки, почему-то на страница не показывает, что сделать?

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Вверх