Examples

Common patterns and implementation examples

Common Patterns

Quick examples for common use cases

Logo Wall

new MarqueeKit("#logo-wall", {
  images: logos,
  height: 100,       // Short height for logos
  imageWidth: 150,   // Compact logo size
  speed: 40,        // Moderate speed
  gap: 40,          // More space between logos
  pauseOnHover: false,
  imageScale: 1,    // No hover effect
  borderRadius: 0   // No rounding for logos
});

Product Gallery

new MarqueeKit("#product-gallery", {
  images: products,
  height: 400,       // Taller for product images
  imageWidth: 300,   // Larger product images
  speed: 30,        // Slower for better viewing
  gap: 30,          // Moderate spacing
  pauseOnHover: true,
  imageScale: 1.1,  // Subtle hover effect
  borderRadius: 12  // Rounded corners
});

Photo Stream

new MarqueeKit("#photo-stream", {
  images: photos,
  height: 250,      // Moderate height
  imageWidth: 250,  // Square images
  speed: 60,       // Faster scroll
  gap: 20,         // Tight spacing
  pauseOnHover: true,
  imageScale: 1.2, // Pronounced hover effect
  borderRadius: 8  // Slight rounding
});

Implementation Patterns

Common implementation techniques

Lazy Loading

function initMarqueeWhenVisible(elementId, options) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        new MarqueeKit(elementId, options);
        observer.disconnect();
      }
    });
  });

  observer.observe(document.querySelector(elementId));
}

Responsive Adjustments

const marquee = new MarqueeKit("#my-marquee", options);

// Adjust for screen size
function updateForScreenSize() {
  const width = window.innerWidth;
  
  if (width < 768) {  // Mobile
    marquee.setSpeed(30);
    marquee.setBorderRadius(4);
  } else {  // Desktop
    marquee.setSpeed(50);
    marquee.setBorderRadius(8);
  }
}

// Debounced resize handler
let timeout;
window.addEventListener('resize', () => {
  clearTimeout(timeout);
  timeout = setTimeout(updateForScreenSize, 250);
});

Touch Controls

const marquee = new MarqueeKit("#my-marquee", options);
const element = document.querySelector("#my-marquee");
let touchStartX = 0;
let originalSpeed = 50;

element.addEventListener('touchstart', (e) => {
  touchStartX = e.touches[0].clientX;
  marquee.pause();
});

element.addEventListener('touchmove', (e) => {
  const diff = touchStartX - e.touches[0].clientX;
  marquee.setSpeed(diff * 0.5);
});

element.addEventListener('touchend', () => {
  marquee.setSpeed(originalSpeed);
  marquee.play();
});

Tips & Best Practices

Recommendations for optimal use

Image Optimization

• Use WebP format when possible
• Keep image dimensions consistent within each marquee
• Optimize file sizes (aim for <200KB per image)
• Consider loading smaller images on mobile

Performance

• Initialize marquees only when they come into view
• Use reasonable animation speeds (30-70 is optimal)
• Clean up instances when they're no longer needed
• Limit the number of simultaneous marquees

Responsive Design

• Adjust speeds for different screen sizes
• Consider different image dimensions on mobile
• Use percentage-based container widths
• Test touch interactions on mobile devices

Common Solutions

Quick fixes for common issues

Images Not Loading

// Wait for images to load before initializing
const images = ["/image1.jpg", "/image2.jpg"];
const preloadImages = images.map(src => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = resolve;
    img.onerror = reject;
    img.src = src;
  });
});

Promise.all(preloadImages)
  .then(() => new MarqueeKit("#my-marquee", { images }))
  .catch(error => console.error("Failed to load images:", error));

Jerky Animation

// Ensure container has explicit dimensions
const container = document.querySelector("#my-marquee");
container.style.width = "100%";
container.style.height = "300px";

// Use moderate speed and add hardware acceleration
new MarqueeKit("#my-marquee", {
  speed: 50,
  images: images,
  // Other options...
});