Как сделать такую анимацию?

Будет такой массив
['text1', 'text2', 'text3']
Хочу сделать анимацию как на видео. То есть, первый текст начинается справа, когда он заежает, выежает текст2, когда он снова заежает, выежает текст3 и т.д. Помогите пожалуйста
Ссылка на видео: тык

Дополнительно:

Подскажите пожалуйста, в какая программа использовалась в видео и как можно графически так расставлять элементы.
P.S.
Я только начинающий

  • Altere, я хз, не мое видео )

    • Накидал примерно, суть я думаю понятна
    https://codepen.io/sharpprahs/pen/MWBodda

    • Да, это оно, но проблема в том, что текст надо брать из массива по очереди, скажем есть массив с текстами text1, text2, text3 и вот вверх добавляется текст1, внизу текст2, после вверх текст3 внизу текст1, ну т.к. нет текст4, по этому сначала начинаем
    • JTester, понял чуть позже как за ПК буду подредачу
    • sharp97, хорошо! Спасибо большое
    • JTester, отредачил ответ
    • sharp97, мне setInterval нужно добавить, чтобы каждый раз брал текст? Просто увас он как одноразовый
    • JTester, animation-iteration-count в css поменяй там цифру посмотри что будет
    • JTester, если массив будет меняться как-то, то да можно использовать setInterval
    • JTester, ответ мой правильным сделаешь ?) Условия описанные тобой в постановке мое решение покрывает в принципе. Мало ли другим пригодится
    • sharp97, отметил, спасибо большое

    Ответы:

    Как сделать такую анимацию?

    Делаете два боковых контейнера (красные), чтобы были примерно по свойствам такие:
    position: absolute;
    width: 49%; /*ширина должна быть меньше 50%, но больше половины ширины основной колонки (синяя)*/
    left: 0; /*right: 0; - для правого контейнера*/
    overflow: hidden; /* чтобы текст не вылезал из бокового контейнера с другой стороны основной колонки */
    z-index: 1; /*у основной колонки (синяя) z-index должен быть больше, или текущее свойство меньше*/

    Теперь в эти контейнеры можете положить текст, обернутый в контейнер (абзац или div). Этими текстовыми контейнерами можно управлять теперь через css свойство transition left/right. Если возможностей css для анимации недостаточно, то привлекаете js для полного анимирования или только для переключения состояния анимации или для ее перезапуска.

    • Не понял 🙁
      А можете пожалуйста показать на codepan?
    • Вы не предложили свой вариант решения. В таких случаях, я предлагаю только концепт решения.
    • alexalexes, ну смотрите, я сделал как вы сказали, а вот на js что делать? Я там создал массив текста, а вот как дальше, я хз
    • Создайте два метода (они же функции, если не умеете писать прототип или класс).
      1. Инициализирующий метод.
      В этом методе из исходного массива текста создаете текстовые блоки как ноды DOM. Накидываете эти ноды в правый или левый красные контейнеры.
      2. Анимирующий метод.
      В этом методе через setInteval (по длительности, равный периоду повторения анимации) изменяете свойство текущего текстового блока в left или right в 0 или в значение ширины блока контейнера, чтобы заставить свойство transition отыгрывать анимацию.
      PS: Первый метод нужно запускать после того, как весь контент страницы загрузится.
      Во втором методе у setInteval время повторения будет зависеть от порядка текстового блока, чтобы получить фазу задержки анимации (если она требуется). Значение ширины блока лучше пересчитывать каждый раз, когда запускается setInterval, так как пользователь может изменять размер видимой области браузера.

    + Заказать

     

    Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

     

      • Как сделать такую анимацию?Есть ответ
      • 07.04.2024
      Ответить

      Для создания анимации на веб-сайте существует несколько способов, включая использование CSS, JavaScript или библиотек для создания анимаций, таких как Animate.css или GreenSock Animation Platform (GSAP).

      Один из самых простых способов создания анимации - использование CSS. Для этого вы можете определить ключевые кадры анимации с помощью @keyframes и затем применить их к элементу с помощью свойства animation. Например, чтобы создать простую анимацию изменения цвета фона элемента при наведении мыши, вы можете использовать следующий CSS:

      @keyframes changeColor {
  0% { background-color: red; }
  50% { background-color: blue; }
  100% { background-color: green; }
}
 
.element {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: changeColor 2s infinite;
}
 
.element:hover {
  animation-play-state: paused;
}

      В этом примере мы создаем анимацию changeColor, которая изменяет цвет фона элемента с красного на синий, а затем на зеленый. Эта анимация будет повторяться бесконечно в течение 2 секунд.

      Если вам нужно более сложная анимация, вы также можете использовать JavaScript или библиотеки для создания анимаций. Например, с помощью GSAP вы можете создавать более сложные и интерактивные анимации, управляя параметрами анимации с помощью JavaScript.

      Надеюсь, это поможет вам создать анимацию для вашего веб-сайта! Если у вас есть дополнительные вопросы, не стесняйтесь задавать.

    Оставить комментарий