Как сделать такой эффект с текстом при появлении и обновлении страницы?

Question

[dinodp]

Подскажите каким образом можно добиться такого эффекта как на этом сайте https://landing.ua (ТОЛЬКО С ТЕКСТОМ СВЕРХУ)
Я уже тут велосипед собрал)
Создал див который должен проезжать расстояние моего текста и потом исчезать, родителю дал оверфлоу хайден ( чтоб не было видно того кто едет :D ) но чё-то криво у меня всё получается.
Дайте пожалуйста, ссылку на codepen или как вам будет удобно, в любом случае буду благодарен)

Answer 1

[Александр Флоренко]

Достаточно создать простую анимацию.

@keyframes toRight {
  from {
    transform: translate3d(-300px, 0 , 0)
    }
  to {
    transform: none;
    }
}

И применить её к вашему тексту/блоку.

.text {
  animation: toRight 1s ease;
}

Можете поиграться с длительностью, задержкой и тайминг функцией.
Подробнее можно почитать тут

Comments

[dinodp]

Самое интересное что пол дня верстаю, только то и делаю что пилю подобные анимации и вот скажи почему дурья бошка уже не варит?
Пора спать.
На код уже смотреть не могу)
Спасибо кстати :D

[Александр Флоренко]

dinodp, кодить нужно в меру.

Мой рекорд 68 часов)

[dinodp]

Александр Флоренко, ничоси)
Я бывает и за пару часов закипаю :D

Answer 2

[Station 72]

Я - ярый противник такого кала на экране. Особенно когда ты с мобильного сидишь и у тебя то 3g то E. Еще и видос на первом экране на фоне. Студия #1 в Украине - страшно подумать)

Comments

[dinodp]

Всё будет нормально, начальник.
Только не ругайся)