Как сделать бесконечную горизонтальную прокрутку с остановкой при наведении курсора?

Question

[Лев Розанов]

Здравствуйте!

Никак не могу найти скрипт бесконечно горизонтальной прокрутки блоков с остановкой при наведении курсора.
Точный пример (в разделе "Your whole financial life at your fingertips").

Но там я тоже не могу вытащить сам скрипт.

Вроде нашел это, но при прокрутке он прям дергается (даже в демо).

Гугл уже измучил, но мне кажется, что я как-то не так ставлю вопрос, а долблю по горизонтальной прокрутке и infinity.

Пожалуйста, помогите!
Заранее спасибо!

Answer 1

[Kirito Kirigaya]

В вашем первом примере используются css стили завязанные на обычной анимации.
В нутри класса box распологаются 22 бокса которые катаются с права на лево.
По крайней мере они это так сделали.
Вот пример я сделал Infiniti scroll on css

.box {
    width: 3421px;
    transform: translate3d(0, 0, 0);
    animation: dReeeA 50s linear infinite;
}

@keyframes dReeeA {
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

На этом сайте из примера кстати говоря вёрстка кривая в некоторых местах..

Comments

[Лев Розанов]

Большое Вам спасибо!

[Kirito Kirigaya]

Лев Розанов, Я там комментарии сижу дописываю как это рассчитывается..
Прочитайте их так-же иначе будет не доезжать!

[Лев Розанов]

Brendan Castaneda, Супер! Еще раз спасибо!