Adăugați blocuri Parallax la Drupal 8 cu ScrollMagic

În acest tutorial, voi explica cum să utilizați tipuri de bloc personalizate pentru a crea un efect Parallax în subtema Drupal 8.

Pentru a urma acești pași, ar ajuta să înțelegeți bine tematica Drupal 8. Puteți face clic aici pentru a urma cursul nostru tematic Drupal 8.

Pentru a putea urma acest tutorial, trebuie să instalați și Bootstrap și să creați o subtemă din folderul CDN. Puteți urma ghidul nostru aici în postarea noastră anterioară.

Pasul 1. Configurați tema Bootstrap

Efectele de paralaxă au de obicei lățime completă, așa că trebuie să activați opțiunea Container fluid din meniul temei Bootstrap.

• Accesați „Aspect” și asigurați-vă că tema Bootstrap este setată ca implicită.
• Introduceți setările temei Bootstrap și selectați meniul drop-down Container.
• Bifați caseta pentru „Recipient de lichid”.
• Faceți clic pe „Salvați configurația”.

Pasul 2. Creați blocuri

Acum trebuie să faceți câteva blocuri personalizate pentru afișaj. Folosind blocuri personalizate, puteți tema blocurile în mod specific.

• Accesați Structură > Aspect bloc > Tipuri.
• Faceți clic pe „Adăugați un tip de bloc personalizat”.

• Etichetați blocul personalizat „Parallax”:

• Acum mergeți la „Adăugați bloc personalizat” și creați două blocuri, câte unul pentru fiecare dintre imaginile pe care le utilizați. Am numit aceste blocuri Parallax 1 și Parallax 2.
• Setați regiunea la conținut și salvați blocurile.

Acum trebuie să utilizați blocurile de bază personalizate pentru a afișa conținutul între imagini pe pagina de aspect al blocurilor. De asemenea, eliminați toate blocurile pe care le-ați plasat în barele laterale, deoarece acest lucru va împiedica lățimea să fie de 100%.

Pasul 3. Activați depanarea

• Acum activați depanarea dacă nu o aveți deja activată.
• Accesați site-uri/default și copiați și redenumiți default.services.yml în services.yml pe linia 58, schimbați depanarea la true:

• Acum, pentru a putea vedea sugestiile de teme, adăugați acest cod în fișierul 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()); } }

• Numele funcției trebuie să se potrivească cu numele temei dvs. Adăugarea acestui fișier la fișierul temă vă permite să creați blocuri personalizate tematice.
• Goliți toate cache-urile și dacă inspectați site-ul acum, ar trebui să vedeți sugestii de teme.
• În Google Chrome, faceți clic dreapta pe regiune și selectați Inspectare pentru a accesa instrumentul de inspecție:

• Adăugați sugestia de șablon pentru blocul paralax în folderul cu teme de șabloane subtheme/templates/block--bundle--parallax.html.twig
• Adăugați acest cod în fișierul șablon:

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

• Acest cod va stila blocul personalizat paralax pe care l-ați creat. Dacă trebuie să depanați acest lucru, puteți utiliza kint din modulul Devel.

Pasul #4. Stilați blocurile

Acum trebuie să adăugați CSS pentru a stila blocurile.

• Deschideți /css/style.css și adăugați acest cod:

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

• Va trebui să actualizați .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 pentru a se potrivi cu blocul dvs.:

Aceasta este clasa atribuită blocului dvs. personalizat. Dacă ați denumit blocul Parallax diferit, va trebui să actualizați .parallax--parallax1 și .parallax--parallax2.

Pasul #5. Adăugați imaginile și ScrollMagic

• Accesați tema și creați un folder numit /images/. Aici veți salva imaginile pentru efectul de paralaxă.
• Adăugați ceva Javascript pentru a face imaginile să se miște ușor. Pentru aceasta, veți folosi ScrollMagic. Descărcați și extrageți fișierele din GitHub:

• Acum accesați tema și creați un folder numit /js/ și mutați aceste fișiere în folder
  • animation.gsap.min.js
  • ScrollMagic.min.js
  • TweenMax.min.js
• Acum trebuie să adăugați js personalizat add parallax.js
• Acum trebuie să spuneți temei să încarce bibliotecile js. Pentru a face asta, deschide 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

• Și, în sfârșit, adăugați acest cod în fișierul dvs. 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));

• Asigurați-vă că imaginile pe care le utilizați sunt suficient de mari pentru lățimea maximă pe care doriți să o afișați.
• Și acum ar trebui să aveți un efect frumos de defilare pe care l-ați aplicat numai blocurilor noastre personalizate: