Анимировать с помощью кода или сразу?

Ссылка скопирована
Анимация Веб-разработка
1 ответ

Как лучше добавить анимацию на сайт, которая представляет из себя полоску на всю ширину экрана, по которой горизонтально двигаются картинки (бегущая строка).
Лучше добавить готовую анимацию(где то сделать)
Или запрограмировать?

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

Ответы:

Лучше подключить какой-то слайдер или карусель.

  • Evgenii, можно вообще без js, чисто на css.
    overflow, отрицательный padding, keyframes и все.
  • Evgenii, я уверен, что ты ради одного слайдера, ради модального окна, подключаешь библиотеку. Велосипед.

    Реализуй и не умничай тут :/

  • Evgenii, если ты это не смог решить самостоятельно - тык, то про библиотеки я вообще молчу
  • Evgenii, смотри-ка, с повтором. И ни одной строчки js
    https://jsfiddle.net/Stalk/9hbL57gw/
    Если все-таки добавить немнрого js, то всестановится проще, если склонировать скорлящиеся элементы. Тогда можно все на одну анимацию повесить, которая в конце мгновенно отматывалась бы на стартовую позицию.

    snippet

    Наверное можно и адаптивно сделать, но мне лень подбирать проценты и колдовать с calc();
    Но писать это и поддерживать гораздо сложнее, чем библиотечку или забытый всеми <marquee> у которого из всех недостатков только разрыв в конце строки.
    https://jsfiddle.net/sup1cw0f/

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Никита Орлов Ответ

Для анимации элементов на веб-странице можно использовать как CSS, так и JavaScript. Выбор зависит от того, какая анимация вам нужна и какие возможности вы хотите реализовать.

Если вам нужно просто добавить анимацию к элементу, то CSS-анимация может быть лучшим вариантом. Ниже приведен пример CSS-анимации для элемента с классом "box":

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: myAnimation 1s infinite;
}
 
@keyframes myAnimation {
    0% { transform: translateY(0); }
    50% { transform: translateY(50px); }
    100% { transform: translateY(0); }
}

.box { width: 100px; height: 100px; background-color: red; animation: myAnimation 1s infinite; } @keyframes myAnimation { 0% { transform: translateY(0); } 50% { transform: translateY(50px); } 100% { transform: translateY(0); } }

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

const box = document.querySelector('.box');
 
function animateBox() {
    let position = 0;
    let direction = 1;
 
    setInterval(() =&gt; {
        box.style.transform = `translateY(${position}px)`;
        position += direction * 5;
 
        if (position &gt;= 50 || position &lt;= -50) {
            direction *= -1;
        }
    }, 100);
}
 
animateBox();

const box = document.querySelector('.box'); function animateBox() { let position = 0; let direction = 1; setInterval(() =&gt; { box.style.transform = `translateY(${position}px)`; position += direction * 5; if (position &gt;= 50 || position &lt;= -50) { direction *= -1; } }, 100); } animateBox();

Таким образом, выбор между CSS и JavaScript для анимации зависит от ваших потребностей и уровня сложности анимации. Если у вас есть конкретные требования к анимации, пожалуйста, уточните их, чтобы мы могли помочь вам более точно.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ code-review Нужен ли код-ревью React/TypeScript проекта? 1 ответ