About this plugin
Pirajki iPad Scroll Mockup adds a single shortcode, [pirajki_ipad_scroll], that renders a device mockup with a screenshot inside its screen. Hover over the frame and scroll the mouse wheel to scroll the screenshot inside the screen; move the pointer away and the page scrolls normally again. You can place as many frames as you like on the same page — each one scrolls independently.
It’s a lightweight way to showcase a website, app, or product screenshot inside a device frame without a page builder add-on or external animation library.
Features
- One shortcode — [pirajki_ipad_scroll], no blocks or builder required
- Hover-to-scroll — the screenshot only scrolls inside the frame while the mouse is over it; the page scrolls normally the rest of the time
- Multiple frames per page — each shortcode instance scrolls independently, so you can place several on one page
- Built-in default frame — ships with an iPad frame so [pirajki_ipad_scroll screenshot="456"] works out of the box
- Any device frame — swap in any transparent-background device PNG (iPad, phone, laptop, browser chrome, etc.), not just iPads
- Media Library or direct URL — pass an attachment ID or a full image URL for both the frame and the screenshot
- Pure vanilla JavaScript — no jQuery or external dependencies
- No settings page, no database options — the plugin only enqueues its assets on pages where the shortcode is actually used
Shortcode Usage
Basic usage — only a screenshot is required, the plugin ships with a default iPad frame:
[pirajki_ipad_scroll screenshot="456"]
Using your own frame and Media Library attachment IDs:
[pirajki_ipad_scroll frame="123" screenshot="456"]
Or with direct image URLs:
jpg"]
Shortcode Attributes
- frame — (optional) Attachment ID or URL of the device frame image (should have a transparent screen area). Defaults to the iPad frame bundled with the plugin.
- screenshot — (required) Attachment ID or URL of the screenshot to scroll inside the screen
- frame_alt — alt text for the frame image (default: “Device frame”)
- shot_alt — alt text for the screenshot image (default: “Homepage preview”)
The shortcode renders only the device frame with the scrollable screenshot inside it — no heading, background, or padding around it, so it drops cleanly into any layout.