0

Как написать такую-же анимацию, как в первом блоке на сайте, что текст разъезжается? https://otherside.xyz/ Искал в интернете, всё ссылалось на использование REACT, но для меня это не выход.

2
  • 1
    ну, реакт нужен не для анимаций. Я бы использовал GSAP для упрощения жизни 1 мая 2022 в 13:15
  • 1
    Там это, похоже, в threejs сделано, но можно просто png на канвас кинуть, при скролле отзеркаливать и сдвигать с одновременным масштабированием.
    – Leonid
    2 мая 2022 в 6:13

1 ответ 1

1

самый простой вариант - сделать 2 svg картинки, одну отзеркалить. Потом через js добавлять какой-то класс, например, animated.

<div class="title">
  <div class="text-wrap">
   <svg class="text1"></svg>
  </div>
  <div class="text-wrap">
   <svg class="text2"></svg>
  </div>
</div>



.text-wrap {overflow: hidden}

.text1 {transform: translateY(100px)}
.text2 {transform: translateY(-100px)}

.animated .text1, .animated .text2 {transform: translateY(0)}

Если не хочешь svg, то бери обычный текст, зеркаль его (решения можно найти на codepen). И через transform + perspective задать нужную форму.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.