The constructor will look for the required elements to make the peel effect in the options, and create them if they do not exist.
OptionalpathOptionaldragOptionalpressOptionaltimeOptionalpeelOptionalflipOptionaltopOptionalbottomOptionaltopOptionalbackOptionalbottomOptionalbackOptionalbackOptionalbottomOptionalusesStatic ReadonlydefaultSets the corner for the effect to peel back from.
Threshold above which the top layer (including the backside) layer will begin to fade out. This is calculated based on the visible clipped area of the polygon. If a peel path is set, it will use the progress along the path instead.
Creates a shadow effect on the top layer of the peel. This may be a box-shadow or drop-shadow (filter) depending on the shape of the clipping.
When a complex (non-rectangular) shape is used for the clipping effect, if this option is true another SVG shape will be embedded in the top layer to be used as the drop shadow. This is required for the drop-shadow filter effect but can be turned off here as the drop shadow effect can sometimes produce odd results.
Creates a shiny effect on the back layer of the peel.
When true, the reflection effect will reach its maximum halfway through the peel, then diminish again. If false, it will continue to grow as the peel advances.
Creates a shadow effect on the back layer of the peel.
When true, the back shadow effect will reach its maximum halfway through the peel, then diminish again. If false, it will continue to grow as the peel advances. "Book" mode sets this to false so that the effect can still have some depth when the book is "fully open".
Creates a shadow effect on the bottom layer of the peel.
Alpha value (color is black) of the dark shadow on the bottom layer.
Alpha value (color is black) of the light shadow on the bottom layer.
When true, the bottom shadow effect will reach its maximum halfway through the peel, then diminish again. If false, it will continue to grow as the peel advances. "Book" mode sets this to false so that the effect can still have some depth when the book is "fully open".
If true, the peel effect will be set to its relative corner on initialization.
Sets the scale of the clipping box around the element. Default is 4, which means 4 times the element size. This allows the effects like box shadow to be seen even when the upper layer falls outsize the element boundaries. Setting this too high may encounter odd effects with clipping.
When constraining the peel, the effect will "flip" around the axis of the constraint, which tends to look unnatural. This offset will pull the corner in a few pixels when approaching the axis line, which results in a smoother transition instead of a sudden flip. The value here determines how many pixels the corner is pulled in.
Whether initiating a drag event (by mouse or touch) will call preventDefault on the original event.
Sets a path along which the peel will follow. Can be a flat line segment or a bezier curve.
Sets a function to be called when the user either presses or drags.
The function to be called on press. This function will be called with the original event as the first argument, and the x, y coordinates of the event as the 2nd and 3rd arguments, respectively.
Optionalel: HTMLElementThe element to initiate the event. If not passed, this will be the element associated with the Peel instance. Allowing this to be passed lets another element serve as a "hit area" that can be larger than the element itself.
Sets the peel effect to a point in time along a previously specified path. Will throw an error if no path exists.
Sets the position of the peel effect. This point is the position of the corner that is being peeled back.
Sets a constraint on the distance of the peel. This can be thought of as a point on the layers that are connected and cannot be torn apart. Typically this only makes sense as a point on the outer edge, such as the left edge of an open book, or the top edge of a calendar. In this case, simply using 2 constraint points (top-left/bottom-left for a book, etc) will create the desired effect. An arbitrary point can also be used with an effect like a thumbtack holding the pages together.
Gets the ratio of the area of the clipped top layer to the total area. This is used to calculate a fade threshold.
A value between 0 and 1.
Main class that controls the peeling effect.