デジタルマーケティングやデザイン・開発に関する情報やセルリアに関するトピックを更新。
運営メディアのピックアップコンテンツ、外部サイトへの寄稿記事なども公開しています。

ビジネスを成功へと導くWeb制作・インターネット広告・コンサルティング

Search

サイト内検索

RELLAX JSでパララックスの動きを簡単に実装する方法

更新:2023年10月06日 カテゴリ: デザイン・開発

みなさんこんにちは!エンジニアの高澤です! 今回はRELLAX JSでパララックスを実装する方法を解説したいと思います。

当記事ではこのRELLAX JSというjsプラグインの使い方などに関して解説し、皆さんが実際に実務でパララックスの実装が必要なときにご活用いただけるような構成にしておりますので、よろしければぜひご活用いただけましたら幸いです。

RELLAX JSとは

RELLAX JSとは、パララックスを少ないコードで簡単に実装することができるjsプラグインのことをいいます。

RELLAX JSの公式ページは下記URLからご確認いただけます。 https://dixonandmoe.com/rellax/

RELLAX JSの使い方・実装方法

それでは早速、RELLAX JSの実装方法について手順を解説していきたいと思います。 ここから解説する内容をそのまま実装して頂ければ、無理なく実装することが可能なため、初心者エンジニアの方などにもご安心していただいて進めていただければと思います。

RELLAX JSの本体ファイルの読み込み

まず初めにRELLAX JSのJavaScriptの本体ファイルを読み込みます。

当記事では下記のようにCDNで読み込んでいますが、GitHubにてダウンロードしていただきサーバーに本体ファイルを設置してそれを読み込む形式でもどちらでも大丈夫です。

当記事では実装のしやすさや通信速度等の理由からCDNを利用して解説しております。

上記コードの場所はbody終了タグの直前に記述し、その下にこのあと解説するパララックス機能を呼び出すためのJavaScriptコードを記述していくというイメージが良いかと思います。

よくわからなかった方は後ほど全ての手順を反映した全体のコードをご紹介いたしますのでご安心ください。

機能を呼び出すためのJavaScriptコードを記述する

RELLAX JSの本体ファイルを読み込んだ後は、機能を呼び出すためのJavaScriptコードを記述します。 下記のコードを本体ファイルの下に追記してください。

記述できたらパララックスの動きをつけるための準備は一旦完了です。動きをつけたいHTMLタグにRELLAX JS専用の属性を追加すればパララックスの動きを手軽に実装できてしまいます。

このあと解説いたしますが、上記コードにオプションの記述を追加していただくことでより細かく動きを設定することができます。

要素を構成するHTMLを記述する

RELLAX JSの本体ファイルの読み込みと機能を呼び出すJavaScriptコードの記述ができたら、最後はパララックスの動きをつけたいHTMLタグに対してRELLAX JS専用の属性を追加することにより、いよいよパララックスの動きを実装することができます。

コードは下記になります。

上記コードではテキストを囲んだ3つのdivタグに「data-rellax-speed」という属性を追加してスピードを調整しつつパララックスの動きを実装しております。

実装内容の全体像

ここまでの実装手順を全て反映させたものが下記になります。

下記のコードをそのままHTMLファイルにコピー&ペーストしていただけますとページ上のテキストがそれぞれスピードに差異がある形で動いてくれるかと思います。

ここまでで、RELLAX JSの実装方法・手順の解説は以上になります。

このあとHTMLの属性として設定してあるパラメータなどについての解説をいたします。

RELLAX JSのオプションやパラメータについて

ここではRELLAX JSのオプションやパラメータについて表でおまとめいたしました。 実務の時などにご活用いただけましたら幸いです。

オプション名 初期値 内容
speed -2 速度 (-10〜10の間で指定可能)
center false センタリングするかどうか
wrapper null (body) 監視領域
vertical true Y方向パララックス
horizontal false X方向パララックス

スピードの設定方法

スピードの設定方法について解説いたします。

このdata-rellax-speed属性を使用することにより設定することが可能です。

要素の速度がデフォルトでは「-2」で設定されておりますが、カスタマイズするときはdata-rellax-speed属性の数値を変更することによって動きの速度を微調整することが可能です。

ポイントとしては、正の値を指定すると速度が速くなり、負の値を設定すると速度が遅くなります。

ブレークポイントの設定方法

ブレークポイントの設定方法について解説いたします。

ブレークポイントとしてスマホ・タブレット・パソコンの3つのイメージで設定できます。 見てお分かりかと思いますが、data-rellax-mobile-speed属性がスマホ時、data-rellax-tablet-speed属性がタブレット時、data-rellax-desktop-speed属性がパソコン時の数値を指定することによってそれぞれ速度を設定することができます。

上記のJavaScriptコードをご確認いただくと、breakpointsに対して配列形式で値を設定することができます。 順番はスマホ・タブレット・パソコンの順番になります。

まとめ

RELLAX JSを使ってパララックスを実装する方法に関しての解説は以上になります。

当記事では初心者の方でも実装可能なようにパララックスの実装手順を解説しております。

実務でも使えるように構成しておりますので、よろしければ当記事を繰り返しお使いいただけましたら幸いです。

更新:2023年10月06日 カテゴリ: デザイン・開発

現状のデジタルマーケティングに課題をお感じですか?

デジタルマーケティング施策やWebサイトの機能・デザイン等を見直される際は、ぜひお声がけください。 貴社のご状況やご要望に合わせ、アクセス解析から数値的な根拠を持って課題点の抽出と改善に向けての施策を無料にてご提案させていただきます。

お問い合わせ

CONTACT

目標を共に背負い、伴走するWebコンサルティング

Web Cusulting & Direction

当社の考えるWebコンサルティングは、目標をクライアントと共に共有し達成へと邁進すること。これは「解決策を示すことが役割である」という従来のコンサルティングの考え方と少し異なるかもしれません。あくまで、コンサルタントは経営者や事業責任者に対し、課題に対して解決につながる施策を示すまで仕事、と言う解釈が一般的でしょう。当社は設立してすぐにWebコンサルティング事業をはじめました。若いメンバー中心、驚かれるような実績もほとんどありませんでした。
そんな私たちが、大きな責任を背負った役職者に対し助言を行い、プロジェクトを成功に導かなければなりません。改善策を示すだけでは足りませんし、なかなか信じてももらえません。そのような中でどうしたらチームの一員として貢献できるのか。もがいた末たどり着いた答えは非常にシンプルでした。
助言だけでなく同時に実践も引き受け、先に成果を出してしまうこと。そうすれば、その実績が信頼に変わり、我々の示す改善策がチームに受け入れられやすくなり良いサイクルが作れます。私たちの中で強く根付いた価値観、「伴走するWebコンサルティング」を心の中心に据えて、クライアントの目標に対して真正面から向き合います。

作るだけではない、ビジネスの芯を捉えるWeb制作・開発

Design & Development

Webサイト制作会社、デザイン会社は日本全国に1万社以上存在します。加えて、最近ではWebサイトを無料で簡単に作れるサービスなども生まれてきました。
Web制作を生業とする企業は今一度事業のあり方を考えなければならない帰路に立たされています。当社もその例にもれず、自分たちのできるWeb制作とは何か、真剣に悩んできました。そしてたどり着いたのが、「ビジネスの芯を捉える」Web制作・開発を提供すること。かっこいいデザイン、印象の残るデザイン、確かにそれらは非常に価値があります。誤解を恐れずに言うならば、我々よりも良いデザインを作る会社はたくさんあるでしょう。我々は広告賞の受賞歴もなければ、アートに精通したクリエイティブディレクターが在籍しているわけでもない。言ってしまえば、最先端のクリエイティブを手掛けるにはまだ経験が浅いのは否めません。
だったら何ができるのか?私たちは、”集客で成果を出す”ことに長けています。創業から5年、クライアントのビジネスで結果を出すことだけを考えてきました。我々にとってデザインは手段。得意のユーザー解析、SEO、広告運用と組み合わせて「ビジネスの芯を捉えた」デザインを創造することで事業成長に繋げていきます。

高速PDCAを実現する、総合的な広告運用

Advertising management

「広告運用代行会社」と聞くと、多くの人はGoogleやYahoo!のリスティング広告をクライアントの代わりに運用する会社というイメージを思い浮かべるのではないでしょうか。それはある種間違いではないのですが、もしかすると時代遅れかもしれません。インターネット広告の種類は多種多様、リスティング広告とほとんど同じ意味とし使われていた「運用型広告」は、実際はリスティング広告以外にも効果的な手法が数多く存在します。加えて、Google広告やYahoo!広告はAIによる運用の簡略化やサポートの充実化が進み、代理店を介さずとも未経験者の運用で一定の効果を挙げられるようにもなっています。広告代理店の存在意義を改めて定義し直さなければなりません。
私たちが考える広告運用代行の価値は「成果を出し続けること」と「成果を出すプロセス、ノウハウをクライアントと共有すること」であると考えています。成果を出し続けるために、当社は多数の広告手法に精通する広告運用コンサルタントを育て、それらを最適なバランスで組み合わせて運用する体制を整備しました。
運用の状況をタイムリーにクライアントと共有しご一緒に課題や改善策を共有することで、長期的に見て価値の高い広告パートナーとしてチームに貢献いたします。

目標を共に背負い、伴走するWebコンサルティング

Web Cusulting & Direction

当社の考えるWebコンサルティングは、目標をクライアントと共に共有し達成へと邁進すること。これは「解決策を示すことが役割である」という従来のコンサルティン[続きを表示する]グの考え方と少し異なるかもしれません。あくまで、コンサルタントは経営者や事業責任者に対し、課題に対して解決につながる施策を示すまで仕事、と言う解釈が一般的でしょう。当社は設立してすぐにWebコンサルティング事業をはじめました。若いメンバー中心、驚かれるような実績もほとんどありませんでした。そんな私たちが、大きな責任を背負った役職者に対し助言を行い、プロジェクトを成功に導かなければなりません。改善策を示すだけでは足りませんし、なかなか信じてももらえません。そのような中でどうしたらチームの一員として貢献できるのか。もがいた末たどり着いた答えは非常にシンプルでした。助言だけでなく同時に実践も引き受け、先に成果を出してしまうこと。そうすれば、その実績が信頼に変わり、我々の示す改善策がチームに受け入れられやすくなり良いサイクルが作れます。私たちの中で強く根付いた価値観、「伴走するWebコンサルティング」を心の中心に据えて、クライアントの目標に対して真正面から向き合います。

作るだけでない、ビジネスの芯を捉えるWeb制作・開発

Design & Development

Webサイト制作会社、デザイン会社は日本全国に1万社以上存在します。加えて、最近ではWebサイトを無料で簡単に作れるサービスなども生まれてきました。Web制[続きを表示する]作を生業とする企業は今一度事業のあり方を考えなければならない帰路に立たされています。当社もその例にもれず、自分たちのできるWeb制作とは何か、真剣に悩んできました。そしてたどり着いたのが、「ビジネスの芯を捉える」Web制作・開発を提供すること。かっこいいデザイン、印象の残るデザイン、確かにそれらは非常に価値があります。誤解を恐れずに言うならば、我々よりも良いデザインを作る会社はたくさんあるでしょう。我々は広告賞の受賞歴もなければ、アートに精通したクリエイティブディレクターが在籍しているわけでもない。言ってしまえば、最先端のクリエイティブを手掛けるにはまだ経験が浅いのは否めません。だったら何ができるのか?私たちは、”集客で成果を出す”ことに長けています。創業から5年、クライアントのビジネスで結果を出すことだけを考えてきました。我々にとってデザインは手段。得意のユーザー解析、SEO、広告運用と組み合わせて「ビジネスの芯を捉えた」デザインを創造することで事業成長に繋げていきます。

高速PDCAを実現する、総合的な広告運用

Advertising management

「広告運用代行会社」と聞くと、多くの人はGoogleやYahoo!のリスティング広告をクライアントの代わりに運用する会社というイメージを思い浮かべるのではな[続きを表示する]いでしょうか。それはある種間違いではないのですが、もしかすると時代遅れかもしれません。インターネット広告の種類は多種多様、リスティング広告とほとんど同じ意味とし使われていた「運用型広告」は、実際はリスティング広告以外にも効果的な手法が数多く存在します。加えて、Google広告やYahoo!広告はAIによる運用の簡略化やサポートの充実化が進み、代理店を介さずとも未経験者の運用で一定の効果を挙げられるようにもなっています。広告代理店の存在意義を改めて定義し直さなければなりません。私たちが考える広告運用代行の価値は「成果を出し続けること」と「成果を出すプロセス、ノウハウをクライアントと共有すること」であると考えています。成果を出し続けるために、当社は多数の広告手法に精通する広告運用コンサルタントを育て、それらを最適なバランスで組み合わせて運用する体制を整備しました。運用の状況をタイムリーにクライアントと共有しご一緒に課題や改善策を共有することで、長期的に見て価値の高い広告パートナーとしてチームに貢献いたします。

サイト情報

SITE INFO