Fügen Sie mit ScrollMagic Parallax-Blöcke zu Drupal 8 hinzu

In diesem Tutorial werde ich erklären, wie Sie benutzerdefinierte Blocktypen verwenden, um einen Parallax-Effekt in Ihrem Drupal 8-Subtheme zu erstellen.

Um diesen Schritten zu folgen, wäre es hilfreich, ein gutes Verständnis der Drupal 8-Themen zu haben. Sie können hier klicken, um an unserem Drupal 8-Theming-Kurs teilzunehmen.

Um diesem Tutorial folgen zu können, müssen Sie außerdem Bootstrap installieren und ein Subtheme aus dem CDN-Ordner erstellen. Sie können unserem Leitfaden hier in unserem früheren Beitrag folgen.

Schritt 1. Konfigurieren Sie das Bootstrap-Design

Parallax-Effekte sind normalerweise in voller Breite, daher müssen Sie die Fluid-Container-Option im Bootstrap-Themenmenü aktivieren.

• Gehen Sie zu „Darstellung“ und vergewissern Sie sich, dass das Bootstrap-Design als Standard festgelegt ist.
• Geben Sie die Bootstrap-Designeinstellungen ein und wählen Sie das Container-Dropdown-Menü aus.
• Aktivieren Sie das Kontrollkästchen "Flüssigkeitsbehälter".
• Klicken Sie auf „Konfiguration speichern“.

Schritt 2. Blöcke erstellen

Jetzt müssen Sie einige benutzerdefinierte Blöcke für die Anzeige erstellen. Durch die Verwendung von benutzerdefinierten Blöcken können Sie die Blöcke speziell thematisieren.

• Gehen Sie zu Struktur > Blocklayout > Typen.
• Klicken Sie auf „Benutzerdefinierten Blocktyp hinzufügen“.

• Beschriften Sie den benutzerdefinierten Block mit "Parallax":

• Gehen Sie nun zu „Benutzerdefinierten Block hinzufügen“ und erstellen Sie zwei Blöcke, einen für jedes der Bilder, die Sie verwenden. Ich habe diese Blöcke Parallax 1 und Parallax 2 genannt.
• Stellen Sie die Region auf Inhalt und speichern Sie die Blöcke.

Jetzt müssen Sie die benutzerdefinierten Basisblöcke verwenden, um Inhalte zwischen den Bildern auf der Blocklayoutseite anzuzeigen. Entfernen Sie auch alle Blöcke, die Sie in den Seitenleisten platziert haben, da dies verhindert, dass die Breite 100 % beträgt.

Schritt 3. Debuggen aktivieren

• Aktivieren Sie jetzt das Debugging, falls Sie es noch nicht aktiviert haben.
• Gehen Sie zu sites/default und kopieren und benennen Sie default.services.yml in services.yml um. Zeile 58 ändern Sie debug auf true:

• Um nun die Themenvorschläge sehen zu können, fügen Sie diesen Code zu Ihrer subtheme.theme-Datei hinzu:

 /** * 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()); } }

• Der Funktionsname muss mit Ihrem Designnamen übereinstimmen. Wenn Sie dies zu Ihrer Designdatei hinzufügen, können Sie benutzerdefinierte Blöcke designen.
• Leeren Sie alle Caches und wenn Sie die Site jetzt überprüfen, sollten Sie Themenvorschläge sehen.
• Klicken Sie in Google Chrome mit der rechten Maustaste auf die Region und wählen Sie Inspect aus, um auf das Inspector-Tool zuzugreifen:

• Fügen Sie den Vorlagenvorschlag für den Parallax-Block in Ihrem Vorlagen-Designordner subtheme/templates/block--bundle--parallax.html.twig hinzu
• Fügen Sie diesen Code zur Vorlagendatei hinzu:

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

• Dieser Code gestaltet den von Ihnen erstellten benutzerdefinierten Parallaxenblock. Wenn Sie dies debuggen müssen, können Sie kint aus dem Devel-Modul verwenden.

Schritt 4. Stylen Sie die Blöcke

Jetzt müssen Sie das CSS hinzufügen, um die Blöcke zu gestalten.

• Öffnen Sie Ihre /css/style.css und fügen Sie diesen Code hinzu:

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

• Sie müssen .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 aktualisieren, damit es Ihrem Block entspricht:

Dies ist die Klasse, die Ihrem benutzerdefinierten Block zugewiesen ist. Wenn Sie Ihren Parallax-Block anders benannt haben, müssen Sie .parallax--parallax1 und .parallax--parallax2 aktualisieren.

Schritt #5. Fügen Sie die Bilder und ScrollMagic hinzu

• Gehen Sie zu Ihrem Thema und erstellen Sie einen Ordner namens /images/. Hier speichern Sie die Bilder für den Parallax-Effekt.
• Fügen Sie etwas Javascript hinzu, damit sich die Bilder leicht bewegen. Dazu verwenden Sie ScrollMagic. Laden Sie die Dateien von GitHub herunter und extrahieren Sie sie:

• Gehen Sie nun zu Ihrem Thema und erstellen Sie einen Ordner namens /js/ und verschieben Sie diese Dateien in den Ordner
  • animation.gsap.min.js
  • ScrollMagic.min.js
  • TweenMax.min.js
• Jetzt müssen Sie unser benutzerdefiniertes js add parallax.js hinzufügen
• Nun müssen Sie dem Theme mitteilen, dass es die js-Bibliotheken laden soll. Öffnen Sie dazu 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

• Fügen Sie schließlich diesen Code zu Ihrer parallax.js-Datei hinzu:

 (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));

• Stellen Sie sicher, dass die verwendeten Bilder groß genug für die maximale Breite sind, die Sie anzeigen möchten.
• Und jetzt sollten Sie einen schönen Scroll-Effekt haben, den Sie nur auf unsere benutzerdefinierten Blöcke angewendet haben: