https://github.com/codebygio/leaf-js
https://github.com/codebygio/leaf-js
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/codebygio/leaf-js
- Owner: codebygio
- Created: 2025-01-18T02:27:29.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-18T03:59:19.000Z (over 1 year ago)
- Last Synced: 2025-04-30T04:31:07.198Z (about 1 year ago)
- Language: TypeScript
- Size: 87.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Leaf Flip
A modern TypeScript library for creating realistic page turn effects in web applications. Inspired by turn.js, but rebuilt from the ground up with TypeScript and modern web standards.
## Installation
```bash
npm install leaf-flip
```
## Basic Usage
### HTML Structure
```html
Page 1
Page 2
Page 3
Page 4
```
### JavaScript/TypeScript
```typescript
import { createTurnPage } from 'leaf-flip';
const element = document.getElementById('book');
const book = createTurnPage(element, {
display: 'double',
gradients: true,
acceleration: true
});
```
## API Reference
### TurnPage Options
```typescript
interface LeafOptions {
page?: number; // Initial page number
pages?: number; // Total number of pages
width?: number; // Container width
height?: number; // Container height
gradients?: boolean; // Enable shadow gradients
duration?: number; // Animation duration (ms)
acceleration?: boolean; // Enable hardware acceleration
display?: 'single' | 'double'; // Page display mode
when?: Record void>; // Event handlers
corners?: { // Custom corner configuration
backward?: Corner[];
forward?: Corner[];
all?: Corner[];
};
}
```
### FlipPage Options
```typescript
interface FlipOptions {
folding?: HTMLElement | null; // Element to fold
corners?: 'backward' | 'forward' | 'all'; // Allowed corners
cornerSize?: number; // Corner sensitivity size
gradients?: boolean; // Enable shadow gradients
duration?: number; // Animation duration
acceleration?: boolean; // Enable hardware acceleration
}
```
### Methods
#### TurnPage Methods
```typescript
book.next(); // Go to next page
book.previous(); // Go to previous page
book.setPage(number); // Go to specific page
book.setDisplay('single'); // Change display mode
book.destroy(); // Clean up resources
```
#### FlipPage Methods
```typescript
page.flip('tr'); // Flip top-right corner
page.disable(true); // Disable interactions
page.resize(); // Update dimensions
page.destroy(); // Clean up resources
```
### Events
```typescript
book.element.addEventListener('pageChanged', (e) => {
console.log('Current page:', e.detail.current);
console.log('Previous page:', e.detail.previous);
});
page.element.addEventListener('flipStart', (e) => {
console.log('Flip started:', e.detail);
});
```
## Examples
### Double Page Book
```typescript
import { createTurnPage } from 'leaf-flip';
const book = createTurnPage(element, {
display: 'double',
gradients: true,
duration: 600,
when: {
turned: (event) => {
console.log('Page turned!');
}
}
});
```
### Single Page Flip
```typescript
import { createFlipPage } from 'leaf-flip';
const page = createFlipPage(element, {
corners: 'all',
cornerSize: 100,
gradients: true
});
```
## License
MIT © [Giovani Rodriguez](https://github.com/codebygio)