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

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

Search

サイト内検索

Luxy.jsを使って簡単にパララックスを実装する方法

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

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

パララックスの動きを実装するには一見高度な技術が必要になりそうなところですが、当記事で解説いたします「Luxy.js」を利用すれば簡単にパララックスを実装できてしまいます。

これから解説いたしますが、当記事ではLuxy.jsを使ってパララックスを実装する方法と、実装の中でつまずいたりした時の対処法まで解説しておりますので、よろしければぜひ当記事をご活用いただけましたら幸いです。

Luxy.jsとは

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

筆者的には、Luxy.jsは非常に使いやすくシンプルで簡単にパララックスの動きをつけることができる印象があります。

公式ページは下記のURLからご確認いただけます。 https://min30327.github.io/luxy.js/

パララックスの実装方法

それでは早速、パララックスのアニメーションを実装する方法を解説していきたいと思います。

Luxy.jsの本体ファイルの読み込み

まず初めにそもそもパララックスのアニメーションを導入するための環境を作成していきます。

Luxy.jsの公式ページなどからLuxy.jsの本体ファイルをダウンロードします。 「Luxy.js」などと検索すればすぐに出てきますが、出てこない方はhttps://min30327.github.io/luxy.js/こちらからご確認ください。

zipファイルがダウンロードされるかと思いますので、そのzipファイルを解凍してサイトを構成するディレクトリファイルの任意の階層に設置します。 設置したら下記のようにscriptタグにパスを通して読み込めるようにします。

上記の例では下記のような階層構造でluxy.jsファイルを設置しております。 WordPressのテーマファイルのトップディレクトリ(一番上の階層)に「path」というファイル名でファイルを作成し、その中に「to」というファイル名でファイルを作成、その「to」ファイルの中にluxy.jsを設置しております。

  • 【WordPressテーマのトップディレクトリ】/path/to/luxy.js

上記の階層構造でluxy.jsの設置が完了できたら、上記scriptタグのコードでluxy.jsの本体プログラムを読み込みましょう。

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

luxy.jsの本体ファイルの読み込みコードの設置・記述が完了したら、下記のコードを記述してください。 この時必ずluxy.js本体ファイル読み込みコード(前述のコード)の下の位置に記述するようにしてください。

上記の記述によって、luxy.jsの機能を本体ファイルから呼び出しています。 これにより、この後解説するHTMLのluxy.js専用の属性を使って、パララックス機能を追加することができるようになります。

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

luxy.js本体ファイルと機能を呼び出す専用のJavaScriptコードの記述が完了したら、あとはHTMLに属性を追加してパララックスの動きをつけていきます。

まずは下記HTMLコードを記述してください。

上記HTMLコードを見ていただくとお分かりかと思いますが、imgタグに「data-offset=”30″」や「data-horizontal=”1″」などluxy.js専用の属性が追加されているかと思います。

この属性によって数値を変えたりして調整することによってパララックスの動きを追加することができます。

実装内容の全体像

最後にこれまで実装した内容をおまとめします。 最終的には下記のコードのようになるかと思います。

必ずluxy.jsの本体ファイルの設置をお忘れなくしていただき、HTMLファイルにそのままコピー&ペーストをして頂けますと、そのまま実装することができるかと思います。

Luxy.jsのオプションについて

ここでより柔軟にパララックスの実装をできるようにするため、luxy.jsのオプションの解説をいたします。

パラメータについて

Luxy.jsに関してはパラメータがいくつか用意されております。 わかりやすく表にいたしましたので、実装の際などにご活用ください。

パラメータ名 内容
data-offset 初期位置を指定(単位はpx)
data-speed-x 水平方向のスクロール効果の移動速度
data-speed-y 垂直方向のスクロール効果の移動速度
data-horizontal ‘1’ にすると水平方向移動が有効化

上記パラメータの使用例が下記になります。

動かしたいHTML要素に属性として追加いたします。

数値に関してはマイナス(-)を指定したときに、例えば「data-speed-x」であれば通常右方向に動くところを左方向に動かすことができるなどといった感じで逆側に動くように指定することができます。

オプションについて

JavaScriptコードからオプションの記述を追加することができます。 内容は下記になりますので、実装の際などにお使いください。

オプション名 初期値 内容
wrapper ‘#luxy’ 慣性スクロールを囲む要素のID
targets ‘.luxy-el’ パララックスとして動かしたいHTML要素のclass名
wrapperSpeed 0.08 スクロールのスピード

下記がオプションを反映させたJavaScriptコードの記述例になります。

このオプションによってパララックスを適用したい範囲を決めているHTMLタグと、パララックスの動きを適用したいHTMLの要素タグにclassの指定をして、スクロールのスピードの数値を指定することができます。

jsプラグイン実装がうまくいかない場合の対処法

jsプラグインがうまくいかない方は必ずご確認いただきたいポイントがあります。

ここでは筆者の経験上jsプラグインを扱う上で必ず知っておいていただきたいノウハウをここでご紹介いたしますので、よろしければぜひ実際の実務にお役立て頂けますと幸いです。

jsプラグインを実装する際に気をつけたいポイント

jsプラグインを実装するのに気をつけたいポイントについて解説いたします。 内容的には下記になりますが、上から順番にご確認いただけますと実装のつまずきを解決できるようになるかと思います。

  • jsプラグインの本体ファイルの読み込みがまず初めにできているか
  • 本体ファイルの機能を呼び出すためのjsプラグイン専用のJavaScriptコードを記述できているか
  • HTMLに対してjsプラグイン専用の属性が記述できているか

まず初めにjsプラグインの本体ファイルの読み込みが初めにちゃんとできているか確認しましょう。 もしかしたらscriptタグで読み込むコードのsrc属性のパスがうまくいっていないなどでそもそも読み込めていない場合もあるため、階層構造をしっかり確認しましょう。

確認ができたら、jsプラグインで用意されている専用のJavaScriptコードを記述しましょう。 機能を呼び出すのに必要な場合が多々あります。

最後にHTMLなどjsプラグインの機能を利用して動きをつけたい要素に対して、各々のjsプラグインの作法に従ってコードをカスタマイズします。

上記のような流れで確認、修正を行なっていただくと解決できる可能性が上がるかと思います。

まとめ

Luxy.jsプラグインの解説は以上になります。 Luxy.jsはパララックス機能を簡単に実装することができるJavaScriptプラグインです。

このプラグインの使い方を学習すれば、高度なパララックスを簡単に実装することが可能となり、実際の実務でも利用することができるかと思います。

当記事ではLuxy.jsを利用してパララックスを実装する方法を0から解説し、実装でうまくいかない時の対処法まで解説しておりますので、よろしければぜひお仕事などにご活用いただけますと幸いです。

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

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

デジタルマーケティング施策や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