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

П р и в е т к а к д е л а ?

Сегодня мы с вами напишем анимацию для текста. Нашей задачей будет не просто за анимировать текст, но и сделать эту анимацию широко применимой. Как правило, анимация пишется под определённый текст и если изменить или поменять текст, то анимация ломается. Мы же с вами попробуем избежать этой проблемы. Идея следующая: Мы пишем блок определённый классом и весь текст внутри этого блока разбиваем на буквы, каждая из которых, будет находиться в теге <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 кода.

CSS Верстка