Как добавить функцию сторис на своем сайте?

Как выглядят сторис на сайте

Сторис на сайте чаще всего представляет собой набор небольших информационных изображений, выполненных в размерах экрана мобильного телефона. Довольно ярким примером подобного элемента являются истории различных социальный сетей, например, ВКонтакте.

Кроме социальных сетей существуют также сайты-лендинги, выполненные в этом стиле. Ярким примером является vcru.storyland.mobi.

Зачем нужны сторис

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

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

Сторис будут эффективны и для владельцев сайтов. Все больше трафика идет через мобильные устройства, ведь это быстрее и доступнее. В качестве примера рассмотрим работу новостных сайтов — текст необходимо пролистывать вниз, что не всегда удобно. А использование сторис немного упростит процесс просмотра новостей, что даст владельцу сайта больше трафика с телефонов. Кроме того формат историй считается трендом, поэтому сайт, имеющий такой элемент, станет более привлекательным для посетителей.

Как добавить функцию сторис на своем сайте

WPStories для WordPress

Официальный сайт: wpstories.ru

WPStories — платный плагин для WordPress. После покупки и установки необходимо настроить сайт.

Пошаговая инструкция:

1. Перейдите в настройки шаблона и добавьте элемент WPStories в желаемое место. После этого на сайте появится небольшая иконка;
2. Откройте функции элемента. В нем вы можете настроить внешний вид, заголовок, общие настройки и интеграцию элемента;
3. Зайдите в раздел «Истории». В новом окне нажмите кнопку «Создать»;
4. WordPress создаст подменю с заголовком «Первая история». Вы можете настроить по своему желанию заголовок, тип, максимальное число записей и метод сортировки. Кроме того, можно изменить цвета и управляющие кнопки.
5. Сторис готова!

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

Google Web Stories

Официальный сайт: googlewebstories.com

Google Web Stories — это технология, реализованная на различных платформах и разными способами. Рассмотрим только плагин для WordPress.

В отличие от предыдущего данный плагин является бесплатным, а значит он лучше подходит для малобюджетной разработки сайтов.

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

1. Скачать и установить плагин Google Web Stories
2. Нажмите на кнопку «Создать новую историю» на левой панели управления, и откроется редактор.
3. Создайте свою историю, и сохраните её.
4. Готово!

Для упрощения понимания работы с этим сервисом рекомендую просмотреть следующий видеоролик.

Flyvi

Официальный сайт: flyvi.com

Flyvi является отдельным онлайн-сервисом для создания сторис. Он предоставляет множество функций по их редактированию и компоновке. Сервис является довольно мощным инструментом для своих целей. Работать с ним просто:

1. Зарегистрируйтесь на сайте Flyvi
2. Создайте сторис.
3. Отредактируйте его так, как считаете нужным.
4. Сохраните ваш дизайн.
5. Создайте виджет, и настройте его так, как желаете.
6. Скопируйте сгенерированный сайтом код виджета
7. Вставьте код в любое место вашего сайта.
8. Сторис готово!

Программный код

Разработка сторис своими руками в принципе не такая сложная задача. Для этого понадобятся лишь знания по HTML, CSS и JavaScript. Этого вполне достаточно. Однако, для более простой разработки существуют библиотеки API, на основе которых был создан и Google Web Stories.

Для создания необходим контейнер, в который будут записаны все данные.

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

.histories {
display: grid;
grid: 1fr / auto-flow 100%;
gap: 1ch;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior: contain;
touch-action: pan-x;
}

.user {
scroll-snap-align: start;
scroll-snap-stop: always;
display: grid;
grid: [history] 1fr / [history] 1fr;
}

.history {
grid-area: history;

background-size: cover;
background-image:
var(—bg),
linear-gradient(to top, lch(98 0 0), lch(90 0 0));

user-select: none;
touch-action: manipulation;

transition: opacity .3s cubic-bezier(0.4, 0.0, 1, 1);

&.seen {
opacity: 0;
pointer-events: none;
}
}

И, наконец, запрогромируем само поведение сторис.

const navigateHistories = direction => {
const history = state.current_history
const lastItemInUserHistory = history.parentNode.firstElementChild
const firstItemInUserHistory = history.parentNode.lastElementChild
const hasNextUserHistory = history.parentElement.nextElementSibling
const hasPrevUserHistory = history.parentElement.previousElementSibling

if (direction === ‘next’) {
if (lastItemInUserHistory === history && !hasNextUserHistory)
return
else if (lastItemInUserHistory === history && hasNextUserHistory) {
state.current_history = history.parentElement.nextElementSibling.lastElementChild
history.parentElement.nextElementSibling.scrollIntoView({
behavior: ‘smooth’
})
}
else {
history.classList.add(‘seen’)
state.current_history = history.previousElementSibling
}
}
else if(direction === ‘prev’) {
if (firstItemInUserHistory === history && !hasPrevUserHistory)
return
else if (firstItemInUserHistory === history && hasPrevUserHistory) {
state.current_history = history.parentElement.previousElementSibling.firstElementChild
history.parentElement.previousElementSibling.scrollIntoView({
behavior: ‘smooth’
})
}
else {
history.nextElementSibling.classList.remove(‘seen’)
state.current_history = history.nextElementSibling
}
}
}

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

Сравнительная таблица

Видеообзор