Задать вопрос
@fatfrumos41

Как реализована эта анимация?

Как реализована анимация на этом сайте?
www.colorglare.com
  • Вопрос задан
  • 241 просмотр
Подписаться 1 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
  • Skillfactory
    Профессия Веб-разработчик
    12 месяцев
    Далее
  • Нетология
    Fullstack-разработчик на Python + нейросети
    20 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 4
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Смотрю с FF.
А там есть анимация?)))
Ответ написан
aliencash
@aliencash
Партизан
Я вижу тут увеличение css параметра letter-spacing, но средства css не анимируют этот параметр, следовательно только js. Хотя конечно можно заморочится, каждую букву поместить в отдельный контейнер и использоваь margin для анимации.

Если вы говорите не об увеличении расстояния между символами, а просто о плавном появлении букв, то это свойство css opacity оно замечательно анимируется с помощью css transition
Ответ написан
Каждая буква выделена в <span>, и для этих спанов (выборка через nth-child(n)) назначена анимация translateX()
Ответ написан
Комментировать
allishappy
@allishappy
Смотрю с Яндекс.Браузера. Анимации нет
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы