Parallax Image Plugin

Insert a full width parallax image into your page with this simple shortcode. Parameters allow for setting several key functions like height.

Download from

== Demo ==

See a demo version here

== Description ==

This is a simple parallax image plugin that uses the parallax.js script by pixelcog –

To insert your full width parallax image, simply use the code. This plugin has been tested with WordPress 2014, 2015, 2016, and 2017 themes as well as a few themes that use Bootstrap. I can’t guarantee that it will work with all themes, but it’s worth a shot.

For example:

[dd-parallax img="imagename.jpg" height="600" speed="3" z-index="-100" mobile="mobile-image.jpg"] 

Text to be overlaid on the paralllax window


Available parameters for use:

* img - use the filename from the media library for this, not the full path. Just use imagename.jpg or image.png.
* height - This is the height of the parallax window. The unit is in pixels. Just enter a number
* speed [optional] (default = 2) An integer between 0 and 10. The speed at which the parallax effect runs. 0 means the image will appear fixed in place, and 10 the image will flow at the same speed as the page content.
* z-index [optional] (defulat = 0) - The z-index value of the fixed-position elements. By default these will be behind everything else on the page.
* mobile [optional] – If you want a mobile fixed image for mobile display, choose a different image, otherwise it will select the full sized image from the parallax and make it a responsive image.

== Frequently Asked Questions ==

= I'm not seeing the image on the screen, what did I do wrong? =

For this - there are 2 probable reasons that you're not seeing the parallax.
* First - Check to make sure that your img is only the file name, and not the full path. If you view the media library in "list" mode - there you'll see the filename with the .jpg or .png extension.
* Second - If not the first answer. Check your z-index. Changing the z-index will adjust the layering of your screen with CSS, and may need to be changed depending on how your theme displays the backgrounds and colors. For more about z-index -

= Can I have multiple parallax images on each page. =


= Will this work on mobile devices =

For mobile devices, you can either have a totally separate mobile image by using the ‘mobile’ parameter in the shortcode, or you can just have the main parallax image resize itself and be responsive.

== Installation ==

1. Upload the plugin files to the `/wp-content/plugins/parallax-image` directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the 'Plugins' screen in WordPress.

== Screenshots ==

The Editor View with the shortcode inserted

The parallax image with a full-width template in Bootstrap.

This is the parallax "Window" on a standard page on the 2016 WordPress Theme.


== Changelog ==

= 1.2 =
Added mobile_detect and mobile options to make the image responsive for mobile display and render better on mobile. Added ‘mobile’ parameter to the shortcode as an option.

= 1.0 =
* Initial Release Version

If you like this and find it useful... Buy me a coffee...

2 Responses

  1. hi there. is there an easy way to put the parallax in a header ie: thanks!
    • Howard Ehrenberg
      Hi. The only way to easily accomplish this would be to edit your header template and use something like:   $text = 'This is the text to be on the overlay text or whatever is on the parallax image'; echo do_shortcode('[dd-parallax img="imagename.jpg" height="600" speed="3" z-index="-100" mobile="mobile-image.jpg"]' . $text . '[/dd-parallax]');

Leave a comment