Beskrivelse
Page Peel 2.0 is a complete rewrite with realistic clip-path animation. Adds an attractive page peel advertisement to your WordPress site.
Features:
* Realistic diagonal peel animation using CSS clip-path
* 3D folded corner effect
* Left or right position
* Configurable small and large peel sizes
* Adjustable animation speed
* Mobile touch support (double-tap to expand, then follow link)
* Auto-open with configurable delay
* Auto-close (only for auto-open)
* Remember dismiss via localStorage (configurable duration)
* Large image preloads on page load for instant animation
* Backward compatible with Page Peel 1.0 settings
Try it instantly on tastewp.com!
Skærmbilleder
Installation
- Upload contents of
page-peel.zipto/wp-content/plugins/directory - Activate the ‘Page Peel’ plugin through the ‘Plugins’ menu in WordPress
- Ships with sample images (small.png 100x100px, large.png 400x400px) so it works out of the box — replace them via the Media Library selectors in Settings / Page Peel. The small image is optional; leave it empty to just peek into the corner of the large image instead.
- Configure the plugin through Settings / Page Peel: position, sizes, animation speed, auto-open options, and the target URL
FAQ
-
Can I change which corner the peel appears in?
-
Yes! In Settings / Page Peel, choose between Left and Right position.
-
Can I change the size of the peel?
-
Yes, both the small (thumbnail) and large (full peel) sizes are configurable in Settings.
-
How does auto-open work?
-
When enabled, the peel automatically opens after a configurable delay. If “remember dismiss” is enabled and the user previously dismissed the peel, it won’t auto-open again for the chosen duration.
-
Does the large image load on hover or on page load?
-
The large image preloads on page load. The peel animation only activates after the image is fully loaded, ensuring a smooth experience.
-
Does it work on mobile?
-
Yes! On touch devices, the first tap expands the peel, and the second tap follows the link. Tapping outside collapses the peel.
-
How is this different from version 1.0?
-
Version 1.0 used a simple CSS width/height transition. Version 2.0 uses clip-path for a realistic diagonal peel animation, adds 3D folded corner, left/right positioning, configurable sizes, mobile support, and auto-open/close features.
Bidragsydere & udviklere
“Page Peel” er open source-software. Følgende personer har bidraget til dette plugin.
Bidragsydere
Oversæt “Page Peel” til dit eget sprog.
Interesseret i udvikling?
Gennemse koden, tjek SVN repository, eller abonner på udviklerloggen via RSS.
Ændringslog
2.0
- Complete rewrite with realistic clip-path diagonal peel animation
- Curved, curled paper fold (quadratic-Bézier crease and edges) instead of a straight triangle, with a small damped wobble on open/close
- Optional attention pulse: repeats a small wiggle on the closed peel every few seconds to catch the eye (off by default, configurable interval)
- The peel box no longer resizes during the animation — the ad image stays pinned at its true size and only the reveal window grows, so it reads as paper lifting rather than a div inflating
- Large image now appears instantly the moment the peel starts opening (no crossfade); the small thumbnail only reappears once fully closed
- Peel color now adapts to the page: it’s derived from the page’s detected background color (or a manual color override), auto-computing whether the fold needs a darker or lighter shade — no more a fixed white sheet clashing with dark themes
- 3D folded corner effect with paper-like gradient, remapped per-frame so it never washes out flat
- Soft drop-shadow that follows the curved fold edge
- Left and right position option (right side is a true mirror, including shadow direction)
- Configurable small and large peel sizes (px), capped responsively on small viewports
- Adjustable animation speed (0.5s – 2.0s)
- Pointer-events-based hover/tap handling (works correctly on hybrid touch+mouse devices)
- Auto-open with configurable delay
- Auto-close (only for auto-open)
- Remember dismiss via localStorage with configurable duration, now also recorded on desktop
- Large image preloads on page load
- Keyboard-accessible (focus/blur open and close the peel) with an accessible link label
- Media Library integration in settings
- Proper escaping, sanitized settings, and modern PHP
- Backward compatible with version 1.0 settings
1.0
- Complete rewrite, pure CSS page peel instead of old Flash version!
- Moved page peel to the left!
- Added ability to specify target of the link.
0.3
- Fixed visualization bug
0.2
- Moved the initalization code of plugin to the page footer. Hopefully this will make it work in IE also
0.1
- Initial release