Анимация для текста

Анимация для текста

Owebs
5 сентября 2022
Просмотры 152
Рейтинг
Время чтения Время чтения: 5 минут

Оглавление
Развернуть Свернуть

Сегодня мы с вами напишем анимацию для текста. Нашей задачей будет не просто анимировать текст, а сделать это для широкого применения. Как правило, анимация пишется под определенный текст. Если изменить или поменять его, то анимация ломается. Давайте попробуем избежать этой проблемы. Идея следующая: мы пишем блок определенным классом, а весь текст внутри него разбиваем на буквы, каждая из которых будет находиться в теге <span>. Затем анимируем эти самые теги <span>.


Для создания анимации перекопируйте следующие части кодов:

HTML:
                <div class="textScale">
                    <span>П</span>
                    <span>р</span>
                    <span>и</span>
                    <span>в</span>
                    <span>е</span>
                    <span>т</span>
                    <span></span>
                    <span>к</span>
                    <span>а</span>
                    <span>к</span>
                    <span></span>
                    <span>д</span>
                    <span>е</span>
                    <span>л</span>
                    <span>а</span>
                    <span></span>
                    <span>?</span>
                </div>

            
CSS:
                .textScale span {
                    display: inline-block;
                    font-size: 30px;
                    color: antiquewhite;
                    text-shadow: 0 0 4px #000;
                    margin: 0 2px;
                }
        
                .textScale:hover span {
                    animation: textScale 1s ease 0s 1 normal none;
                }
        
                @keyframes textScale {
                    0% {
                        transform: scale(1);
                        text-shadow: 0 0 4px #000;
                    }
        
                    50% {
                        transform: scale(2);
                        text-shadow: 0 0 4px #000;
                    }
        
                    100% {
                        transform: scale(1);
                        text-shadow: 0 0 4px #000;
                    }
                }
            
JS:
                var textScaleDelay = 0.1;

                document.querySelectorAll('.textScale span').forEach((item) => {

                    textScaleDelay = textScaleDelay + 0.2

                    item.style.animationDelay = textScaleDelay + "s";


                });
            

После копирования вышеупомянутых кусков кода наша анимация будет готова. Все стили CSS, кроме тех, которые касаются непосредственно анимации, можете изменять по своему желанию. Для ее корректной работы не рекомендуем вносить изменения в структуру html (менять классы или теги) или JavaScript кода.

Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 183
Рейтинг 15
8 декабря
5 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 344
Рейтинг 6
14 декабря
5 месяцев назад

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

Создание сайтов через нейросети
Просмотры 366
Рейтинг 4
9 февраля
3 месяцев назад

Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.

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

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

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

Согласен