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

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

Как реализована анимация на этом сайте?
www.colorglare.com
  • Вопрос задан
  • 245 просмотров
Подписаться 1 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Академия Эдюсон
    Fullstack-разработчик на JavaScript + ИИ
    11 месяцев
    Далее
  • ProductStar × РБК
    Профессия: Инженер по тестированию + ИИ
    6 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 4
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Смотрю с FF.
А там есть анимация?)))
Ответ написан
aliencash
@aliencash
Партизан
Я вижу тут увеличение css параметра letter-spacing, но средства css не анимируют этот параметр, следовательно только js. Хотя конечно можно заморочится, каждую букву поместить в отдельный контейнер и использоваь margin для анимации.

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

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

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