Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nodlik/stpageflip
Simple library for creating realistic page turning effects
https://github.com/nodlik/stpageflip
book flip fold frontend javascript page pageflip reader typescript
Last synced: about 2 hours ago
JSON representation
Simple library for creating realistic page turning effects
- Host: GitHub
- URL: https://github.com/nodlik/stpageflip
- Owner: Nodlik
- License: mit
- Created: 2020-05-16T11:56:28.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-01-08T09:10:43.000Z (about 1 year ago)
- Last Synced: 2025-01-12T23:04:25.497Z (9 days ago)
- Topics: book, flip, fold, frontend, javascript, page, pageflip, reader, typescript
- Language: TypeScript
- Homepage: https://nodlik.github.io/StPageFlip/
- Size: 12.8 MB
- Stars: 522
- Watchers: 12
- Forks: 110
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/Nodlik/StPageFlip/blob/master/LICENSE) [](https://www.npmjs.com/package/page-flip) [](https://npmcharts.com/compare/page-flip?minimal=true) [](https://www.buymeacoffee.com/nndlik)
# StPageFlip
Powerful, simple, and flexible JS Library for creating realistic and beautiful page turning effect.
### Features
- Works with simple images on canvas and complex HTML blocks
- Has simple API and flexible configuration
- Compatible with mobile devices
- Supports landscape and portrait screen mode
- Supports soft and hard page types (only in HTML mode)
- No dependencies
Demo and docs: https://nodlik.github.io/StPageFlip/
For React.JS you can use: https://nodlik.github.io/react-pageflip/
Docs (generated by TypeDoc): https://nodlik.github.io/StPageFlip/docs/index.html
### Installation
You can install the latest version using npm:
`npm install page-flip`
Or download bundle from Github
### Usage
If you've installed the package from npm, you should import PageFlip from page-flip package, or just use `` tag:
```html
```
To create a new PageFlip object:
```js
import { PageFlip } from 'page-flip';
const pageFlip = new PageFlip(htmlParentElement, settings);
// or if you're using a script tag and page-flip.browser.js:
const pageFlip = new St.PageFlip(htmlParentElement, settings);
```
`htmlParentElement - HTMLElement`- root element, where the book will be created
`settings: object` - configuration object.
To draw on a canvas, use `loadFromImages`:
```js
pageFlip.loadFromImages(['path/to/image1.jpg', 'path/to/image2.jpg' ... ]);
```
To load page from html elements - use `loadFromHtml`:
```js
pageFlip.loadFromHtml(items);
```
For example:
```html
Page Cover
Page one
Page two
Page three
Page four
Last page
```
```js
const pageFlip = new PageFlip(document.getElementById('book'), {
width: 400, // required parameter - base page width
height: 600, // required parameter - base page height
});
pageFlip.loadFromHTML(document.querySelectorAll('.my-page'));
```
Use `data-density="hard"` attribute to specify page type (`soft | hard`) and define flipping animation.
### Config
To set configuration define these parameters when creating an object:
- `width: number` - required
- `height: number` - required
- `size: ("fixed", "stretch")` - default: `"fixed"` Whether the book will be stretched under the parent element or not
- `minWidth, maxWidth, minHeight, maxHeight: number` You must set threshold values with size: `"stretch"`
- `drawShadow: bool` - default: `true` Draw shadows or not when page flipping
- `flippingTime: number` (milliseconds) - default: `1000` Flipping animation time
- `usePortrait: bool` - default: `true` Enable switching to portrait mode. !This mode uses cloning of html elements (pages)
- `startZIndex: number` - default: `0` Initial value to z-index
- `startPage: number` - default: `0` Page number from which to start viewing
- `autoSize: bool` - default: `true` If this value is true, the parent element will be equal to the size of the book
- `maxShadowOpacity: number [0..1]` - default: `1` Shadow intensity (1: max intensity, 0: hidden shadows)
- `showCover: boolean` - default: `false` If this value is true, the first and the last pages will be marked as hard and will be shown in single page mode
- `mobileScrollSupport: boolean` - default: `true` disable content scrolling when touching a book on mobile devices
- `swipeDistance: number` - default: `30` (px) minimum distance to detect swipe (new on 1.1.0)
- `clickEventForward: boolean` - default: `true` forwarding click events to the page children html elements (only for `a` and `button` tags) (new on 1.1.0)
- `useMouseEvents: boolean` - default: `true` using mouse and touch events to page flipping (new on 1.2.0)
- `disableFlipByClick: boolean` - default: `false` if this value is true, flipping by clicking on the whole book will be locked. Clicking will only work in corners (new on 2.0.3)
### Events
To listen events use the method `on`:
```js
pageFlip.on('flip', (e) => {
// callback code
alert(e.data); // current page number
});
```
Available events:
- `flip: number` - triggered by page turning
- `changeOrientation: ("portrait", "landscape")` - triggered when page orientation changes
- `changeState: ("user_fold", "fold_corner", "flipping", "read")` - triggered when the state of the book changes
- `init: ({page: number, mode: 'portrait', 'landscape'})` - triggered when the book is init and the start page is loaded. Listen (`on`) this event before using the "loadFrom..." methods
- `update: ({page: number, mode: 'portrait', 'landscape'})` - triggered when the book pages are updated (using the "updateFrom..." methods)
Event object has two fields: `data: number | string` and `object: PageFlip`
### Methods
- `getPageCount: number` - Get number of all pages
- `getOrientation: 'portrait', 'landscape'` - Get the current orientation: portrait or landscape
- `getBoundsRect: PageRect` - Get current book sizes and position
- `getCurrentPageIndex: number` - Get the current page number (starts at 0)
- `turnToPage(pageNum: number)` - Turn to the specified page number (without animation)
- `turnToNextPage()` - Turn to the next page (without animation)
- `turnToPrevPage()` - Turn to the previous page (without animation)
- `flipNext(corner: 'top' | 'bottom')` - Turn to the next page (with animation)
- `flipPrev(corner: 'top' | 'bottom')` - Turn to the previous page (with animation)
- `flip(pageNum: number, corner: 'top' | 'bottom')` - Turn to the specified page (with animation)
- `loadFromImages(images: ['path-to-image1.jpg', ...])` - Load page from images
- `loadFromHtml(items: NodeListOf | HTMLElement[])` - Load page from html elements
- `updateFromHtml(items: NodeListOf | HTMLElement[])` - Update page from html elements (new on 0.4.0)
- `updateFromImages(images: ['path-to-image1.jpg', ...])` - Update page from images (new on 0.4.0)
- `destroy()` - Destructor. Remove a root HTML element and all event handlers (new on 0.4.0)
### Contacts
Oleg,
https://github.com/Nodlik/StPageFlip
[![Buy me a coffee][buymeacoffee-shield]][buymeacoffee]
[buymeacoffee]: https://www.buymeacoffee.com/nndlik
[buymeacoffee-shield]: https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png