Изображение готовится
Описание
Это простой плагин изображений с параллаксом, использующий скрипт parallax.js от Pixelcog - http://pixelcog.github.io/parallax.js/
Чтобы вставить изображение с эффектом параллакса во всю ширину, просто используйте шорткод [dd-parallax]. Включите текст, который будет накладываться на параллакс между кодом открытия и закрытия [/dd-parallax]. Этот плагин был протестирован с темами WordPress 2014, 2015, 2016 и 2017, а также с несколькими темами, использующими Bootstrap. Я не могу гарантировать, что он будет работать со всеми темами, но попробовать стоит.
Обратите внимание на версию WP 5.0
В настоящее время этот плагин работает, но кнопка TinyMCE работает только с классическим редактором. Виджет Гутенберга находится в разработке.
Например:
[dd-parallax img="imagename.jpg" height="600" Speed="3" z-index="-100" mobile="mobile-image.jpg" offset="true"]
Текст, который будет наложен на окно параллакса
[/дд-параллакс]
Доступные параметры для использования:
- img - используйте для этого имя файла из медиа-библиотеки, а не полный путь. Просто используйте imagename.jpg или image.png. (Вы также можете использовать полный URL-адрес)
- высота - это высота окна параллакса. Единица измерения - пиксели. Просто введите номер
- скорость [необязательно] (по умолчанию = 2) Целое число от 0 до 10. Скорость, с которой действует эффект параллакса. 0 означает, что изображение будет неподвижным, а 10 - изображение будет течь с той же скоростью, что и содержимое страницы.
- z-index [необязательный] (по умолчанию = 0) - значение z-индекса элементов с фиксированным положением. По умолчанию они будут позади всего остального на странице.
- mobile [необязательно] - если вам нужно фиксированное мобильное изображение для мобильного отображения, выберите другое изображение, в противном случае оно выберет полноразмерное изображение из параллакса и сделает его адаптивным.
- offset [default = false] (варианты: "true" или "false") - это переместит содержимое параллакса до самого левого края экрана. Вы можете поместить содержимое в класс "контейнер", если используете начальную загрузку, или просто отцентрировать содержимое для горизонтального центрирования. При тестировании с темой WordPress 2016 оставьте смещение равным False. В Bootstrap Themes я рекомендую использовать параметр "offset=’true’".
- позиция [необязательно] - (по умолчанию "Влево"). Это аналогично свойству CSS background-position-x. Укажите координаты как правые, левые, центральные или пиксельные значения (например, -10px 0px). Изображение параллакса будет расположено как можно ближе к этим значениям, но при этом будет перекрывать целевой элемент.
- text-pos [необязательно] - по умолчанию установлено значение "top" (для обеспечения совместимости с версией 1.6). Доступные варианты: "сверху", "по центру", "снизу".
Страница настроек администратора включает или отключает значок TinyMCE (если вы не хотите, чтобы он был в вашем WP-редакторе)
Демо
Посмотреть демо-версию этого плагина можно здесь.
Чтобы вставить изображение с эффектом параллакса во всю ширину, просто используйте шорткод [dd-parallax]. Включите текст, который будет накладываться на параллакс между кодом открытия и закрытия [/dd-parallax]. Этот плагин был протестирован с темами WordPress 2014, 2015, 2016 и 2017, а также с несколькими темами, использующими Bootstrap. Я не могу гарантировать, что он будет работать со всеми темами, но попробовать стоит.
Обратите внимание на версию WP 5.0
В настоящее время этот плагин работает, но кнопка TinyMCE работает только с классическим редактором. Виджет Гутенберга находится в разработке.
Например:
[dd-parallax img="imagename.jpg" height="600" Speed="3" z-index="-100" mobile="mobile-image.jpg" offset="true"]
Текст, который будет наложен на окно параллакса
[/дд-параллакс]
Доступные параметры для использования:
- img - используйте для этого имя файла из медиа-библиотеки, а не полный путь. Просто используйте imagename.jpg или image.png. (Вы также можете использовать полный URL-адрес)
- высота - это высота окна параллакса. Единица измерения - пиксели. Просто введите номер
- скорость [необязательно] (по умолчанию = 2) Целое число от 0 до 10. Скорость, с которой действует эффект параллакса. 0 означает, что изображение будет неподвижным, а 10 - изображение будет течь с той же скоростью, что и содержимое страницы.
- z-index [необязательный] (по умолчанию = 0) - значение z-индекса элементов с фиксированным положением. По умолчанию они будут позади всего остального на странице.
- mobile [необязательно] - если вам нужно фиксированное мобильное изображение для мобильного отображения, выберите другое изображение, в противном случае оно выберет полноразмерное изображение из параллакса и сделает его адаптивным.
- offset [default = false] (варианты: "true" или "false") - это переместит содержимое параллакса до самого левого края экрана. Вы можете поместить содержимое в класс "контейнер", если используете начальную загрузку, или просто отцентрировать содержимое для горизонтального центрирования. При тестировании с темой WordPress 2016 оставьте смещение равным False. В Bootstrap Themes я рекомендую использовать параметр "offset=’true’".
- позиция [необязательно] - (по умолчанию "Влево"). Это аналогично свойству CSS background-position-x. Укажите координаты как правые, левые, центральные или пиксельные значения (например, -10px 0px). Изображение параллакса будет расположено как можно ближе к этим значениям, но при этом будет перекрывать целевой элемент.
- text-pos [необязательно] - по умолчанию установлено значение "top" (для обеспечения совместимости с версией 1.6). Доступные варианты: "сверху", "по центру", "снизу".
Страница настроек администратора включает или отключает значок TinyMCE (если вы не хотите, чтобы он был в вашем WP-редакторе)
Демо
Посмотреть демо-версию этого плагина можно здесь.
Похожие товары
Смотреть все
Хит продаж
WordPress
Хит продаж
WordPress