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