https://github.com/harshmandan/svelte-overflow-fade
Svelte attachment and action to enable overflow fade for slick looking effect ✨
https://github.com/harshmandan/svelte-overflow-fade
css library svelte sveltejs sveltekit
Last synced: 10 months ago
JSON representation
Svelte attachment and action to enable overflow fade for slick looking effect ✨
- Host: GitHub
- URL: https://github.com/harshmandan/svelte-overflow-fade
- Owner: harshmandan
- License: mit
- Created: 2025-08-15T08:43:20.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-16T11:57:52.000Z (11 months ago)
- Last Synced: 2025-08-31T03:03:55.461Z (10 months ago)
- Topics: css, library, svelte, sveltejs, sveltekit
- Language: Svelte
- Homepage: https://harshmandan.github.io/svelte-overflow-fade/
- Size: 508 KB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
svelte-overflow-fade
A Svelte action and attachment for adding beautiful fade effects to overflowing content
## 🖼️ Demo
[Live Demo →](https://harshmandan.github.io/svelte-overflow-fade/)
## ✨ Features
- 🎨 **Two fade modes**: CSS mask-based or DOM element-based
- 🔄 **Dual API support**: Actions for all Svelte versions, Attachments for Svelte 5.29+
- 📏 **Directional scrolling**: Supports both horizontal and vertical overflow
- 🎯 **Smart detection**: Automatically shows/hides fades based on scroll position
- ⚡ **Performant**: Throttled scroll events and optimized animations
- 🌗 **Dark mode ready**: Works seamlessly with any color scheme
- 📦 **Zero dependencies**: Lightweight and self-contained
## 📦 Installation
```bash
npm install svelte-overflow-fade
```
```bash
pnpm add svelte-overflow-fade
```
```bash
yarn add svelte-overflow-fade
```
## 🚀 Quick Start
### Using the Action API (All Svelte versions)
```svelte
import { overflowFadeAction } from 'svelte-overflow-fade';
```
### Using the Attachment API (Svelte 5.29+)
```svelte
import { overflowFade } from 'svelte-overflow-fade';
```
## ⚙️ Configuration Options
| Option | Type | Description |
| ---------------------- | --------------------- | --------------------------------------------- |
| `axis` | `'x' \| 'y'` | Direction of scroll (horizontal or vertical) |
| `fade.type` | `'mask' \| 'element'` | Fade implementation method |
| `fade.fadePercent` | `number` | Size of fade as percentage (mask mode only) |
| `fade.size` | `string` | Size of fade in CSS units (element mode only) |
| `fade.backgroundColor` | `string` | Fade color (element mode only) |
| `fade.zIndex` | `number` | Z-index for fade elements (element mode only) |
## 🎨 Fade Modes
### CSS Mask Mode (Recommended)
- Uses CSS `mask-image` for smooth, native fading
- Perfect for gradient backgrounds
- Better performance
- Preserves background effects
```javascript
fade: {
type: 'mask',
fadePercent: 10
}
```
### Element Mode
- Creates DOM elements with gradient backgrounds
- Compatible with older browsers
- Customizable fade color
- Good for solid backgrounds
```javascript
fade: {
type: 'element',
size: '60px',
backgroundColor: 'white',
zIndex: 10
}
```
## 🔄 Events
The action dispatches an `overflow` event with the current overflow state:
```svelte
function handleOverflow(event) {
const { overflowTop, overflowBottom, overflowLeft, overflowRight } = event.detail;
// React to overflow changes
}
```
## 📄 License
MIT © Harsh Mandan