前言介紹
- 這款 WordPress 外掛「Parallax Image」是 2017-03-26 上架。
- 目前有 2000 個安裝啟用數。
- 上一次更新是 2024-11-15，距離現在已有 170 天。
- 外掛最低要求 WordPress 4.5 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
- 有 10 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
parallax | Parallax Image | Parallax Window | Full Screen Parallax |
內容簡介
這是一個簡單的視差圖像外掛程式，使用的是 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
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Parallax Image」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 1.6 | 1.7 | 1.8 | 1.9 | 1.0.1 | 1.1.1 | 1.2.1 | 1.4.1 | 1.4.2 | 1.6.1 | 1.7.1 | 1.9.1 | trunk |
延伸相關外掛（你可能也想知道）
Advanced WordPress Backgrounds 》WordPress 捲軸視差、圖片與影片背景外掛程式, ★★★★★, 透過進階版積木模式，可以建立任何形式的背景。我們建立進階版 WordPress 背景外掛程式，以幾個點擊便...。
Aesop Story Engine 》"Aesop Story Engine" 是一套開源工具和元件，能讓開發人員和作者為 WordPress 建立功能豐富、互動性高、長形式故事主題。ASE 最核心的部分是多媒體元件套組...。
Parallax Scroll by adamrob.co.uk 》視差滾動式滾動是在您的頁面/文章中為元素獲得視差滾動式背景圖像的最簡單方法。, 例如包括：, , 創建具有視差滾動式背景的標題文本。, 創建包含任何內容的完...。
TemplatesNext OnePager 》在幾分鐘內創建單頁網站或引導頁面。TemplatesNext WordPress主題中的自定義作品集、推薦、團隊和聯繫我們區塊。它在前端創建易於自定義、編輯的區塊。, Demo...。
Hot Blocks 》Hot Blocks外掛程式由HotThemes提供，是針對區塊編輯器(Gutenberg)的多個區塊集合。此外掛程式在Hot Blocks類別中添加了新的區塊，並將自定義樣式添加至核心L...。
WP Parallax Content Slider 》WP Parallax Content Slider是一個外掛，在WordPress博客或網站上自動添加最新文章的內容滑動專區。, 此外掛是基於 Manoella Ilic 的程式碼撰寫而成，你可以...。
Super Simple jQuery Parallax Background 》超簡單 jQuery 視差背景讓您的主題背景圖片產生視差效果。只需在主題「自訂」選項中設定背景圖像（可選擇將其設置為「固定」位置），然後啟用此外掛。完成！...。
Particle Background 》, , 在背景粒子上添加您的內容，該外掛還支持HTML。, 一款可讓背景粒子系統更加時尚的JavaScript外掛。, 在支持HTML5畫布的任何瀏覽器中均可運行。, 您可以使...。
Parallax Scrolling Enllax.js 》Enllax.js 互動滾動特效外掛程式, 這款外掛程式極為輕量、易用，適用於任何可以滾動的元素上添加互動滾動特效。您可以為背景元素設置互動滾動特效，也可以設...。
Parallax Scroll – Parallax Scrolling Backgrounds & Call to Action WordPress Plugin 》Parallax Scroll 是一款為 WordPress 打造的視差區塊建造器外掛。這是在你的 WordPress 網站上獲取所需訊息、標題和徽標的視差滾動背景圖像的最簡單方式。, P...。
Image Parallax 》上傳您圖像的各層，並製造視差效果！它在智慧型裝置上也運作得非常好！, 第一步是使用您最喜愛的圖片編輯軟體（例如 Photoshop、GIMP...）為您的每一個地面創...。
cbParallax 》適應性全幅背景圖片加上視差效果的外掛。, 功能特色, , 客製化背景圖片, 一張圖片適用於所有頁面或每個文章都有獨立的圖片和效果, 可與文章、頁面、產品等多...。
Parallaxer for Elementor 》總結：Parallaxer for Elementor 將 Rellax.js 的功能帶到您的 Elementor 頁面，讓您只需點擊幾下即可為任何小工具添加流暢的視差滾動效果。, , 問：Parallax...。
Elementor Parallax Effects Addon 》這是一款用於 Elementor 拖曳式網頁建構器的 Parallax 特效外掛程式，可應用於區段背景，讓您能夠建立不同的行為觸發方式、動畫類型和位置的多層 Parallax 特...。
Cinematic 3D Parallax Touch Slider 》Cinematic是一個響應式、支援觸控操作的幻燈片外掛，可透過視差3D效果展示您的內容。, 您可以輕鬆在圖片編輯程式中準備自己圖片的層次，並且本外掛包含Adobe ...。