內容簡介
這是一個簡單的視差圖像外掛程式，使用的是 pixelcog 的 parallax.js 腳本 - http://pixelcog.github.io/parallax.js/
要插入全寬視差圖像，只需使用 [dd-parallax] 縮短碼。在開啟和結束的 [/dd-parallax] 代碼之間包含需要疊加在視差圖像上的文字。這個外掛程式已經測試了 WordPress 2014、2015、2016 和 2017 主題，還有一些使用 Bootstrap 的主題。我不能保證它能與所有主題兼容，但試試看也是值得的。
** WP 5.0 請注意 **
目前這個外掛程式能運作，但 TinyMCE 按鈕僅適用於傳統編輯器。Gutenberg 小工具也在開發中。
例如：
[dd-parallax img="imagename.jpg" height="600" speed="3" z-index="-100" mobile="mobile-image.jpg" offset="true"]
需要疊加在視差視窗上面的內容
[/dd-parallax]
可用的參數如下：
img - 使用媒體庫中的檔案名稱，而不是完整的路徑。只需使用 imagename.jpg 或 image.png。 (你也可以使用完整的 URL)
height - 這是視差窗口的高度，單位為像素。只需輸入一個數字
speed [可選] （預設值為2）介於0和10之間的整數。視差效果運行的速度。0 表示圖像將固定在原地，而 10 表示圖像的速度與頁面內容相同。
z-index [可選] （預設值為0） - 固定位置元素的 z-index 值。這些預設將位於頁面上的所有其他內容的後面。
mobile [可選] - 如果您想要用於移動顯示的固定圖像，請選擇不同的圖像，否則它將選擇由視差生成的全尺寸圖像並使其成為響應式圖像。
offset [默認為 false] (選項：「true」或「false」) - 這將使視差內容完全拉到屏幕左側。 如果您正在使用 Bootstrap，您可以將內容放到「container」類中以進行水平居中，或將內容置中。在測試 WordPress 2016 主題時，請保留 offset 為 False。對於 Bootstrap 主題，我建議使用「offset=’true'” 參數。
position [可選] - (預設為「左」) 這相當於 background-position-x 樣式屬性。將座標指定為 right、left、center 或像素值(e.g. -10px 0px)。視差圖像將靠近這些值的位置，但仍覆蓋目標元素。
text-pos [可選] - 默認為「top」（為了保持與版本1.6的兼容性）。可選項目為「top」、「center」、「bottom」。
管理設置頁面啟用或禁用 TinyMCE 圖示（如果您不想要它出現在 WP 編輯器中）
演示
在此查看這個外掛程式的演示 這裡
外掛標籤
開發者團隊
原文外掛簡介
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:
[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]
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. (You can also use a fully qualified URL)
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] (default = 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.
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.
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.
text-pos [optional] – Default is ‘top’ (to maintain compatibility with ver 1.6). Available options are “top”, “center”, “bottom”.
Admin-Settings page enables or disables the TinyMCE icon (if you don’t want it in your WP-Editor)
Demo
View a demo of this plugin here