Dodaj bloki paralaksy do Drupala 8 za pomocą ScrollMagic

W tym samouczku wyjaśnię, jak używać niestandardowych typów bloków, aby stworzyć efekt paralaksy w podmotywie Drupal 8.

Postępowanie zgodnie z tymi krokami pomoże dobrze zrozumieć motywy Drupala 8. Kliknij tutaj, aby wziąć udział w zajęciach tematycznych Drupal 8.

Aby móc śledzić ten samouczek, musisz również zainstalować Bootstrap i utworzyć podmotyw z folderu CDN. Możesz śledzić nasz przewodnik tutaj we wcześniejszym poście.

Krok 1. Skonfiguruj motyw Bootstrap

Efekty paralaksy są zwykle pełnej szerokości, więc musisz włączyć opcję Pojemnik płynu z menu motywu Bootstrap.

• Przejdź do „Wygląd” i upewnij się, że motyw Bootstrap jest ustawiony jako domyślny.
• Wprowadź ustawienia motywu Bootstrap i wybierz menu rozwijane Kontener.
• Zaznacz pole „Pojemnik na płyn”.
• Kliknij „Zapisz konfigurację”.

Krok 2. Twórz bloki

Teraz musisz zrobić kilka niestandardowych bloków na wyświetlaczu. Używając niestandardowych bloków, możesz specjalnie motywować bloki.

• Przejdź do opcji Struktura > Układ bloków > Typy.
• Kliknij „Dodaj niestandardowy typ bloku”.

• Oznacz blok niestandardowy „Paralaksą”:

• Teraz przejdź do „Dodaj blok niestandardowy” i utwórz dwa bloki, po jednym dla każdego używanego obrazu. Nazwałem te bloki Parallax 1 i Parallax 2.
• Ustaw region na zawartość i zapisz bloki.

Teraz musisz użyć niestandardowych bloków podstawowych, aby wyświetlić zawartość między obrazami na stronie układu bloku. Usuń również wszelkie bloki, które umieściłeś na paskach bocznych, ponieważ zapobiegnie to osiągnięciu 100% szerokości.

Krok 3. Włącz debugowanie

• Teraz włącz debugowanie, jeśli jeszcze go nie masz.
• Przejdź do sites/default i skopiuj i zmień nazwę default.services.yml na services.yml w wierszu 58 zmień debugowanie na true:

• Teraz, aby móc zobaczyć sugestie motywów, dodaj ten kod do pliku 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()); } }

• Nazwa funkcji musi być zgodna z nazwą motywu. Dodanie tego do pliku motywu umożliwia tworzenie własnych bloków tematycznych.
• Opróżnij wszystkie pamięci podręczne, a jeśli teraz sprawdzisz witrynę, powinieneś zobaczyć sugestie dotyczące motywów.
• W przeglądarce Google Chrome kliknij prawym przyciskiem myszy region i wybierz Sprawdź, aby uzyskać dostęp do narzędzia inspektora:

• Dodaj sugestię szablonu dla bloku paralaksy w folderze motywów szablonów subtheme/templates/block--bundle--parallax.html.twig
• Dodaj ten kod do pliku szablonu:

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

• Ten kod zmieni styl utworzonego niestandardowego bloku paralaksy. Jeśli potrzebujesz debugować to możesz użyć kint z modułu Devel.

Krok 4. Stylizuj klocki

Teraz musisz dodać CSS, aby stylizować bloki.

• Otwórz plik /css/style.css i dodaj ten kod:

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

• Będziesz musiał zaktualizować .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6, aby pasował do Twojego bloku:

To jest klasa przypisana do Twojego bloku niestandardowego. Jeśli nazwałeś swój blok Parallax inaczej, będziesz musiał zaktualizować .parallax--parallax1 i .parallax--parallax2.

Krok #5. Dodaj obrazy i ScrollMagic

• Przejdź do swojego motywu i utwórz folder o nazwie /images/. Tutaj zapiszesz obrazy dla efektu paralaksy.
• Dodaj trochę kodu JavaScript, aby obrazy nieznacznie się poruszały. W tym celu użyjesz ScrollMagic. Pobierz i rozpakuj pliki z GitHub:

• Teraz przejdź do swojego motywu i utwórz folder o nazwie /js/ i przenieś te pliki do tego folderu
  • animacja.gsap.min.js
  • ScrollMagic.min.js
  • TweenMax.min.js
• Teraz musisz dodać nasz niestandardowy js add parallax.js
• Teraz musisz powiedzieć motywowi, aby załadował biblioteki js. Aby to zrobić, otwórz 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 na koniec dodaj ten kod do swojego pliku 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));

• Upewnij się, że obrazy, których używasz, są wystarczająco duże dla maksymalnej szerokości, jaką chcesz wyświetlić.
• A teraz powinieneś mieć ładny efekt przewijania, który zastosowałeś tylko do naszych niestandardowych bloków: