smartparallax

SmartParallax adds smooth, GPU-accelerated parallax motion to WordPress blocks and sections. 
All effects are powered by CSS transforms combined with a lightweight JavaScript engine to ensure fluid performance on modern devices.
The plugin integrates seamlessly into any theme or page builder.
<h4>Highlights</h4>
<ul>
<li>Smooth parallax motion based on scroll position</li>
<li>Background parallax via <code>.parallax-image</code></li>
<li>Container parallax via <code>.parallax-container</code></li>
<li>Horizontal motion using <code>.parallax-x</code></li>
<li>Speed modifiers (<code>parallax-3</code>, <code>parallax--05</code>, etc.)</li>
<li>Optional stop-sensitive behavior using <code>-s</code> modifiers</li>
<li>Automatic background-layer injection</li>
<li>GPU-accelerated transforms</li>
<li>Works with Gutenberg, Elementor, Bricks und mehr</li>
</ul>
Full documentation, examples and demo pages available at: 
https://smartparallax.com/
<h3>Available Classes</h3>
 Class 
 Description
 <code>.parallax-image</code> 
 Creates a moving background layer
 <code>.parallax-container</code> 
 Moves an entire block or section
 <code>.parallax-x</code> 
 Switches movement from vertical to horizontal
 <code>.parallax-(--)</code> 
 Adjusts speed (e.g. <code>.parallax-05</code> or <code>.parallax--03</code>)
 <code>.parallax-[…]-s</code> 
 Stop-Sensitive Motion: stops when element leaves viewport center
<h3>License</h3>
SmartParallax is open-source software licensed under the <a href="https://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">GPLv2 or later</a>.

Smart Parallax

Lightweight GPU-optimized parallax animation system for WordPress blocks and containers.

thehowarde

This is a simple parallax image plugin that uses the parallax.js script by pixelcog – http://pixelcog.github.io/parallax.js/
To insert your full width parallax image, simply use the [dd-parallax] shortcode. Include text to be overlaid on the parallax between the open and close [/dd-parallax] 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.
** Please note for WP 5.0 ** 
Currently this plugin works, but the TinyMCE button only works with the classic editor. A Gutenberg widget is in the works.
For example:
<pre><code>[dd-parallax img="imagename.jpg" height="600" speed="3" z-index="-100" mobile="mobile-image.jpg" offset="true"] 

Text to be overlaid on the paralllax window

[/dd-parallax]
</code></pre>
Available parameters for use:
<ul>
<li>img – use the filename from the media library for this, not the full path. Just use imagename.jpg or image.png. (You can also use a fully qualified URL)</li>
<li>height – This is the height of the parallax window. The unit is in pixels. Just enter a number</li>
<li>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.</li>
<li>z-index [optional] (default = 0) – The z-index value of the fixed-position elements. By default these will be behind everything else on the page.</li>
<li>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.</li>
<li>offset [default = false] (options: “true” or “false”) – This will pull the parallax content all the way to the left of your screen. You can put the contents into a “container” class if you’re using bootstrap or just center the contents for horizontal centering. On testing with the WordPress 2016 Theme, keep offset at False. With Bootstrap Themes, I recommend using the “offset=’true'” parameter.</li>
<li>position [optional] – (defaults to ‘Left’) This is analogous to the background-position-x css property. Specify coordinates as right, left, center, or pixel values (e.g. -10px 0px). The parallax image will be positioned as close to these values as possible while still covering the target element.</li>
<li>text-pos [optional] – Default is ‘top’ (to maintain compatibility with ver 1.6). Available options are “top”, “center”, “bottom”.</li>
</ul>
Admin-Settings page enables or disables the TinyMCE icon (if you don’t want it in your WP-Editor)
<h3>Demo</h3>
View a demo of this plugin <a href="https://www.duckdiverllc.com/parallax-image-plugin-demo/" rel="nofollow ugc">here</a>

Parallax Image

Great and easy to use

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

Smart Parallax vs Parallax Image