Страница, на которой рассказывается о вас (о вас), является одной из самых важных страниц вашего Веб-сайт. Это позволит людям лучше узнать вас и решить, готовы ли они сделать следующий шаг. Если вы ищете простой способ включить повествование на эту страницу, вам понравится этот урок. Мы будем использовать эффекты прокрутки Divi, чтобы создать плавный переход повествования при прокрутке. Как только одна часть истории угасает, появляется другая. Это дает посетителей ощущение чтения интересного рассказа. 

Возможный конечный результат

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

1. Создайте первый полноэкранный раздел страницы

Добавить новый раздел

Фоновый цвет

Начните с добавления первого раздела на страницу «О нас». Откройте настройки раздела и измените цвет фона на черный.

• Цвет фона: # 000000

калибровка

Затем переведите раздел в полноэкранный режим, добавив минимальную высоту в параметрах размеров.

• Минимальная высота: 100vh

2. Добавить анимированную строку

Добавить новую строку

Структура столбца

Затем добавьте новую строку в ваш раздел, используя следующую структуру столбцов:

калибровка

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

• Ширина: 100%
• Максимальная ширина: 100%

расстояние

Затем добавьте левую и правую заливку на экранах разных размеров.

• Левая обивка: 20vw (рабочий стол), 10vw (планшет и телефон)
• Правая обивка: 20vw (стол) 10vw (планшет и телефон)

Анимация

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

• Стиль анимации: Затухание
• Продолжительность анимации: 3000 мс
• Кривая скорости анимации: легкость входа-выхода
• Повтор анимации: один раз

Позиция

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

• Позиция: абсолютная
• Расположение: Центр

3. Вставьте заголовок с эффектами прокрутки

Добавить текстовый модуль # 1 в столбец

Добавить контент H1

Единственный модуль, который нам нужен в этой строке, — это текстовый модуль с содержание H1.

Название 1 Настройки текста

Перейдите на вкладку дизайна модуля и измените настройки текста H1 следующим образом:

• Название шрифта: Nunito
• Вес шрифта заголовка: полужирный
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 7vw (рабочий стол), 9vw (планшет), 11vw (телефон)

Вертикальное движение

Мы также добавим тонкую вертикальную анимацию.

• Активировать вертикальное движение: Да
• Начальное смещение: 0 (при 50%)
• Среднее смещение: 10 (при 100%)
• Окончательное смещение: 10

Входящий и исходящий эффект прокрутки

С входящим и исходящим эффектом затухания.

• Активировать постепенное исчезновение: Да
• Начальная непрозрачность: 100%
• Средняя непрозрачность: 100% (при 55%)
• Конечная непрозрачность: 0% (до 62%)

Масштабирование эффекта прокрутки вверх и вниз

И последнее, но не менее важное: мы также будем использовать эффект прокрутки вверх и вниз.

• Включить масштабирование вверх и вниз: Да
• Начальная шкала: 100% (до 40%)
• Средняя шкала: 95% (до 74%)
• Конечная шкала: 90%

4. Один раз клонируйте весь раздел и включите текст описания с эффектами прокрутки.

Изменить заголовок и содержание

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

Изменить текстовые параметры модуля H2 Text

Измените настройки текста H2 соответственно:

• Название 2 Полиция: Nunito
• Название шрифта 2: полужирный
• Элемент 2 Цвет текста: #ffffff
• Элемент 2 Размер текста: 5vw (рабочий стол), 7vw (планшет), 8vw (телефон)
• Высота линии 2: 1em (офис), 1.2em (планшет и телефон)

Добавить текстовый модуль # 2 в столбец

Добавить контент

Затем добавьте в столбец еще один текстовый модуль с содержание описание по вашему выбору.

Настройки текста

Измените настройки текста для текстового модуля следующим образом:

• Шрифт текста: Open Sans
• Цвет текста: #ffffff
• Размер текста: 1vw (рабочий стол), 2.5vw (планшет), 3vw (телефон)
• Высота строки текста: 3.1em (рабочий стол), 2.5em (планшет и телефон)

расстояние

Также используйте верхнее поле.

• Верхнее поле: 8vw

Входящий и исходящий эффект прокрутки

Затем переключитесь на эффекты прокрутки на вкладке «Дополнительно» и используйте следующие настройки постепенного появления и исчезновения:

• Активировать постепенное исчезновение: Да
• Начальная непрозрачность: 100%
• Средняя непрозрачность: 0% (при 31%)
• Конечная непрозрачность: 0% (до 35%)

Масштабирование эффекта прокрутки вверх и вниз

Также добавьте эффект масштабирования вверх и вниз.

• Включить масштабирование вверх и вниз: Да
• Начальная шкала: 100% (до 40%)
• Средняя шкала: 95% (до 74%)
• Конечная шкала: 90%

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

обследование

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

Заключительные мысли

В этой статье мы показали вам, как рассказать историю на странице «О нас», используя встроенные эффекты прокрутки Divi. Созданный нами эффект позволяет последовательной копии постепенно появляться и исчезать, придавая посетителей как чтение рассказа. Вы также можете бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.