suryajs-animfx
v1.0.0
Published
SuryaJS - A powerful JavaScript animation library with 20+ image, text, and advanced 3D effects
Maintainers
suryadeep1212Readme
AnimFX.js 🎨
A powerful, lightweight JavaScript animation library that provides stunning visual effects for images and text with zero dependencies.
✨ Features
- 5 Image Effects: Fade, slide, zoom, flip, and glitch animations
- 5 Text Effects: Typewriter, fade up, letter spacing, color wave, and split reveal
- Zero Dependencies: Pure JavaScript with no external libraries
- Easy Integration: Simple API with data attributes or JavaScript calls
- Responsive: Works on all devices and screen sizes
- Performance Optimized: Uses CSS transforms and modern web APIs
- Accessibility: Respects
prefers-reduced-motionsettings
🚀 Quick Start
Installation
npm install animfx-jsCDN Usage
<script src="https://unpkg.com/animfx-js@latest/dist/animfx.min.js"></script>Basic Usage
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/animfx-js@latest/dist/animfx.min.js"></script>
</head>
<body>
<!-- Auto-trigger effects with data attributes -->
<img src="image.jpg" data-image-effect="1" alt="Animated Image">
<h1 data-text-effect="1">Animated Text</h1>
<!-- Or trigger programmatically -->
<script>
// Image effects
animFX.imageEffect(1); // Fade in scale
animFX.imageEffect(2); // Slide in rotate
// Text effects
animFX.textEffect(1); // Typewriter
animFX.textEffect(2); // Fade in up
</script>
</body>
</html>📖 API Reference
Image Effects
| Effect Number | Name | Description |
|---------------|------|-------------|
| 1 | Fade In Scale | Fades in with scaling animation |
| 2 | Slide In Rotate | Slides from left with rotation |
| 3 | Zoom Blur | Zooms in while removing blur |
| 4 | Flip Reveal | 3D flip animation reveal |
| 5 | Glitch Effect | Digital glitch animation |
Usage Examples
// Apply to all images
animFX.imageEffect(1);
// Apply to specific element
const img = document.querySelector('#myImage');
animFX.imageEffect(2, img);
// Using data attributes
<img src="photo.jpg" data-image-effect="3">Text Effects
| Effect Number | Name | Description |
|---------------|------|-------------|
| 1 | Typewriter | Types text character by character |
| 2 | Fade In Up | Fades in while moving up |
| 3 | Letter Spacing | Animates letter spacing |
| 4 | Color Wave | Waves of color through text |
| 5 | Split Reveal | Reveals each character individually |
Usage Examples
// Apply to all text elements
animFX.textEffect(1);
// Apply to specific element
const heading = document.querySelector('h1');
animFX.textEffect(2, heading);
// Using data attributes
<h1 data-text-effect="4">Colorful Text</h1>Advanced Usage
Hover Effects
// Add hover effects
animFX.addHoverEffect('.card img', 'image', 3);
animFX.addHoverEffect('.title', 'text', 4);Scroll-Triggered Animations
// Trigger animations on scroll
animFX.addScrollEffect('.gallery img', 'image', 1, {
threshold: 0.2,
rootMargin: '50px'
});
animFX.addScrollEffect('.content h2', 'text', 5, {
threshold: 0.1
});🎯 Complete Examples
Example 1: Image Gallery
<!DOCTYPE html>
<html>
<head>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
}
.gallery img {
width: 100%;
border-radius: 8px;
}
</style>
<script src="https://unpkg.com/animfx-js@latest/dist/animfx.min.js"></script>
</head>
<body>
<div class="gallery">
<img src="image1.jpg" data-image-effect="1" alt="Image 1">
<img src="image2.jpg" data-image-effect="2" alt="Image 2">
<img src="image3.jpg" data-image-effect="3" alt="Image 3">
<img src="image4.jpg" data-image-effect="4" alt="Image 4">
</div>
</body>
</html>Example 2: Text Animations
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/animfx-js@latest/dist/animfx.min.js"></script>
</head>
<body>
<h1 data-text-effect="1">Welcome to AnimFX</h1>
<h2 data-text-effect="2">Beautiful Animations</h2>
<p data-text-effect="3">Made Simple</p>
<script>
// Add scroll-triggered animations
animFX.addScrollEffect('h1, h2, p', 'text', 1);
</script>
</body>
</html>Example 3: Mixed Effects with JavaScript
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/animfx-js@latest/dist/animfx.min.js"></script>
</head>
<body>
<div class="hero">
<img id="heroImage" src="hero.jpg" alt="Hero Image">
<h1 id="heroTitle">Amazing Website</h1>
</div>
<script>
// Custom timing and effects
setTimeout(() => {
animFX.imageEffect(1, document.getElementById('heroImage'));
}, 500);
setTimeout(() => {
animFX.textEffect(1, document.getElementById('heroTitle'));
}, 1000);
</script>
</body>
</html>🛠️ Module Usage (ES6/CommonJS)
ES6 Modules
import AnimFX from 'animfx-js';
const fx = new AnimFX();
fx.imageEffect(1);
fx.textEffect(2);CommonJS
const AnimFX = require('animfx-js');
const fx = new AnimFX();
fx.imageEffect(1);
fx.textEffect(2);React Integration
import React, { useEffect, useRef } from 'react';
import AnimFX from 'animfx-js';
function AnimatedComponent() {
const imageRef = useRef(null);
const textRef = useRef(null);
useEffect(() => {
const fx = new AnimFX();
if (imageRef.current) {
fx.imageEffect(1, imageRef.current);
}
if (textRef.current) {
fx.textEffect(2, textRef.current);
}
}, []);
return (
<div>
<img ref={imageRef} src="image.jpg" alt="Animated" />
<h1 ref={textRef}>Animated Text</h1>
</div>
);
}🎨 Customization
Custom Options
// Custom duration and delays
const options = {
duration: 2000,
delay: 500,
easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
};
// Apply with custom options (for direct effect methods)
animFX.imageEffects.fadeInScale(elements, options);
animFX.textEffects.typeWriter(elements, { speed: 100 });🌐 Browser Support
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
📝 License
MIT License - see LICENSE file for details.
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
📞 Support
If you have any questions or need help, please open an issue.
Made with ❤️ by [Your Name]