Pirajki iPad Scroll Mockup

Description

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:

[pirajki_ipad_scroll frame="https://example.com/ipad-frame.png" screenshot="https://example.com/homepage-shot.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.