Hover Effects TS - Usage Guide

This example demonstrates best practices for using the hover-effects-ts library, with focus on the Minecraft and Pixel effects.

Minecraft Effect Example

Block Size: 28

Effect Radius: 130

Show Debug Info

Debug information will appear here...

Pixel Effect Example

Block Size: 16

Effect Radius: 130

Show Debug Info

Debug information will appear here...

Implementation Code

Here's how the effects above are implemented:

// Wait for images to load first
document.addEventListener('DOMContentLoaded', () => {
  const minecraftDemo = document.getElementById('minecraft-demo');
  const pixelDemo = document.getElementById('pixel-demo');
  
  // Store effect instances
  let minecraftEffect = null;
  let pixelEffect = null;
  
  // Initialize effects when images are loaded
  const initializeEffects = () => {
    // Get current slider values
    const minecraftBlockSize = parseInt(document.getElementById('minecraft-block-size').value);
    const minecraftRadius = parseInt(document.getElementById('minecraft-radius').value);
    
    const pixelBlockSize = parseInt(document.getElementById('pixel-block-size').value);
    const pixelRadius = parseInt(document.getElementById('pixel-radius').value);
    
    // Apply Minecraft effect with values from sliders
    minecraftEffect = applyHoverEffect(minecraftDemo, {
      effect: 'minecraft',
      blockSize: minecraftBlockSize,
      radius: minecraftRadius
    });
    
    // Apply Pixel effect with values from sliders
    pixelEffect = applyHoverEffect(pixelDemo, {
      effect: 'pixel',
      blockSize: pixelBlockSize,
      radius: pixelRadius
    });
    
    // Set up controls
    setupControls();
  };
  
  // Wait for images to load
  let imagesLoaded = 0;
  const onImageLoad = () => {
    imagesLoaded++;
    if (imagesLoaded === 2) {
      initializeEffects();
    }
  };
  
  if (minecraftDemo.complete) {
    onImageLoad();
  } else {
    minecraftDemo.onload = onImageLoad;
  }
  
  if (pixelDemo.complete) {
    onImageLoad();
  } else {
    pixelDemo.onload = onImageLoad;
  }
  
  // Setup control handlers
  const setupControls = () => {
    // Minecraft controls
    const minecraftBlockSizeSlider = document.getElementById('minecraft-block-size');
    const minecraftRadiusSlider = document.getElementById('minecraft-radius');
    const minecraftBlockSizeValue = document.getElementById('minecraft-block-size-value');
    const minecraftRadiusValue = document.getElementById('minecraft-radius-value');
    const minecraftDebugBtn = document.getElementById('minecraft-debug');
    const minecraftDebugOutput = document.getElementById('minecraft-debug-output');
    
    // Update block size using setter method
    minecraftBlockSizeSlider.addEventListener('input', (e) => {
      const size = parseInt(e.target.value);
      minecraftBlockSizeValue.textContent = size;
      minecraftEffect.setBlockSize(size);
    });
    
    // Update radius using setter method
    minecraftRadiusSlider.addEventListener('input', (e) => {
      const radius = parseInt(e.target.value);
      minecraftRadiusValue.textContent = radius;
      minecraftEffect.setRadius(radius);
    });
    
    // Debug button
    minecraftDebugBtn.addEventListener('click', () => {
      const debugInfo = minecraftEffect.getDebugInfo();
      minecraftDebugOutput.textContent = JSON.stringify(debugInfo, null, 2);
    });
    
    // Pixel controls (similar pattern)
    const pixelBlockSizeSlider = document.getElementById('pixel-block-size');
    const pixelRadiusSlider = document.getElementById('pixel-radius');
    const pixelBlockSizeValue = document.getElementById('pixel-block-size-value');
    const pixelRadiusValue = document.getElementById('pixel-radius-value');
    const pixelDebugBtn = document.getElementById('pixel-debug');
    const pixelDebugOutput = document.getElementById('pixel-debug-output');
    
    pixelBlockSizeSlider.addEventListener('input', (e) => {
      const size = parseInt(e.target.value);
      pixelBlockSizeValue.textContent = size;
      pixelEffect.setBlockSize(size);
    });
    
    pixelRadiusSlider.addEventListener('input', (e) => {
      const radius = parseInt(e.target.value);
      pixelRadiusValue.textContent = radius;
      pixelEffect.setRadius(radius);
    });
    
    pixelDebugBtn.addEventListener('click', () => {
      const debugInfo = pixelEffect.getDebugInfo();
      pixelDebugOutput.textContent = JSON.stringify(debugInfo, null, 2);
    });
  };
});

Key Best Practices

1. Wait for images to load before applying effects
2. Use slider values during initialization rather than defaulting
3. Use setter methods for real-time updates instead of destroying/recreating
4. Add debug tools to inspect the internal state of effects
5. Use the correct default values: Minecraft effect uses 28px blocks, Pixel effect uses 16px blocks