Бегущая строка с изображениями на CSS и HTML

Поделиться
HTML-код
  • Опубликовано: 8 фев 2025
  • Сегодня вы узнаете как сделать на HTML и CSS функционал устаревшего тега "marquee" в трех вариантах.
    Исходники тут: github.com/web...

Комментарии • 23

  • @ЛюсяРыбальченко-з3ш

    сколько пересмотрела видео, статей прочитала, плагины пыталась подключить и только по этому видосу получилось сделать не прерывную строку без всяких багов и косяков. От души спасибо за такой контент!

  • @antol_gc
    @antol_gc 2 месяца назад

    спасибо, с картинками получилось сделать на Геткурс) все супер! благодарю👍

  • @webhero42
    @webhero42 8 месяцев назад

    чат джипи с сотой попытки этот же вариант предложил с дублированием текста, а я уже нашел как раз это видео)

  • @ota-ku_official
    @ota-ku_official 8 месяцев назад +1

    спосибо очень выручил)))

  • @kromvelua4410
    @kromvelua4410 Год назад +2

    Было бы еще хорошо если бы ты в видео размер шрифта ( кода ) увеличивал, так будет и лучше видно и приятнее смотреть)

  • @POEOneLove
    @POEOneLove 3 года назад +5

    не адаптивно, строка переносится вниз если длиннее контейнера. Пропадает смысл бегущей строки если текст становится в 2 или 3 строки. Width 100% диву внутри контейнера - ошибка. Див не должен быть на 100%, он должен быть длиннее чем контейнер, указывать длину ему нельзя, иначе если текст больше, анимация валится. + не используется white-space:nowrap;

  • @ksoar8994
    @ksoar8994 9 месяцев назад

    мужик, спасибо

  • @natali7804
    @natali7804 Год назад

    У вас ссылка на исходники нерабочая. Можно где то еще посмотреть?

    • @belovmihan
      @belovmihan Год назад +1

      Перепишите что он написал на видео. Не так много

  • @KadyrovDon
    @KadyrovDon 2 года назад

    Такое можно сделать на планшете?

  • @viktorbenda489
    @viktorbenda489 3 года назад

    Добрый день. А как избавится от эффекта "передергивания". Я сделал все как у вас. Все ок, все получилось, но нет полной цикличности. У меня картинки передергиваются как у вас во втором варианте.

    • @webmigi--325
      @webmigi--325  3 года назад

      Добрый, есть возможность скинуть исходники?

    • @Ash-g8p
      @Ash-g8p 2 года назад

      Такая же проблема

  • @fogwer
    @fogwer 3 года назад

    А как высоту задать, если текста много?

    • @webmigi--325
      @webmigi--325  3 года назад

      Играешь с min-width и количество «слайдов»)

  • @headspase2585
    @headspase2585 3 года назад

    давай тоже самое только на JS?

    • @webmigi--325
      @webmigi--325  3 года назад

      А в чем разница будет?

  • @sansan3647
    @sansan3647 3 года назад

    а можно этот код перенести в тильду?? что бы с изображениями было?

    • @GUNTRUP_
      @GUNTRUP_ 2 года назад +5

      брат ,лушче верстай а не тильдой пользуйся

  • @asgard1428
    @asgard1428 6 месяцев назад +1

    Добрый день. Подскажите пожалуйста как сделать второй вариант только с тремя предложениями и они разные по длине. Никак не могу. Текст на замыкается, появляется разрыв в конце и анимация дергается как бы и начинается сначала. Пожалуйста подскажите.

    • @PavelChupryna
      @PavelChupryna 6 месяцев назад

      Этот вариант тебе не подойдет. В данном случае условия таковы: два отрезка идентичных друг другу... И никак иначе. Поищи бесконечный слайдер, есть готовые решения.

    • @asgard1428
      @asgard1428 6 месяцев назад

      @@PavelChupryna спасибо большое

    • @PavelChupryna
      @PavelChupryna 5 месяцев назад +1

      чет я тупонул..
      вот основа.


      В ложим что угодно и дублируем. можно три предложения...
      и для него пишем анимацию - animation: name 10s infinite linear;
      @keyframes name {
      0% {
      transform: translateX(0);
      }
      100% {
      transform: translateX(-100%);
      }
      }
      если будут скачки, проверяй расстояние между элементами в и между самими div class="slide">.