Backpax.jsを使ってパララックスユニットを作ってみよう

2019年12月7日

この記事は公開日より5年以上経過しているため、現在の内容と異なる可能性があります。

みなさんは背景画像にパララックス効果をつけたい場合にどのライブラリを選定して実装していますか？意外と背景画像にパララックスエフェクトをつけるのは難しいと思います。なぜなら、背景画像の大きさに応じてパララックスのスピードを調整しないといけないし、スマートフォンサイズの時は別画像にしてパララックスさせたい場合もあります。一つのJavaScriptを利用するだけではうまくいかず、さらに高度なカスタマイズを求められることがほとんどです。

Backpax.jsとは

Backpax.js とは弊社アップルップルが開発したパラッラックス用のJavaScriptライブラリーでGithubに公開しています。

Backpax.jsの特徴として以下の点があります。

HTMLベースで簡単に背景パララックスが実装できる
一つの背景に対していくつでもブレイクポイントに応じた画像が登録できる
パララックススピードの自動調整

HTMLベースで簡単に背景画像が実装できる

実際にBackpax.jsでは以下のようにHTMLを記述します。background-image:url(/path)を記述する代わりに以下のようにdata-imgを背景画像を設定したい要素に記述します。さらにブレイクポイントごとに画像を変えたい場合はdata-img-768などのように768px以下の時の画像を設置したりできます。data-img-以降の数字は任意のもので大丈夫です。data-img-400やdata-img-1800など、好きに数字を指定することができます。

<div class="js-parallax" 
  data-img="./path/to/default-image"
  data-img-768="./path/to/image-which-size-is-smaller-than-768"
  data-img-1024="./path/to/image-which-size-is-smaller-than-1024"
>
  <p>ここには普通にコンテンツが入ります。</p>
</div>

JavaScriptは以下のように記述します。非常に簡単です。

document.addEventListener('DOMContentLoaded', function() {
  new Backpax('.js-parallax');
});

パララックススピードの自動調整

また、画像の高さによってパララックススピードが自動調整されます。表示されるエリアに対して画像が高い場合はパララックススピードが早くなりますし、逆に表示エリアに対して画像の高さが変わらない場合はパララックススピードが遅くなります。というのも背景画像を上から下まですべて表示させたいという意図があります。

デモ

以下がBackpax.jsの実際のデモになります。スクロールすると背景がスクロールスピードより遅く移動しているのがわかるかと思います。

Demo

パララックスユニットを作ってみよう

さて、Backpax.jsがどのようなJavaScriptかお分かりになったと思いますので、実際にパララックスユニットを作成していきます。

カスタムユニットを利用する

テキストユニットではテキストの入力欄が1つ、画像ユニットであれば画像を1枚アップできるような単機能なユニットになりますが、カスタムユニットを利用するとユニットに自由にカスタムフィールドやカスタムフィールドグループを設定することができます。今回はブレイクポイントごとに背景画像を設定したいのでカスタムフィールドグループをユニットで登録できるようにします。

管理ページの実装

カスタムユニットは、少しだけカスタムフィールドと記述が違いますので、カスタムフィールドメーカーを利用する際には、カスタムユニット（フィールドグループ）を選択してください。以下は実際に利用するカスタムユニットのサンプルになります。ソースコードは /themes/＊利用テーマ＊/admin/entry/unit/extend.html に貼り付けてください。パララックス内の記事に対するカスタムフィールドは Ver.2.11から導入されるPaperEditorを利用したものになりますのでここは利用に応じて適宜カスタムフィールドを書き換えてください。

<!-- BEGIN custom_parallax -->
<table class="acms-admin-table-admin-edit">
  <tr>
    <th>パララックス内の記事</th>
    <td>
      <div class="js-expand js-acms-expand">
        <div class="js-acms-expand-inner">
          <button class="js-expand-btn js-acms-expand-btn" type="button">
            <i class="acms-admin-icon acms-admin-icon-expand-arrow js-expand-icon"></i>
          </button>
          <div class="js-paper-editor" data-heading-start="2" data-heading-end="3">
            <div class="js-paper-editor-edit"></div>
            <input type="hidden" class="js-paper-editor-body" name="parallax_contents{id}" value="{parallax_contents@html}" />
            <input type="hidden" name="unit{id}[]" value="parallax_contents{id}" />
            <input type="hidden" name="parallax_contents{id}:extension" value="paper-editor" />
          </div>
        </div>
      </div>
    </td>
  </tr>
</table>
<h2 class="acms-admin-admin-title2">パララックスグループ</h2>
<table class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
  <thead class="acms-admin-hide-sp">
    <tr>
      <th class="acms-admin-table-left acms-admin-admin-config-table-item-handle"> </th>
      <th class="acms-admin-table-left">ブレイクポイント</th>
      <th class="acms-admin-table-left">背景画像</th>
      <th class="acms-admin-table-left acms-admin-admin-config-table-action">削除</th>
    </tr>
  </thead>
  <tbody>
    <!-- BEGIN parallax_group:loop -->
    <tr class="sortable-item">
      <td class="item-handle acms-admin-table-nowrap">
        <i class="acms-admin-icon-sort"></i>
      </td>
      <td>
        <input type="text" name="parallax_breakpoint{id}[]" value="{parallax_breakpoint}" class="acms-admin-form-width-full" />
      </td>
      <td class="js-media-field">
        <div class="js-droparea" data-thumbnail="{parallax_image@thumbnail}" data-type="image" style="width:200px"></div>
        <p class="js-text acms-admin-text-danger" style="display:none">許可されていないファイルのため挿入できません。</p>
        <div class="acms-admin-margin-top-mini">
          <button type="button" class="js-insert acms-admin-btn" data-type="image">選択</button>
        </div>
        <input type="hidden" name="parallax_image{id}[]" value="{parallax_image}" class="js-value" />
      </td>
      <td class="acms-admin-table-nowrap">
        <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" />
      </td>
    </tr>
    <!-- END parallax_group:loop -->
    <tr class="sortable-item item-template">
      <td class="item-handle acms-admin-table-nowrap">
        <i class="acms-admin-icon-sort"></i>
      </td>
      <td>
        <input type="text" name="parallax_breakpoint{id}[]" value="" class="acms-admin-form-width-full" />
      </td>
      <td class="js-media-field">
        <div class="js-droparea" data-type="image" style="width:200px"></div>
        <p class="js-text acms-admin-text-danger" style="display:none">許可されていないファイルのため挿入できません。</p>
        <div class="acms-admin-margin-top-mini">
          <button type="button" class="js-insert acms-admin-btn" data-type="image">選択</button>
        </div>
        <input type="hidden" name="parallax_image{id}[]" value="" class="js-value" />
      </td>
      <td class="acms-admin-table-nowrap">
        <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" />
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colSpan="4">
        <input type="button" class="item-insert acms-admin-btn-admin" value="追加" />
      </td>
    </tr>
  </tfoot>
</table>
<input type="hidden" name="@parallax_group{id}[]" value="parallax_breakpoint{id}" />
<input type="hidden" name="unit{id}[]" value="parallax_breakpoint{id}" />
<input type="hidden" name="parallax_image{id}:extension" value="media" />
<input type="hidden" name="@parallax_group{id}[]" value="parallax_image{id}" />
<input type="hidden" name="unit{id}[]" value="parallax_image{id}" />
<input type="hidden" name="unit{id}[]" value="@parallax_group{id}" />
<!-- END custom_parallax -->

次にa-blog cmsの管理画面でパララックスユニットの登録をします。管理ページ > コンフィグ > 編集設定 > ユニット追加ボタンに移動し、新しいユニットボタンを追加します。ユニット追加ボタンの [追加] をクリック、「モード」は拡張を選択し、上記のコードに書かれているものと同様の custom_parallax と入力、「ラベル」は利用者に分かるようなラベルを設定します。今回の場合、パララックスのように記述するといいでしょう。

ユニット追加ボタンの設定ができたら、管理ページ > コンフィグ > ユニット設定を開いてください。ユニット設定の一番下に「パララックス」が増えていますので、[パララックス] ボタンをクリックしてください。そうする事で以下のようにグラフユニットが1つ追加されます。

表示側の実装

実際に作ったHTMLを表示するには以下の場所にHTMLを記述します。 /themes/＊利用テーマ＊/include/unit/extend.html また、CSSについては言及しませんのでサイトに応じて適宜記述しましょう。

<!-- BEGIN unit#custom_parallax -->
<!-- BEGIN_SetRendered id="js-parallax" -->
<script src="https://cdn.jsdelivr.net/npm/backpax@1.0.2/bundle/backpax.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  new Backpax('.js-parallax');
});
</script>
<!-- END SetRendered -->

<div class="js-parallax" <!-- BEGIN parallax_group:loop -->data-img-{parallax_breakpoint}="{parallax_image}" <!-- END parallax_group:loop -->>
{parallax_contents@html}
</div>
<!-- END unit#custom_parallax -->

JavaScriptの読み込み

/themes/＊利用テーマ＊/include/head/js.html

標準のテーマであれば js.htmlがありますが、無い場合にはタグのどこかに、下記の1行を追加ください。この記述をheadタグ内に記述することで、エントリーで何回パララックスユニットが追加されていたとしても、JavaScriptが実行される回数が一回だけになるのでパフォーマンス的におすすめです。

<!-- GET_Rendered id="js-parallax" -->

以上になります。エントリー記事にアクセントをつけたい場合やクライアントからパララックス効果を求められた場合はぜひ Backpax.js を思い出していただければとおもいます。