ライセンス購入ダウンロードへHomeブログカスタマイズBackpax.jsを使ってパララックスユニットを作ってみようBackpax.jsを使ってパララックスユニットを作ってみよう2019年12月7日みなさんは背景画像にパララックス効果をつけたい場合にどのライブラリを選定して実装していますか?意外と背景画像にパララックスエフェクトをつけるのは難しいと思います。背景画像の大きさに応じてパララックスのスピードを調整しないといけないし、スマートフォンサイズの時は別画像にしてパララックスさせたい場合もあります。一つのJavaScriptを利用するだけではうまくいかず、さらに高度なカスタマイズを求められることがほとんどです。開発したパラッラックス用の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など、好きに数字を指定することができます。<p>ここには普通にコンテンツが入ります。</p></div>JavaScriptは以下のように記述します。Backpax('.js-parallax');});パララックススピードの自動調整また、画像の高さによってパララックススピードが自動調整されます。表示されるエリアに対して画像が高い場合はパララックススピードが早くなりますし、逆に表示エリアに対して画像の高さが変わらない場合はパララックススピードが遅くなります。いうのも背景画像を上から下まですべて表示させたいという意図があります。デモ以下がBackpax.jsの実際のデモになります。スクロールすると背景がスクロールスピードより遅く移動しているのがわかるかと思います。Demoパララックスユニットを作ってみようさて、Backpax.jsがどのようなJavaScriptかお分かりになったと思いますので、実際にパララックスユニットを作成していきます。カスタムユニットを利用するテキストユニットではテキストの入力欄が1つ、画像ユニットであれば画像を1枚アップできるような単機能なユニットになりますが、カスタムユニットを利用するとユニットに自由にカスタムフィールドやカスタムフィールドグループを設定することができます。今回はブレイクポイントごとに背景画像を設定したいのでカスタムフィールドグループをユニットで登録できるようにします。利用する際には、カスタムユニット(フィールドグループ)を選択してください。以下は実際に利用するカスタムユニットのサンプルになります。Ver.2.11から導入されるPaperEditorを利用したものになりますのでここは利用に応じて適宜カスタムフィールドを書き換えてください。style="display:none">許可されていないファイルのため挿入できません。style="display:none">許可されていないファイルのため挿入できません。cmsの管理画面でパララックスユニットの登録をします。移動し、新しいユニットボタンを追加します。入力、「ラベル」は利用者に分かるようなラベルを設定します。今回の場合、パララックスのように記述するといいでしょう。ボタンをクリックしてください。する事で以下のようにグラフユニットが1つ追加されます。実際に作ったHTMLを表示するには以下の場所にHTMLを記述します。CSSについては言及しませんのでサイトに応じて適宜記述しましょう。タグのどこかに、下記の1行を追加ください。この記述をheadタグ内に記述することで、エントリーで何回パララックスユニットが追加されていたとしても、JavaScriptが実行される回数が一回だけになるのでパフォーマンス的におすすめです。-->以上になります。思い出していただければとおもいます。