suryajs-animfx
Version:
SuryaJS - A powerful JavaScript animation library with 20+ image, text, and advanced 3D effects
307 lines (236 loc) • 7.11 kB
Markdown
# AnimFX.js 🎨
A powerful, lightweight JavaScript animation library that provides stunning visual effects for images and text with zero dependencies.
[](https://badge.fury.io/js/animfx-js)
[](https://opensource.org/licenses/MIT)
## ✨ 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-motion` settings
## 🚀 Quick Start
### Installation
```bash
npm install animfx-js
```
### CDN Usage
```html
<script src="https://unpkg.com/animfx-js@latest/dist/animfx.min.js"></script>
```
### Basic Usage
```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
```javascript
// 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
```javascript
// 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
```javascript
// Add hover effects
animFX.addHoverEffect('.card img', 'image', 3);
animFX.addHoverEffect('.title', 'text', 4);
```
#### Scroll-Triggered Animations
```javascript
// 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
```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
```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
```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
```javascript
import AnimFX from 'animfx-js';
const fx = new AnimFX();
fx.imageEffect(1);
fx.textEffect(2);
```
### CommonJS
```javascript
const AnimFX = require('animfx-js');
const fx = new AnimFX();
fx.imageEffect(1);
fx.textEffect(2);
```
### React Integration
```jsx
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
```javascript
// 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](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](https://github.com/yourusername/animfx-js/issues).
---
Made with ❤️ by [Your Name]