suryajs-animfx/src/effects/imageEffects.js

SuryaJS - A powerful JavaScript animation library with 20+ image, text, and advanced 3D effects

class ImageEffects {
  constructor() {
    this.defaultDuration = 1000;
    this.defaultEasing = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
  }

  // Effect 1: Fade In with Scale
  fadeInScale(elements, options = {}) {
    const duration = options.duration || this.defaultDuration;
    const delay = options.delay || 0;

    elements.forEach((element, index) => {
      element.style.opacity = '0';
      element.style.transform = 'scale(0.8)';
      element.style.transition = `all ${duration}ms ${this.defaultEasing}`;
      
      setTimeout(() => {
        element.style.opacity = '1';
        element.style.transform = 'scale(1)';
      }, delay + (index * 100));
    });
  }

  // Effect 2: Slide In with Rotate
  slideInRotate(elements, options = {}) {
    const duration = options.duration || this.defaultDuration;
    const delay = options.delay || 0;

    elements.forEach((element, index) => {
      element.style.opacity = '0';
      element.style.transform = 'translateX(-100px) rotate(-10deg)';
      element.style.transition = `all ${duration}ms ${this.defaultEasing}`;
      
      setTimeout(() => {
        element.style.opacity = '1';
        element.style.transform = 'translateX(0) rotate(0deg)';
      }, delay + (index * 150));
    });
  }

  // Effect 3: Zoom Blur
  zoomBlur(elements, options = {}) {
    const duration = options.duration || this.defaultDuration;
    const delay = options.delay || 0;

    elements.forEach((element, index) => {
      element.style.filter = 'blur(10px)';
      element.style.transform = 'scale(1.2)';
      element.style.transition = `all ${duration}ms ${this.defaultEasing}`;
      
      setTimeout(() => {
        element.style.filter = 'blur(0px)';
        element.style.transform = 'scale(1)';
      }, delay + (index * 100));
    });
  }

  // Effect 4: Flip Reveal
  flipReveal(elements, options = {}) {
    const duration = options.duration || this.defaultDuration;
    const delay = options.delay || 0;

    elements.forEach((element, index) => {
      element.style.transform = 'perspective(1000px) rotateY(-90deg)';
      element.style.opacity = '0';
      element.style.transition = `all ${duration}ms ${this.defaultEasing}`;
      
      setTimeout(() => {
        element.style.transform = 'perspective(1000px) rotateY(0deg)';
        element.style.opacity = '1';
      }, delay + (index * 200));
    });
  }

  // Effect 5: Glitch Effect
  glitchEffect(elements, options = {}) {
    const duration = options.duration || 2000;
    const delay = options.delay || 0;

    elements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add('glitch-effect');
        
        // Remove effect after animation completes
        setTimeout(() => {
          element.classList.remove('glitch-effect');
        }, duration);
      }, delay + (index * 300));
    });
  }

  // Utility method for hover effects
  addHoverEffect(selector, effectName) {
    const elements = document.querySelectorAll(selector);
    elements.forEach(element => {
      element.addEventListener('mouseenter', () => {
        element.classList.add(`hover-${effectName}`);
      });
      
      element.addEventListener('mouseleave', () => {
        element.classList.remove(`hover-${effectName}`);
      });
    });
  }

  // Method to create custom image effect
  customEffect(elements, keyframes, options = {}) {
    const duration = options.duration || this.defaultDuration;
    const delay = options.delay || 0;

    elements.forEach((element, index) => {
      const animation = element.animate(keyframes, {
        duration: duration,
        delay: delay + (index * 100),
        easing: options.easing || this.defaultEasing,
        fill: 'forwards'
      });
    });
  }
}

export default ImageEffects;