Adds a smooth parallax scrolling effect to the WordPress Cover block with adjustable speed controls.
- Parallax Background Toggle: Enable parallax scrolling on any Cover block
- Speed Control: Choose from 5 preset speeds or set a custom value (0.1 - 1.0)
- Per-Block Mobile Control: Optionally disable parallax on mobile for individual blocks
- Editor Preview: See the parallax effect in real-time while editing
- Accessibility: Respects
prefers-reduced-motionuser preference - Performance Optimized: Footer-loaded script, GPU-accelerated transforms, viewport culling, passive event listeners
- Mutual Exclusivity: Automatically disables "Fixed background" when parallax is enabled
- WordPress 6.0 or higher
- PHP 7.4 or higher
- Download
cover-parallax-style.zipfrom the latest release - In WordPress, go to Plugins > Add New > Upload Plugin
- Upload the zip file and activate
- Upload the
cover-parallax-stylefolder to/wp-content/plugins/ - Activate the plugin through the 'Plugins' menu in WordPress
- Add or select a Cover block
- In the Settings panel, enable "Parallax background"
- Adjust the speed using the preset slider (1-5) or click the settings icon to enter a custom value
- Lower values (1) create a subtle effect, higher values (5) create more dramatic movement
- Optionally toggle "Disable on mobile" to turn off parallax for that block on smaller screens
The plugin uses JavaScript-based parallax with CSS transforms for smooth, reliable scrolling:
- Background images are sized at 140% height with -20% top offset to allow movement room
requestAnimationFrameensures 60fps smooth animations- The effect is calculated based on viewport position for natural depth perception
- GPU acceleration via
will-change: transformandbackface-visibility: hidden
npm installnpm run buildnpm run startnpm run lint:js
npm run lint:cssContributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Run
npm installandnpm run buildto set up locally - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
See CHANGELOG.md for the full release history.
This plugin is free software released under the terms of the GNU General Public License version 2 or (at your option) any later version. See LICENSE for full license text.
This is the same license used by WordPress itself, ensuring full compatibility with the WordPress ecosystem.