https://informestconsulting.it/static/js/scrolling_logos.js

1function fillLogos(scroller, initialWidth) {
2    let current = 0;
3    let max = 0;
4    const last = scroller.children.length;
5
6    while (
7        scroller.offsetWidth < initialWidth + window.innerWidth &&
8        max < 30
9    ) {
10        const clone = scroller.children.item(current).cloneNode(true);
11        scroller.append(clone);
12        current = (current + 1) % last;
13        max += 1;
14    }
15}
16
17function initScroller(scrollerClass, direction) {
18    const scroller = document.querySelector(scrollerClass);
19    if (!scroller) return;
20    if (scroller.children.length === 0) return;
21
22    const initialWidth = scroller.offsetWidth;
23    fillLogos(scroller, initialWidth);
24
25    const gap = window.getComputedStyle(scroller).gap;
26    const gapPx = gap.slice(0, gap.length - 2);
27
28    const card = scroller.querySelector('.logo-card');
29    const padding = window.getComputedStyle(card).padding;
30    const paddingPx = gap.slice(0, padding.length - 2);
31
32    let x = 0;
33
34    function scroll() {
35        let moveBy = 1;
36
37        if (direction == 'left') {
38            moveBy *= -1;
39            x = (x + moveBy) % (initialWidth + parseInt(gapPx));
40        } else {
41            if (x >= 0) x = x - (initialWidth + parseInt(gapPx));
42            x += moveBy;
43        }
44
45        scroller.style.transform = `translate3d(${x}px, 0, 0)`;
46    }
47    let interval;
48
49    window.addEventListener('scroll', function () {
50        const position = scroller.getBoundingClientRect();
51
52        if (position.top < window.innerHeight && position.bottom >= 0) {
53            if (interval) {
54                return;
55            }
56            interval = setInterval(scroll, 10);
57        } else {
58            interval = clearInterval(interval);
59        }
60    });
61
62    window.addEventListener('resize', () => {
63        fillLogos(scroller, initialWidth);
64    });
65}
66
67export { initScroller };