Jak vyřešit Infinite Scrolling Loop?

Ahoj,

také přicházím jednou s prosbou o radu ;)

Toto jsem nikdy neřešil, tak se zeptám zkušenějších. Mám obrázek dejme tomu 400px Height a 1500px Width a potřebuji ho horizontálně animovat. Klasicky to třeba znáte u logotypů referencí, kdy na webu jede infinite loop těch logotypů.



Kdyby byl obrázek na 100vw nebo 100% width okna, tak bych to nějak dal si myslím, ale jak má na pevno daných 1500px width, tak netuším jak s tím pracovat (nehledě na to, že v budoucnu se může rozšířit, takže animovat nějak přesně na pixely pozice X a loopnout to asi nebude dobré řešení :D). Se samotnou animací nemám problém, ale spíš potřebuji poradit jak tento konkrétní případ vyřešit.

V teorii potřebuji, aby ten obrázek byl po obou stranách duplikovaný infinite a jela scroll animace. Neexistuje na to nějaký ověřený script?

// A ještě poznámka. Obrázek má 1500px šířku, takže na monitorech s vyšším rozlišením ani nevyplní celou šíři, takže je tam ta podmínka, aby to bylo prostě duplikované do infinite. Popisuji to asi jako maďar, ale snad si rozumíme ;)

co tohle? https://css-tricks.com/infinite-all-...ing-slideshow/

Noooo, to se zdá být přesně to co jsem hledal. Díky Ti. Dám info jestli success nebo fail :D

---------- Příspěvek doplněn 21.04.2020 v 21:13 ----------

Tak předběžná radost. Tohle přesně jsem také dokázal udělat, ale neduplikuje to ty screeny. Na to je 100% potřeba script, to v css nepůjde jak říkáš imho.

Když si tady dáš .tech-slideshow {max-width: 2000px;}, tak ti to na konci přeskočí stejně jak mně, když jsem posunoval po X o určité %. https://codepen.io/chriscoyier/pen/EyxPPm
Jakoby já to udělal prasácky i v css, tak, že jsem si ten obrázek tam hodil 3x a posouval o 33.333% ten div v kterém ty obrázky byly a skákal zpět (-33.333%), ale jak říkám to je prasácké řešení a chtělo by to nějaký simple script/knihovnu.

Kdyby někdo věděl, poraďte prosím ;)

Myslím, že principem to není složité, stačí dostatečně krát zduplikovat obrázek aby celková šířka obrázků byla větší než šířka kontejneru ve kterém jsou. Potom to stačí vhodně resetovat po dostačujícím odscrollování. Příklad tady:

Codepen

Není to vyladěné, psané na koleně, zkoušel jsem to jenom v Chromu. Navíc, pro web by to mělo reagovat na změnu velikosti okna apod., je to prostě jenom takové demíčko.

EDIT: 23:08 neuběhlo ani 5 minut a našel jsem bug, ráno moudřejší večera.

Já se právě nevyznám v javascriptu atd., takže nevím co je všechno technicky možné. Doufal jsem, že existuje nějaké elegantní řešení.

Nicméně udělal jsem to nakonec tak jak asi píšeš Miroslave. Zduplikoval jsem obrázek 3x a celý wrapper (div), ve kterém jsou obrázky animuji.

(-33.333% initial state) a jedu na -66.666% 30s, pak mám reset -33.333% 0s a mám to celé loopnuté. Jako funguje to přesně jak jsem chtěl, ale není to 100% no. Teoreticky (což se asi stejně nestane) by tam na větším rozlišení byla vidět ta mezera.