I’m currently trying to figure out how to do an infinite horizontal logo scroll similar to near the bottom on this website: https://www.speedgeek.com/
The site I’m currently working on is www.getawalkthrough.com/home-copy (This is my test playground)
I’ve learned most of what I need to from this thread: Making a bunch of images scroll across the screen on an infinite loop
The scroll works but after the logos have scrolled by, the logos don’t refresh and start again. What is wrong with my code?
Here is the code I’m using:
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
var speed = 20; // Lower value = faster, Higher value = slower, 1000 = 1 second
var scroller = $('.companies-section');
var ii = setInterval(function() {
var elem = scroller.find('img').first();
var mleft = parseInt(elem.css('margin-left'),10)-1;
var mright = parseInt(elem.css('margin-right'),10);
elem.css('margin-left', mleft + 'px');
if(Math.abs(mleft) > elem.width() + mright) elem.appendTo(scroller);
}, speed);
});
</script>
Here is how my blocks are nested:
And here are the formatting for both divs:
samliew
(webflowexpert.com)
October 29, 2018, 11:17pm
2
Speedgeek is not infinite scrolling. You notice it just fades out (stops), resets, and restart the scrolling.
Issue with your site is that you are further wrapping your icon logos in another div inside companies-section
. Then, you also do not have enough logos in your div. You need more logos so that it takes up 200% of the displayed width.
Hi @samliew I appreciate the help.
I took your advice and I’m still getting 2 errors here:
Logos are starting to stack
It’s not an infinite scroll - it ends and doesn’t refresh
Again here is the link I’m testing at: www.getawalkthrough.com/home-copy
Here is what it looks like:
And here is my new div structure:
And the layout settings:
samliew
(webflowexpert.com)
October 30, 2018, 5:08am
4
Find
elem.appendTo(scroller);
Change to
elem.css('margin-left', '0').appendTo(scroller);
Code with changes:
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
var speed = 20; // Lower value = faster, Higher value = slower, 1000 = 1 second
var scroller = $('.companies-section');
var ii = setInterval(function() {
var elem = scroller.find('img').first();
var mleft = Number(elem.css('margin-left')) - 1;
var mright = Number(elem.css('margin-right'));
elem.css('margin-left', mleft + 'px');
if(Math.abs(mleft) > elem.width() + mright) elem.css('margin-left', '0').appendTo(scroller);
}, speed);
});
</script>
@samliew I appreciate the help here again
I think I’m Almost there. The issue I’m having now is that the scroller does a really wonky restart and looks like it’s glitching.
Here is where you can see it in action:
http://getawalkthrough.webflow.io/
What’s going on here?