Добавление блоков параллакса в Drupal 8 с помощью ScrollMagic

В этом уроке я объясню, как использовать пользовательские типы блоков для создания эффекта параллакса в вашей подтеме Drupal 8.

Чтобы следовать этим шагам, было бы полезно иметь хорошее представление о темах Drupal 8. Вы можете щелкнуть здесь, чтобы принять участие в нашем мастер-классе по темам Drupal 8.

Чтобы следовать этому руководству, вам также необходимо установить Bootstrap и создать подтему из папки CDN. Вы можете следовать нашему руководству здесь в нашем предыдущем посте.

Шаг 1. Настройте тему Bootstrap

Эффекты параллакса обычно имеют полную ширину, поэтому вам нужно включить опцию контейнера Fluid в меню темы Bootstrap.

• Перейдите в «Внешний вид» и убедитесь, что тема Bootstrap установлена ​​по умолчанию.
• Войдите в настройки темы Bootstrap и выберите раскрывающийся список «Контейнер».
• Установите флажок «Контейнер для жидкости».
• Нажмите «Сохранить конфигурацию».

Шаг 2. Создать блоки

Теперь вам нужно сделать несколько пользовательских блоков для дисплея. Используя настраиваемые блоки, вы можете создавать отдельные темы для блоков.

• Перейдите в раздел «Структура» > «Компоновка блока» > «Типы».
• Нажмите «Добавить пользовательский тип блока».

• Назовите пользовательский блок «Параллакс»:

• Теперь перейдите к «Добавить пользовательский блок» и создайте два блока, по одному для каждого изображения, которое вы используете. Я назвал эти блоки Parallax 1 и Parallax 2.
• Установите регион на контент и сохраните блоки.

Теперь вам нужно использовать пользовательские базовые блоки для отображения содержимого между изображениями на странице макета блока. Кроме того, удалите все блоки, которые вы разместили на боковых панелях, так как это предотвратит 100% ширину.

Шаг 3. Включить отладку

• Теперь включите отладку, если она еще не включена.
• Перейдите на сайты/по умолчанию, скопируйте и переименуйте default.services.yml в services.yml в строке 58, измените отладку на true:

• Теперь, чтобы увидеть предложенные темы, добавьте этот код в файл subtheme.theme:

 /** * Implements hook_theme_suggestions_HOOK_alter() for form templates. * @param array $suggestions * I found this code on drupal.org https://www.drupal.org/node/2724333 * @param array $variables */ function subtheme_theme_suggestions_block_alter(array &$suggestions, array $variables) { // Block suggestions for custom block bundles. if (isset($variables['elements']['content']['#block_content'])) { array_splice($suggestions, 1, 0, 'block__bundle__' . $variables['elements']['content']['#block_content']->bundle()); } }

 /** * Implements hook_theme_suggestions_HOOK_alter() for form templates. * @param array $suggestions * I found this code on drupal.org https://www.drupal.org/node/2724333 * @param array $variables */ function subtheme_theme_suggestions_block_alter(array &$suggestions, array $variables) { // Block suggestions for custom block bundles. if (isset($variables['elements']['content']['#block_content'])) { array_splice($suggestions, 1, 0, 'block__bundle__' . $variables['elements']['content']['#block_content']->bundle()); } }

• Имя функции должно совпадать с названием вашей темы. Добавление этого в ваш файл темы позволяет вам создавать пользовательские блоки.
• Очистите все кеши, и если вы проверите сайт сейчас, вы должны увидеть предложения тем.
• В Google Chrome щелкните правой кнопкой мыши регион и выберите «Проверить», чтобы получить доступ к инструменту инспектора:

• Добавьте предложение шаблона для блока параллакса в папку темы шаблонов subtheme/templates/block--bundle--parallax.html.twig.
• Добавьте этот код в файл шаблона:

 <div class="parallax parallax--{{ elements['#id'] }}"> <div class="parallax__bg"></div> <div class="parallax__content"> <h2{{ title_attributes }}>{{ label }}</h2> {{ content['body']['0']['#text'] | raw}} </div> </div>

 <div class="parallax parallax--{{ elements['#id'] }}"> <div class="parallax__bg"></div> <div class="parallax__content"> <h2{{ title_attributes }}>{{ label }}</h2> {{ content['body']['0']['#text'] | raw}} </div> </div>

• Этот код будет стилизовать созданный вами пользовательский блок параллакса. Если вам нужно отладить это, вы можете использовать kint из модуля Devel.

Шаг №4. Стиль блоков

Теперь вам нужно добавить CSS для стилизации блоков.

• Откройте ваш /css/style.css и добавьте этот код:

 .main-container, .page-header { padding: 0px; } .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 { text-align: center; padding: 10em; font-size: 20px; background-color: #204d74; color: #fff; } .parallax { text-align: center; position: relative; overflow: hidden; height: 500px; } .parallax__bg { position: absolute; width: 100%; height: 140%; } .parallax--parallax1 .parallax__bg { background: url('../images/yourimage'); } .parallax--parallax2 .parallax__bg { background: url('../images/yourimage'); } .parallax__content { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #fff; h2 { margin: 0px; font-size: 30px; } p { font-size: 20px; } }

 .main-container, .page-header { padding: 0px; } .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 { text-align: center; padding: 10em; font-size: 20px; background-color: #204d74; color: #fff; } .parallax { text-align: center; position: relative; overflow: hidden; height: 500px; } .parallax__bg { position: absolute; width: 100%; height: 140%; } .parallax--parallax1 .parallax__bg { background: url('../images/yourimage'); } .parallax--parallax2 .parallax__bg { background: url('../images/yourimage'); } .parallax__content { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #fff; h2 { margin: 0px; font-size: 30px; } p { font-size: 20px; } }

• Вам нужно будет обновить .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6, чтобы он соответствовал вашему блоку:

Это класс, назначенный вашему пользовательскому блоку. Если вы назвали свой блок Parallax по-другому, вам придется обновить .parallax--parallax1 и .parallax--parallax2.

Шаг № 5. Добавьте изображения и ScrollMagic

• Перейдите к своей теме и создайте папку с именем /images/. Здесь вы будете сохранять изображения для эффекта параллакса.
• Добавьте немного Javascript, чтобы изображения немного двигались. Для этого вы будете использовать ScrollMagic. Загрузите и распакуйте файлы с GitHub:

• Теперь перейдите в свою тему и создайте папку с именем /js/ и переместите эти файлы в папку
  • анимация.gsap.min.js
  • ScrollMagic.min.js
  • TweenMax.min.js
• Теперь вам нужно добавить наш собственный js add parallax.js
• Теперь вам нужно указать теме загрузить библиотеки js. Для этого откройте subtheme/subtheme.libraries.yml:

 global-styling: css: theme: css/style.css: {} js: js/ScrollMagic.min.js: {} js/animation.gsap.min.js: {} js/TweenMax.min.js: {} js/parallax.js: {} dependencies: - core/drupal - core/jquery

 global-styling: css: theme: css/style.css: {} js: js/ScrollMagic.min.js: {} js/animation.gsap.min.js: {} js/TweenMax.min.js: {} js/parallax.js: {} dependencies: - core/drupal - core/jquery

• И, наконец, добавьте этот код в ваш файл parallax.js:

 (function ($) { 'use strict'; Drupal.behaviors.myBehavior = { attach: function (context, settings) { var controller = new ScrollMagic.Controller(); var blocks = [".parallax--parallax1", ".parallax--parallax2"]; blocks.forEach(function (block, index) { var $bg = $(block).find('.parallax__bg'); var $content = $(block).find('.parallax__content'); var tl = new TimelineMax(); tl .from($bg, 2, {y: '-40%', ease: Power0.easeNone}, 0) .from($content, 1, {autoAlpha: 0, ease: Power0.easeNone}, 0.4) ; var scene = new ScrollMagic.Scene({ triggerElement: block, triggerHook: 1, duration: "100%" }) .setTween(tl) .addTo(controller); }); } } }(jQuery));

 (function ($) { 'use strict'; Drupal.behaviors.myBehavior = { attach: function (context, settings) { var controller = new ScrollMagic.Controller(); var blocks = [".parallax--parallax1", ".parallax--parallax2"]; blocks.forEach(function (block, index) { var $bg = $(block).find('.parallax__bg'); var $content = $(block).find('.parallax__content'); var tl = new TimelineMax(); tl .from($bg, 2, {y: '-40%', ease: Power0.easeNone}, 0) .from($content, 1, {autoAlpha: 0, ease: Power0.easeNone}, 0.4) ; var scene = new ScrollMagic.Scene({ triggerElement: block, triggerHook: 1, duration: "100%" }) .setTween(tl) .addTo(controller); }); } } }(jQuery));

• Убедитесь, что изображения, которые вы используете, достаточно велики для максимальной ширины, которую вы хотите отобразить.
• И теперь у вас должен получиться хороший эффект прокрутки, который вы применили только к нашим пользовательским блокам: