Aggiungi blocchi di parallasse a Drupal 8 con ScrollMagic

In questo tutorial, spiegherò come utilizzare i tipi di blocco personalizzati per creare un effetto Parallasse nel tuo sottotema Drupal 8.

Seguire questi passaggi, aiuterebbe avere una buona comprensione dei temi di Drupal 8. Puoi fare clic qui per seguire la nostra lezione a tema Drupal 8.

Per poter seguire questo tutorial, devi anche installare Bootstrap e creare un sottotema dalla cartella CDN. Puoi seguire la nostra guida qui nel nostro post precedente.

Passo 1. Configura il tema Bootstrap

Gli effetti di parallasse sono generalmente a larghezza intera, quindi è necessario attivare l'opzione Contenitore fluido dal menu del tema Bootstrap.

• Vai su "Aspetto" e assicurati che il tema Bootstrap sia impostato come predefinito.
• Accedi alle impostazioni del tema Bootstrap e seleziona il menu a discesa Contenitore.
• Seleziona la casella "Contenitore del fluido".
• Fare clic su "Salva configurazione".

Passo 2. Crea blocchi

Ora devi creare dei blocchi personalizzati per il display. Usando i blocchi personalizzati puoi tematizzare i blocchi in modo specifico.

• Vai a Struttura > Layout blocco > Tipi.
• Fai clic su "Aggiungi tipo di blocco personalizzato".

• Etichetta il blocco personalizzato "Parallasse":

• Ora vai su "Aggiungi blocco personalizzato" e crea due blocchi, uno per ciascuna delle immagini che stai utilizzando. Ho chiamato questi blocchi Parallax 1 e Parallax 2.
• Imposta la regione su contenuto e salva i blocchi.

Ora è necessario utilizzare i blocchi di base personalizzati per visualizzare il contenuto tra le immagini nella pagina di layout del blocco. Inoltre, rimuovi tutti i blocchi che hai posizionato nelle barre laterali in quanto ciò impedirà che la larghezza sia del 100%.

Passaggio 3. Abilita il debug

• Ora attiva il debug se non lo hai già abilitato.
• Vai a sites/default e copia e rinomina default.services.yml in services.yml alla riga 58 cambia debug in true:

• Ora, per poter vedere i suggerimenti sui temi, aggiungi questo codice al tuo file 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()); } }

• Il nome della funzione deve corrispondere al nome del tuo tema. L'aggiunta di questo al file del tema ti consente di creare blocchi personalizzati.
• Svuota tutte le cache e se ispezioni il sito ora dovresti vedere i suggerimenti sui temi.
• In Google Chrome, fai clic con il pulsante destro del mouse sulla regione e seleziona Ispeziona per accedere allo strumento di ispezione:

• Aggiungi il suggerimento del modello per il blocco di parallasse nella cartella del tema dei modelli subtheme/templates/block--bundle--parallax.html.twig
• Aggiungi questo codice al file modello:

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

• Questo codice modellerà il blocco personalizzato di parallasse che hai creato. Se hai bisogno di eseguire il debug di questo, puoi usare kint dal modulo Devel.

Passaggio 4. Modella i blocchi

Ora devi aggiungere il CSS per definire lo stile dei blocchi.

• Apri il tuo /css/style.css e aggiungi questo codice:

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

• Dovrai aggiornare .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 in modo che corrisponda al tuo blocco:

Questa è la classe assegnata al tuo blocco personalizzato. Se hai chiamato il tuo blocco Parallax in modo diverso, dovrai aggiornare .parallax--parallax1 e .parallax--parallax2.

Passaggio #5. Aggiungi le immagini e ScrollMagic

• Vai al tuo tema e crea una cartella chiamata /images/. Qui è dove salverai le immagini per l'effetto di parallasse.
• Aggiungi del Javascript per far muovere leggermente le immagini. Per questo, utilizzerai ScrollMagic. Scarica ed estrai i file da GitHub:

• Ora vai al tuo tema e crea una cartella chiamata /js/ e sposta questi file nella cartella
  • animazione.gsap.min.js
  • ScrollMagic.min.js
  • TweenMax.min.js
• Ora devi aggiungere il nostro js personalizzato add parallax.js
• Ora devi dire al tema di caricare le librerie js. Per farlo, apri 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 infine, aggiungi questo codice al tuo file 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));

• Assicurati che le immagini che stai utilizzando siano sufficientemente grandi per la larghezza massima che desideri visualizzare.
• E ora dovresti avere un bell'effetto di scorrimento che hai applicato solo ai nostri blocchi personalizzati: