使用 ScrollMagic 将视差块添加到 Drupal 8

已发表: 2022-02-16
将视差样式块添加到您的 Drupal 8 主题

在本教程中，我将解释如何使用自定义块类型在 Drupal 8 子主题中创建视差效果。

遵循这些步骤，有助于很好地理解 Drupal 8 主题。 您可以单击此处参加我们的 Drupal 8 主题课程。

为了能够学习本教程，您还需要安装 Bootstrap 并从 CDN 文件夹创建一个子主题。 您可以在我们之前的帖子中按照我们的指南进行操作。

步骤1。 配置 Bootstrap 主题

视差效果通常是全宽的，因此您需要从 Bootstrap 主题菜单中打开流体容器选项。

  • 转到“外观”并确保将 Bootstrap 主题设置为默认值。
  • 输入 Bootstrap 主题设置并选择 Container 下拉菜单。
  • 选中“流体容器”复选框。
  • 单击“保存配置”。

01

第2步。 创建块

现在您需要为显示制作一些自定义块。 通过使用自定义块，您可以专门为这些块设置主题。

  • 转到结构 > 块布局 > 类型。
  • 单击“添加自定义块类型”。

02

  • 标记自定义块“视差”：

03

  • 现在转到“添加自定义块”并创建两个块，一个用于您正在使用的每个图像。 我将这些块称为 Parallax 1 和 Parallax 2。
  • 将区域设置为内容并保存块。

04

现在您需要使用自定义基本块在块布局页面上的图像之间显示内容。 此外，删除您放置在侧边栏中的所有块，因为这将阻止宽度为 100%。

05

步骤#3。 启用调试

  • 如果您还没有启用调试，现在打开调试。
  • 转到 sites/default 并在第 58 行将default.services.yml复制并重命名为services.yml ，将 debug 更改为 true：

000

  • 现在，为了能够看到主题建议，将此代码添加到您的 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 中，右键单击该区域并选择 Inspect 以访问检查器工具：

06

  • 在模板主题文件夹 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>
  • 此代码将为您创建的视差自定义块设置样式。 如果需要调试，可以使用 Devel 模块中的 kint。

步骤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 以匹配您的块：

007

这是分配给您的自定义块的类。 如果您以不同的方式命名 Parallax 块，则必须更新 .parallax--parallax1 和 .parallax--parallax2。

步骤#5。 添加图像和 ScrollMagic

  • 转到您的主题并创建一个名为 /images/ 的文件夹。 您将在此处保存图像以获得视差效果。
  • 添加一些 Javascript 以使图像稍微移动。 为此，您将使用 ScrollMagic。 从 GitHub 下载并提取文件：

008

  • 现在转到您的主题并创建一个名为 /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));
  • 确保您使用的图像对于您要显示的最大宽度足够大。
  • 现在你应该有一个很好的滚动效果，你只应用于我们的自定义块：

使用 ScrollMagic 将视差块添加到 Drupal 8