Adicionar blocos de paralaxe ao Drupal 8 com ScrollMagic

Neste tutorial, explicarei como usar tipos de blocos personalizados para criar um efeito Parallax em seu subtema Drupal 8.

Para acompanhar essas etapas, seria útil ter uma boa compreensão do tema Drupal 8. Você pode clicar aqui para fazer nossa aula de tema Drupal 8.

Para poder seguir este tutorial, você também precisa instalar o Bootstrap e criar um subtema a partir da pasta CDN. Você pode seguir nosso guia aqui em nosso post anterior.

Passo 1. Configurar o tema do Bootstrap

Os efeitos de paralaxe geralmente são de largura total, então você precisa ativar a opção de contêiner Fluid no menu do tema Bootstrap.

• Vá para "Aparência" e verifique se o tema Bootstrap está definido como padrão.
• Insira as configurações do tema Bootstrap e selecione o menu suspenso Container.
• Marque a caixa "Recipiente de fluido".
• Clique em "Salvar configuração".

Passo 2. Criar blocos

Agora você precisa fazer alguns blocos personalizados para a exibição. Ao usar blocos personalizados, você pode tematizar os blocos especificamente.

• Vá para Estrutura > Layout de bloco > Tipos.
• Clique em "Adicionar tipo de bloco personalizado".

• Rotule o bloco personalizado "Parallax":

• Agora vá em "Adicionar bloco personalizado" e crie dois blocos, um para cada uma das imagens que você está usando. Chamei esses blocos de Parallax 1 e Parallax 2.
• Defina a região para conteúdo e salve os blocos.

Agora você precisa usar os blocos básicos personalizados para exibir o conteúdo entre as imagens na página de layout do bloco. Além disso, remova todos os blocos que você colocou nas barras laterais, pois isso impedirá que a largura seja 100%.

Etapa 3. Ativar depuração

• Agora ative a depuração se você ainda não a tiver ativado.
• Vá para sites/default e copie e renomeie default.services.yml para services.yml na linha 58 altere debug para true:

• Agora, para poder ver as sugestões de temas, adicione este código ao seu arquivo 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()); } }

• O nome da função precisa corresponder ao nome do seu tema. Adicioná-lo ao seu arquivo de tema permite que você crie um tema para blocos personalizados.
• Limpe todos os caches e, se você inspecionar o site agora, verá sugestões de temas.
• No Google Chrome, clique com o botão direito do mouse na região e selecione Inspecionar para acessar a ferramenta inspetor:

• Adicione a sugestão de modelo para bloco de paralaxe em sua pasta de tema de modelos subtheme/templates/block--bundle--parallax.html.twig
• Adicione este código ao arquivo de modelo:

 <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 estilizará o bloco personalizado de paralaxe que você criou. Se você precisar depurar isso, você pode usar o kint do módulo Devel.

Passo 4. Estilize os blocos

Agora você precisa adicionar o CSS para estilizar os blocos.

• Abra seu /css/style.css e adicione 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; } }

• Você precisará atualizar .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 para corresponder ao seu bloco:

Esta é a classe atribuída ao seu bloco personalizado. Se você nomeou seu bloco Parallax de forma diferente, você terá que atualizar .parallax--parallax1 e .parallax--parallax2.

Passo #5. Adicione as imagens e ScrollMagic

• Vá para o seu tema e crie uma pasta chamada /images/. É aqui que você salvará as imagens para o efeito de paralaxe.
• Adicione um pouco de Javascript para fazer as imagens se moverem um pouco. Para isso, você usará o ScrollMagic. Baixe e extraia os arquivos do GitHub:

• Agora vá para o seu tema e crie uma pasta chamada /js/ e mova esses arquivos para a pasta
  • animação.gsap.min.js
  • ScrollMagic.min.js
  • TweenMax.min.js
• Agora você precisa adicionar nosso js personalizado add parallax.js
• Agora você precisa dizer ao tema para carregar as bibliotecas js. Para fazer isso, 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

• E, finalmente, adicione este código ao seu arquivo 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));

• Verifique se as imagens que você está usando são grandes o suficiente para a largura máxima que deseja exibir.
• E agora você deve ter um bom efeito de rolagem que aplicou apenas aos nossos blocos personalizados: