Ajouter des blocs Parallax à Drupal 8 avec ScrollMagic

Dans ce tutoriel, je vais vous expliquer comment utiliser des types de blocs personnalisés pour créer un effet Parallax dans votre sous-thème Drupal 8.

Pour suivre ces étapes, il serait utile de bien comprendre la thématisation de Drupal 8. Vous pouvez cliquer ici pour suivre notre cours de thème Drupal 8.

Pour pouvoir suivre ce tutoriel, vous devez également installer Bootstrap et créer un sous-thème à partir du dossier CDN. Vous pouvez suivre notre guide ici dans notre article précédent.

Étape 1. Configurer le thème Bootstrap

Les effets de parallaxe sont généralement de pleine largeur, vous devez donc activer l'option Conteneur fluide dans le menu du thème Bootstrap.

• Allez dans "Apparence" et assurez-vous que le thème Bootstrap est défini par défaut.
• Entrez les paramètres du thème Bootstrap et sélectionnez le menu déroulant Conteneur.
• Cochez la case "Récipient de liquide".
• Cliquez sur "Enregistrer la configuration".

Étape 2. Créer des blocs

Vous devez maintenant créer des blocs personnalisés pour l'affichage. En utilisant des blocs personnalisés, vous pouvez thématiser les blocs spécifiquement.

• Accédez à Structure > Disposition des blocs > Types.
• Cliquez sur "Ajouter un type de bloc personnalisé".

• Étiquetez le bloc personnalisé "Parallaxe":

• Allez maintenant dans "Ajouter un bloc personnalisé" et créez deux blocs, un pour chacune des images que vous utilisez. J'ai appelé ces blocs Parallax 1 et Parallax 2.
• Définissez la région sur le contenu et enregistrez les blocs.

Vous devez maintenant utiliser les blocs de base personnalisés pour afficher le contenu entre les images sur la page de mise en page des blocs. Supprimez également tous les blocs que vous avez placés dans les barres latérales, car cela empêchera la largeur d'être de 100 %.

Étape 3. Activer le débogage

• Activez maintenant le débogage si vous ne l'avez pas déjà activé.
• Accédez à sites/default et copiez et renommez default.services.yml en services.yml à la ligne 58, changez debug en true :

• Maintenant, pour pouvoir voir les suggestions de thèmes, ajoutez ce code à votre fichier 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()); } }

• Le nom de la fonction doit correspondre au nom de votre thème. L'ajouter à votre fichier de thème vous permet de thématiser des blocs personnalisés.
• Videz tous les caches et si vous inspectez le site maintenant, vous devriez voir des suggestions de thèmes.
• Dans Google Chrome, faites un clic droit sur la région et sélectionnez Inspecter pour accéder à l'outil d'inspection :

• Ajoutez la suggestion de modèle pour le bloc de parallaxe dans votre dossier de thème de modèles subtheme/templates/block--bundle--parallax.html.twig
• Ajoutez ce code au fichier de modèle :

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

• Ce code stylisera le bloc personnalisé de parallaxe que vous avez créé. Si vous avez besoin de déboguer cela, vous pouvez utiliser kint du module Devel.

Étape 4. Donnez du style aux blocs

Vous devez maintenant ajouter le CSS pour styliser les blocs.

• Ouvrez votre /css/style.css et ajoutez ce code :

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

• Vous devrez mettre à jour .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 pour qu'il corresponde à votre bloc :

Il s'agit de la classe attribuée à votre bloc personnalisé. Si vous avez nommé votre bloc Parallax différemment, vous devrez mettre à jour .parallax--parallax1 et .parallax--parallax2.

Étape #5. Ajouter les images et ScrollMagic

• Accédez à votre thème et créez un dossier appelé /images/. C'est ici que vous enregistrerez les images pour l'effet de parallaxe.
• Ajoutez du Javascript pour faire bouger légèrement les images. Pour cela, vous utiliserez ScrollMagic. Téléchargez et extrayez les fichiers de GitHub :

• Allez maintenant dans votre thème et créez un dossier appelé /js/ et déplacez ces fichiers dans le dossier
  • animation.gsap.min.js
  • ScrollMagic.min.js
  • TweenMax.min.js
• Maintenant, vous devez ajouter notre js personnalisé ajouter parallax.js
• Vous devez maintenant indiquer au thème de charger les bibliothèques js. Pour ce faire, ouvrez 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

• Et enfin, ajoutez ce code à votre fichier 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));

• Assurez-vous que les images que vous utilisez sont suffisamment grandes pour la largeur maximale que vous souhaitez afficher.
• Et maintenant vous devriez avoir un bel effet de défilement que vous avez appliqué uniquement à nos blocs personnalisés :