Как сделать на css бегущую строку?

Question

[jazzman7]

Доброго времени суток. Стоит задача сделать бегущую строку как в музыкальном плеере. Допустим у нас есть див, скажем с размерами 200 px если название песни помещается в него, гуд, ничего не делаем, если скажем название не умещается в 200 px, то что не влезло скрыто, заголовок (название) начинает медленно плыть за левый край пока не вернется в исходное положение (показ начала заголовка, конец скрыт), а затем заголовок снова должно поплыть. Анимация происходит секунд через 5 после открытия страницы и перед началом последующей прокрутке. Как такое реализовать ? по моему на чистом css не получиться, придется прибегнуть к js, но по возможности лучше на css.

Пока писал, вспомнил, что интересует еще такой вопрос. в ряд выводятся три блока (calc(33% - 20px)), как сделать так что если в конце осталось для вывода два блока, то их нужно растянуть, если один, то и его нужно вытянуть во всю ширину.

Comments

[Kifsif]

Как вариант: бегущую строку можно сделать, используя тег marquee. Подробнее с примерами: https://pcask.ru/web/begushhaya-stroka-na-chistom-html/

Answer 1

[Aligatro]

Её можно и на html сделать. На css через keyframe. На js через velocity например (ну или ручками анимацию написать). В целом вариантов тьма: демо на jquery с учетом длины текста, тьюториал по созданию на чистом css, информация о html теге.

Comments

[jazzman7]

второе решение я как раз и применял, вопрос лишь в том как сделать паузы. страница открылась, текст стоит, прошло 5 сек, поплыл, прокрутился, вернулся в исходное положение, еще 5 сек постоял, снова поплыл, вот именно это у меня не выходит

[Aligatro]

@keyframes scroll {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0)
    }
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    -webkit-animation: scroll 10s infinite linear;
    -moz-animation: scroll 10s infinite linear;
    animation: scroll 10s infinite linear;
}

[Aligatro]

Или вот по примеру комментатора ниже, с остановкой каждые 5 секунд.

[jazzman7]

Aligatro, то что надо. благодарю

Answer 2

[Yakov Vylegzhanin]

htmlbook.ru/html/marquee

Comments

[Максим]

этот тег не канает в html5

[jazzman7]

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

Answer 3

[Андрей Федоров]

Наслаждайтесь https://codepen.io/aliencash/pen/yprKBM?editors=1100

Answer 4

[Максим]

на keyframes - можно попробовать !

Comments

[jazzman7]

я несколько решений проверял, не то. после чего решил задать вопрос

[Максим]

jazzman7, вы покажите - что вы пробовали и почему не устроило то что было ??

[jazzman7]

Максим Ленский, https://toster.ru/answer?answer_id=1165704#comment...

[Максим]

jazzman7, вы вы хотите что бы была пауза в анимации ?