Simple page flip

Appearance

API references ​

Interfaces ​

EffectStyle ​

The return type of APIs in this library

typescript
export declare interface EffectStyle {
    flipFront: Partial<CSSStyleDeclaration>;
    flipBack: Partial<CSSStyleDeclaration>;
    flipShadow: Partial<CSSStyleDeclaration>;
    flipEffect: Partial<CSSStyleDeclaration>;
}

The maxShadowWidth parameter ​

This parameter controls the max width of shadow effect and reflection.

Text Text
The
  Book Title
Text Text
width: 120
shadow: 10
Text Text
The
  Book Title
Text Text
width: 120
shadow: 30

The actual shadow width is capped by the distance to the corner.
The book will have no effect applied when it is nearly completely opened or closed.

Text Text
The
  Book Title
Text Text
width: 120
shadow: 10

It won't overflow the page dog-ear when specified value is much wider than the dog-ear itself.

Text Text
The
  Book Title
Text Text
width: 120
shadow: 50

The unit parameter ​

The unit parameter represent base length unit of this library (defaults to 1px), it can be used with js/css variable to resize the effect.

Text Text
The
  Book Title
Text Text
unit: 1px
Text Text
The
  Book Title
Text Text
unit: 0.5px

it can also be combined with container query unit like 1cqw to make the effect responsive

Raw Effects ​

These are raw effects that fold from specific edge to other

Left Top ​

Connects from left edge to top edge

Text Text
The
  Book Title
Text Text
width: 120
top offset: 60
height: 160
left offset: 75
typescript
export declare const getEffectLeftTop: (
    width: number,
    height: number,
    leftOffset: number,
    topOffset: number,
    maxShadowWidth: number,
    unit?: string,
) => EffectStyle;

Left Bottom ​

Connects from left edge to bottom edge

Text Text
The
  Book Title
Text Text
width: 120
height: 160
left offset: 75
bottom offset: 90
typescript
export declare const getEffectLeftBottom: (
    width: number,
    height: number,
    leftOffset: number,
    bottomOffset: number,
    maxShadowWidth: number
    unit?: string,
) => EffectStyle;

Left ​

Connects from top edge to bottom edge (flip the whole left edge to right)

Text Text
The
  Book Title
Text Text
width: 120
top offset: 60
height: 160
bottom offset: 90
typescript
export declare const getEffectLeft: (
    width: number,
    height: number,
    topOffset: number,
    bottomOffset: number,
    maxShadowWidth: number
    unit?: string,
) => EffectStyle;

Right Top ​

Connects from right edge to top edge

Text Text
The
  Book Title
Text Text
width: 120
top offset: 60
height: 160
right offset: 105
typescript
export declare const getEffectRightTop: (
    width: number,
    height: number,
    rightOffset: number,
    topOffset: number,
    maxShadowWidth: number
    unit?: string,
) => EffectStyle;

Right Bottom ​

Connects from right edge to bottom edge

Text Text
The
  Book Title
Text Text
width: 120
bottom offset: 90
height: 160
right offset: 105
typescript
export declare const getEffectRightBottom: (
    width: number,
    height: number,
    rightOffset: number,
    bottomOffset: number,
    maxShadowWidth: number
    unit?: string,
) => EffectStyle;

Connects from top edge to bottom edge (flip the whole right edge to left)

Text Text
The
  Book Title
Text Text
width: 120
top offset: 60
bottom offset: 90
height: 160
typescript
export declare const getEffectRight: (
    width: number,
    height: number,
    topOffset: number,
    bottomOffset: number,
    maxShadowWidth: number
    unit?: string,
) => EffectStyle;

Full effect ​

High level api that auto select the proper effect with a center point and a tilting angle

Left ​

Book page on left

* The angle parameter will be capped to the max possible value.

Text Text
The
  Book Title
Text Text
width: 120
centerX: 60
height: 160
centerY: 80
0
°
30
°
typescript
/**
 * @param width
 * @param height
 * @param centerX
 * @param centerY
 * @param angle tilting of the page flip, between `-Math.PI / 2` and `Math.PI / 2`.
 *              positive for clockwise, negative for counter clockwise
 * @param maxShadowWidth
 * @param unit base unit of all length value, defaults to `1px`
 */
export declare const createEffectLeft: (
    width: number,
    height: number,
    centerX: number,
    centerY: number,
    angle: number,
    maxShadowWidth: number
    unit?: string,
) => EffectStyle;

Right ​

Book page on right

* The angle parameter will be capped to the max possible value.

Text Text
The
  Book Title
Text Text
width: 120
centerX: 60
height: 160
right offset: 80
0
°
30
°
typescript

/**
 * @param width
 * @param height
 * @param centerX
 * @param centerY
 * @param angle tilting of the page flip, between `-Math.PI / 2` and `Math.PI / 2`.
 *              positive for clockwise, negative for counter clockwise
 * @param maxShadowWidth
 * @param unit base unit of all length value, defaults to `1px`
 */
export declare const createEffectRight: (
    width: number,
    height: number,
    centerX: number,
    centerY: number,
    angle: number,
    maxShadowWidth: number
    unit?: string,
) => EffectStyle;