I want the shapes to reappear from the right as soon as they start to disappear on the left. For example, if I have square1, circle1, and star1 in a row moving from right to left, as soon as square1 begins to disappear on the left, it should immediately reappear on the right, without waiting for circle1 or star1 to disappear. I want to implement this using jquery.
function startAutoScroll() {
const $track = $('.track');
const $shapes = $('.shapes');
const trackWidth = $track.width();
const containerWidth = $('.track-container').width();
const shapeWidth = $shapes.first().outerWidth(true); // Width including margin
// Speed of scrolling based on slider value
const scrollSpeed = 1; // Adjust as necessary for smoother scrolling
// Continuous scrolling of the track
autoScrollInterval = setInterval(function() {
if (!isHovering) {
let currentLeft = parseInt($track.css('left'), 10);
let newLeft = currentLeft - scrollSpeed;
// Reset track position to create a continuous effect
if (Math.abs(newLeft) >= trackWidth) {
newLeft = 0;
}
$track.css('left', `${newLeft}px`);
}
}, 100 / autoScrollSpeed); // Interval time for smooth scrolling
// Animate shapes with seamless looping
function animateShapes() {
const totalShapesWidth = $shapes.length * shapeWidth;
// Position shapes outside the container initially
$shapes.each(function(index) {
$(this).css('left', containerWidth + index * shapeWidth + 'px');
});
// Animate shapes
$({ offset: containerWidth }).animate(
{ offset: -totalShapesWidth },
{
duration: 10000 / autoScrollSpeed, // Adjust duration based on speed
easing: 'linear',
step: function(now) {
$shapes.each(function(index) {
let offset = now + index * shapeWidth;
// Ensure the shapes wrap around seamlessly
if (offset <= -shapeWidth) {
offset += totalShapesWidth;
}
$(this).css('left', offset + 'px');
});
},
complete: function() {
// Ensure the animation loops correctly
animateShapes(); // Loop animation
}
}
);
}
animateShapes(); // Start shape animation
}