Agregue bloques Parallax a Drupal 8 con ScrollMagic

En este tutorial, explicaré cómo usar tipos de bloques personalizados para crear un efecto Parallax en su subtema de Drupal 8.

Para seguir estos pasos, sería útil tener una buena comprensión de la tematización de Drupal 8. Puede hacer clic aquí para tomar nuestra clase de tematización de Drupal 8.

Para poder seguir este tutorial, también debe instalar Bootstrap y crear un subtema desde la carpeta CDN. Puede seguir nuestra guía aquí en nuestra publicación anterior.

Paso 1. Configurar el tema de Bootstrap

Los efectos de paralaje suelen ser de ancho completo, por lo que debe activar la opción Contenedor fluido en el menú del tema Bootstrap.

• Vaya a "Apariencia" y asegúrese de que el tema Bootstrap esté configurado como predeterminado.
• Ingrese la configuración del tema Bootstrap y seleccione el menú desplegable Contenedor.
• Marque la casilla de "Contenedor de líquido".
• Haga clic en "Guardar configuración".

Paso 2. Crear bloques

Ahora necesita hacer algunos bloques personalizados para la pantalla. Al usar bloques personalizados, puede crear un tema específico para los bloques.

• Vaya a Estructura > Diseño de bloques > Tipos.
• Haga clic en "Agregar tipo de bloque personalizado".

• Etiquete el bloque personalizado como "Parallax":

• Ahora ve a "Agregar bloque personalizado" y crea dos bloques, uno para cada una de las imágenes que estás usando. Llamé a estos bloques Parallax 1 y Parallax 2.
• Establezca la región en contenido y guarde los bloques.

Ahora necesita usar los bloques básicos personalizados para mostrar contenido entre las imágenes en la página de diseño de bloques. Además, elimine los bloques que haya colocado en las barras laterales, ya que esto evitará que el ancho sea del 100%.

Paso 3. Habilitar depuración

• Ahora active la depuración si aún no la tiene habilitada.
• Vaya a sitios/predeterminado y copie y cambie el nombre de default.services.yml a services.yml en la línea 58, cambie la depuración a verdadero:

• Ahora, para poder ver las sugerencias de temas, agrega este código a tu archivo 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()); } }

• El nombre de la función debe coincidir con el nombre de su tema. Agregar esto a su archivo de tema le permite crear temas de bloques personalizados.
• Vacíe todos los cachés y, si inspecciona el sitio ahora, debería ver sugerencias de temas.
• En Google Chrome, haga clic derecho en la región y seleccione Inspeccionar para acceder a la herramienta de inspección:

• Agregue la sugerencia de plantilla para el bloque de paralaje en su carpeta de temas de plantillas subtheme/templates/block--bundle--parallax.html.twig
• Agregue este código al archivo de plantilla:

 <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>

• Este código le dará estilo al bloque personalizado de paralaje que creó. Si necesita depurar esto, puede usar kint del módulo Devel.

Etapa 4. Dale estilo a los bloques

Ahora necesita agregar el CSS para diseñar los bloques.

• Abra su /css/style.css y agregue este código:

 .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; } }

• Deberá actualizar .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 para que coincida con su bloque:

Esta es la clase asignada a su bloque personalizado. Si nombró su bloque Parallax de manera diferente, tendrá que actualizar .parallax--parallax1 y .parallax--parallax2.

Paso #5. Agregue las imágenes y ScrollMagic

• Ve a tu tema y crea una carpeta llamada /images/. Aquí es donde guardará las imágenes para el efecto de paralaje.
• Agregue algo de Javascript para que las imágenes se muevan ligeramente. Para ello, utilizará ScrollMagic. Descarga y extrae los archivos de GitHub:

• Ahora ve a tu tema y crea una carpeta llamada /js/ y mueve estos archivos a la carpeta
  • animación.gsap.min.js
  • ScrollMagic.min.js
  • TweenMax.min.js
• Ahora necesita agregar nuestro js personalizado agregar parallax.js
• Ahora necesita decirle al tema que cargue las bibliotecas js. Para hacerlo, abra 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

• Y finalmente, agregue este código a su archivo 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));

• Asegúrese de que las imágenes que está utilizando sean lo suficientemente grandes para el ancho máximo que desea mostrar.
• Y ahora debería tener un bonito efecto de desplazamiento que ha aplicado solo a nuestros bloques personalizados: