ScrollMagic을 사용하여 Drupal 8에 시차 블록 추가

게시 됨: 2022-02-16
Drupal 8 테마에 시차 스타일 블록 추가

이 튜토리얼에서는 사용자 정의 블록 유형을 사용하여 Drupal 8 하위 테마에서 시차 효과를 만드는 방법을 설명합니다.

이 단계를 따르려면 Drupal 8 테마를 잘 이해하는 것이 좋습니다. 여기를 클릭하여 Drupal 8 테마 클래스를 수강할 수 있습니다.

이 튜토리얼을 따라갈 수 있으려면 부트스트랩을 설치하고 CDN 폴더에서 하위 테마를 만들어야 합니다. 이전 게시물에서 여기에서 가이드를 따를 수 있습니다.

1 단계. 부트스트랩 테마 구성

시차 효과는 일반적으로 전체 너비이므로 부트스트랩 테마 메뉴에서 유체 컨테이너 옵션을 켜야 합니다.

  • "모양"으로 이동하여 부트스트랩 테마가 기본값으로 설정되어 있는지 확인하십시오.
  • 부트스트랩 테마 설정을 입력하고 컨테이너 드롭다운을 선택합니다.
  • "액체 용기" 확인란을 선택합니다.
  • "구성 저장"을 클릭합니다.

01

2 단계. 블록 생성

이제 디스플레이에 대한 몇 가지 사용자 정의 블록을 만들어야 합니다. 사용자 정의 블록을 사용하여 블록을 구체적으로 테마화할 수 있습니다.

  • 구조 > 블록 레이아웃 > 유형으로 이동합니다.
  • "사용자 정의 블록 유형 추가"를 클릭하십시오.

02

  • 사용자 지정 블록에 "시차" 레이블을 지정합니다.

03

  • 이제 "사용자 정의 블록 추가"로 이동하여 사용 중인 각 이미지에 대해 하나씩 두 개의 블록을 만듭니다. 나는 이 블록들을 시차 1과 시차 2라고 불렀다.
  • 영역을 콘텐츠로 설정하고 블록을 저장합니다.

04

이제 사용자 정의 기본 블록을 사용하여 블록 레이아웃 페이지의 이미지 사이에 내용을 표시해야 합니다. 또한 너비가 100%가 되는 것을 방지하기 위해 사이드바에 배치한 모든 블록을 제거합니다.

05

3단계. 디버깅 활성화

  • 아직 활성화하지 않았다면 이제 디버깅을 켜십시오.
  • site/default로 이동하여 58행에서 debug를 true로 변경하여 default.services.yml 을 복사하고 이름을 services.yml 로 바꿉니다.

000

  • 이제 테마 제안을 보려면 다음 코드를 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()); } }
  • 함수 이름은 테마 이름과 일치해야 합니다. 이것을 테마 파일에 추가하면 사용자 정의 블록을 테마로 지정할 수 있습니다.
  • 모든 캐시를 비우고 지금 사이트를 검사하면 테마 제안이 표시되어야 합니다.
  • Google Chrome에서 해당 영역을 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하여 검사기 도구에 액세스합니다.

06

  • 템플릿 테마 폴더 subtheme/templates/block--bundle--parallax.html.twig에 시차 블록에 대한 템플릿 제안을 추가합니다.
  • 템플릿 파일에 다음 코드를 추가합니다.
 <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>
  • 이 코드는 생성한 시차 사용자 정의 블록의 스타일을 지정합니다. 이것을 디버그해야 하는 경우 Devel 모듈에서 kint를 사용할 수 있습니다.

4단계. 블록 스타일 지정

이제 블록 스타일을 지정하려면 CSS를 추가해야 합니다.

  • /css/style.css를 열고 다음 코드를 추가합니다.
 .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; } }
  • 블록과 일치하도록 .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6을 업데이트해야 합니다.

007

이것은 사용자 정의 블록에 할당된 클래스입니다. Parallax 블록의 이름을 다르게 지정한 경우 .parallax--parallax1 및 .parallax--parallax2를 업데이트해야 합니다.

5단계. 이미지 및 ScrollMagic 추가

  • 테마로 이동하여 /images/라는 폴더를 만듭니다. 여기에서 시차 효과를 위한 이미지를 저장할 수 있습니다.
  • 이미지가 약간 움직이도록 자바스크립트를 추가하세요. 이를 위해 ScrollMagic을 사용합니다. GitHub에서 파일을 다운로드하고 압축을 풉니다.

008

  • 이제 테마로 이동하여 /js/라는 폴더를 만들고 이 파일을 폴더로 이동합니다.
    • animation.gsap.min.js
    • ScrollMagic.min.js
    • TweenMax.min.js
  • 이제 사용자 지정 js를 추가해야 합니다. add parallax.js
  • 이제 테마에 js 라이브러리를 로드하도록 지시해야 합니다. 그렇게 하려면 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
  • 마지막으로 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));
  • 사용 중인 이미지가 표시하려는 최대 너비에 대해 충분히 큰지 확인하십시오.
  • 이제 사용자 정의 블록에만 적용한 멋진 스크롤 효과가 나타납니다.

ScrollMagic을 사용하여 Drupal 8에 시차 블록 추가