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

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

Search

サイト内検索

初心者必見!Jarallax.jsで下スクロール時にパララックスの動きを実装する方法

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

みなさんこんにちは!エンジニアの高澤です! 今回はをJavaScriptのプラグインであるJarallax.jsを使って下にスクロールした際のパララックスの動きを実装する方法を解説したいと思います。

Jarallax.jsは簡単にご説明すると、下にスクロールした際に背景にある画像に視差効果(パララックス)でスクロールに合わせて少し遅れるような動きを実装することができます。

当記事ではJarallax.jsを使って手順通りに進めていただければ無理なくパララックスを実装できるように構成されているため、実際の実務でもご活用できるかと思います。

よろしければぜひ当記事をご活用ください。 それでは解説を進めていきたいと思います。

Jarallax.jsとは

Jarallax.jsとは、下にスクロールした際にパララックスの動きを実装することができるJavaScriptプラグインのことを言います。

Jarallax.jsは、下にスクロールした際に背景画像などがスクロールに合わせて少し遅れて動く(パララックス)挙動を実装することが得意なJavaScriptプラグインになります。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

以下がJarallax.jsの公式ページになります。 http://www.jarallax.com/

Githubはこちらです。 https://github.com/nk-o/jarallax

Jarallax.jsの実装方法

それでは早速Jarallax.jsを使って実装する方法を解説したいと思います。

実装の手順は以下の内容になります。

  • Jarallax.jsの本体ファイルの読み込み
  • HTMLのマークアップ
  • CSSを記述する
  • JavaScriptコードの記述

上記の手順で進めていくことでパララックスの実装が可能です。 それぞれの内容を詳しく解説したいと思います。

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

まずはJarallax.jsの本体ファイルの読み込みを行いたいと思います。

下記のスクリプトをHTMLファイルやPHPテンプレートファイル等のフッター部分、もしくはJavaScriptを管理している箇所に読み込ませてください。

本体ファイルの読み込みは必須の工程になります。 というのも、jarallax.jsでの機能を利用するには本体ファイルを読み込んでからでないと利用できないからです。

本体ファイルはjarallax.jsの環境を構築するための大量のプログラムのことを言いますが、この大量のプログラムがあって初めてjarallax.jsを扱える環境を用意することができ、機能を利用することができます。

そのため、この本体ファイルの読み込みは必ず行なってください。

HTMLのマークアップ

次にHTMLのマークアップをおこないたいと思います。

以下のHTMLソースコードを必要な箇所にコピー&ペーストしてください。

HTMLのマークアップに関してはjarallax.js独自のHTMLマークアップが必要になることはありません。

シンプルに後々JavaScriptでの実装で必要になるためdivタグにクラス属性を設定してあげるだけで大丈夫です。

また、ここではサンプルとしてただ画像が表示されているのみですが、d画像の上に文字やお問い合わせ導線、画像などを表示させたいなどありましたら、divタグ内にそれらのHTMLコードを追加するなどしてください。

CSSを記述する

次にCSSを記述していきます。

CSSに関してもシンプルです。 以下のCSSコードをコピー&ペーストしてください。

「jarallax」クラス属性を付与したdivタグの中にimgタグの画像を入れ込んでいるため、それぞれdivタグにはpositionセレクタでrelativeを、包んでいるimgタグにはpositionセレクタのabsoluteを指定してレイアウトを整えております。

こちらに関してもう少し違うレイアウトにしたいなどがありましたら、ご自身で自由にカスタマイズしてみてください。

JavaScriptコードの記述

最後にJavaScriptコードを記述して動きをつけていきます。

以下のJavaScriptコードをjarallax.jsの本体コードの必ず下に追加してください。

このJavaScriptコードでは、「jarallax」属性のクラスを追加しているdivタグをDOMで取得して、それに対してプラグイン独自のjarallax関数と組み合わせて機能を実装しています。

これでjarallax.jsでのパララックスの実装が完了したかと思います。 お疲れ様でした!

コードの全体まとめ

最後にまとめとしてこれまでの手順で作成してきた全体的なコードを掲載しておきたいと思います。

改めて、実装結果は以下の内容になります。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

これまでの手順通りに進めてみてもうまくいかなかった方は以下のソースコードをそのまま丸ごとコピー&ペーストしてください。

実装がうまくいかない時の対処法

jarallax.jsでのパララックスの実装のみならず、JavaScriptのプラグインを利用しての実装がなんかうまくいかない…という方もいるかと思います。

そんな方におすすめなのが、「手順通りに0から実装を進めずに、あらかじめ実装ができているソースコードをそのまま丸ごとコピ&ペーストしてしまう」というのが一つあります。

例えば先ほど手順のまとめとして、全体的な一つのソースコードをコピー&ペーストできるように掲載しているかと思いますが、このようなソースコードを活用して一旦実装してしまうという方法です。

この方法は意外と使えるので、よろしければお試しください。

まとめ

jarallax.jsでパララックスの動きを実装する方法は以上になります。

jarallax.jsは下にスクロールした時に背景画像をパララックス(視差効果)を設定するためのJavaScriptプラグインです。

パララックスとして下スクロール時に背景画像に動きをつけるパターンはしばしばみられるかと思いますので、実際の実務でも使われることが多いかと思います。

その点jarallax.jsであればパララックスの動きを簡単に実装することができるため、リッチなサイトを実装する際には非常に重宝されるプラグインだと言えるでしょう。

当記事ではそんなjarallax.jsについて解説し、手順通りに進めていただければ簡単に実装できるように構成しているので、よろしければぜひ実務などで繰り返しお役立ていただけましたら幸いです。

更新: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