Ефект поступової появи тексту в Elementor

Щоб створити ефект поступової появи тексту в Elementor, можна використовувати CSS-анімацію, яка дозволить словам друкуватись по черзі. Ось приклад CSS-коду для такої анімації:

@keyframes typing {
from {
width: 0;
}
}

.elementor-typing-text {
overflow: hidden;
white-space: nowrap;
font-size: 24px;
font-weight: bold;
border-right: 2px solid #333;
width: 100%;
animation: typing 5s steps (30, end);
}

У цьому коді ми створили анімацію typing, яка поступово збільшує ширину елемента з текстом. Потім ми задали стилі для контейнера, в якому буде текст. Ми використовували властивості overflow: hidden і white-space: nowrap, щоб приховати текст і запобігти перенесенню слів на наступний рядок. Ми також додали рамку праворуч від тексту, щоб створити ефект друку.

Щоб використовувати цей код в Elementor, створіть текстовий блок і додайте CSS-клас elementor-typing-text. Після цього вставте код у редактор CSS. Ви побачите, що текст буде друкуватись по черзі протягом 5 секунд.

Ви можете змінювати час анімації та інші властивості CSS, щоб адаптувати ефект до вашого дизайну. Також можна експериментувати з іншими CSS-ефектами, щоб створювати унікальні та привабливі анімації для вашого тексту.

Мікро-анімації та ефекти прокручування Elementor: покращення взаємодії з користувачем

Підкреслення тексту при наведенні

Elementor: створення landing page та складних веб-сторінок