ScrollMagicを使用してDrupal8に視差ブロックを追加する

公開: 2022-02-16
Drupal8テーマに視差スタイルのブロックを追加する

このチュートリアルでは、カスタムブロックタイプを使用して、Drupal8サブテーマで視差効果を作成する方法を説明します。

これらの手順に従うには、Drupal8のテーマをよく理解しておくと役立ちます。 Drupal 8テーマクラスを受講するには、ここをクリックしてください。

このチュートリアルに従うには、Bootstrapをインストールし、CDNフォルダーからサブテーマを作成する必要もあります。 あなたは私たちの以前の投稿でここに私たちのガイドに従うことができます。

ステップ1。 ブートストラップテーマを構成する

視差効果は通常全幅であるため、BootstrapテーマメニューからFluidコンテナオプションをオンにする必要があります。

  • [外観]に移動し、Bootstrapテーマがデフォルトとして設定されていることを確認します。
  • ブートストラップテーマ設定を入力し、[コンテナ]ドロップダウンを選択します。
  • 「液体容器」のチェックボックスをオンにします。
  • 「構成の保存」をクリックします。

01

ステップ2。 ブロックを作成する

次に、表示用にいくつかのカスタムブロックを作成する必要があります。 カスタムブロックを使用することで、ブロックに具体的なテーマを設定できます。

  • [構造]> [ブロックレイアウト]> [タイプ]に移動します。
  • 「カスタムブロックタイプの追加」をクリックします。

02

  • カスタムブロックに「視差」というラベルを付けます。

03

  • 次に、[カスタムブロックの追加]に移動し、使用している画像ごとに1つずつ、合計2つのブロックを作成します。 私はこれらのブロックをParallax1とParallax2と呼びました。
  • リージョンをコンテンツに設定し、ブロックを保存します。

04

次に、カスタム基本ブロックを使用して、ブロックレイアウトページの画像間にコンテンツを表示する必要があります。 また、サイドバーに配置したブロックをすべて削除します。これにより、幅が100％になるのを防ぐことができます。

05

ステップ3。 デバッグを有効にする

  • まだ有効にしていない場合は、デバッグをオンにします。
  • sites / defaultに移動し、58行目のdefault.services.ymlをservices.ymlにコピーして名前を変更し、debugをtrueに変更します。

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 /というフォルダーを作成します。 これは、視差効果のために画像を保存する場所です。
  • Javascriptを追加して、画像を少し動かします。 このために、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を使用してDrupal8に視差ブロックを追加する