下スクロール時の背景パララックス実装ガイド: jarallax.jsを活用した方法｜DAD UNION

Webデザインのトレンドとして人気のあるパララックススクロール。この記事では、jarallax.jsを使用してページ背景にパララックス効果を簡単に実装する方法をご紹介します。さらに、背景にYouTube動画を設定する方法も取り上げます。実際に作成したデモページも公開しているので、ぜひチェックしてみてください。

Contents

CSSを用意する
HTMLの構造を設定する
JavaScriptでパララックスを実装する
jarallax.jsを使ったパララックスデモページ
ソース元：Jarallax – The parallax scrolling effect for JavaScript
Jarallax.jsを使用するメリット

CSSを用意する

まずは、パララックスエフェクトを適用するエリアのスタイリングを行います。以下は.jarallaxクラスを持つエリアの基本的なCSSです。このCSSはカスタマイズ可能なので、デザインに合わせて変更してください。

<style>
*,
:after,
:before {
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 20px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.8em;
  padding: 15px 0;
}
.section {
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jarallax {
  height: 80vh;
}
</style>
<link href="jarallax.css" rel="stylesheet" />

HTMLの構造を設定する

次に、パララックスエフェクトを適用するエリア（class=”jarallax”）をHTMLに設定します。今回は画像とYouTube動画の2か所にパララックスを設定しています。

<div class="section"><h1>jarallax.jsを使ったパララックスページです。<br>下にスクロールしてみてください。</h1></div>

<div class="jarallax">
    <img class="jarallax-img" src="i1.jpg" alt="" />
</div>

<div class="jarallax" data-video-src="https://youtu.be/P7Od94ikeoI"></div>

<div class="section"></div>

JavaScriptでパララックスを実装する

最後に、jarallax.jsを使ってパララックス効果を動的に実装します。必要なスクリプトファイルを読み込んだ後、.jarallaxクラスを持つエリアにパララックス効果を適用します。
jarallax.min.js、jarallax-video.min.jsファイルを読み込みます。jarallax(document.querySelectorAll(“パララックスエリア”))を記述します。

<script src="jarallax.min.js"></script>
<script src="jarallax-video.min.js"></script>

<script type="text/javascript">
    jarallax(document.querySelectorAll(".jarallax"));
</script>

jarallax.jsを使ったパララックスデモページ

実際にどのような効果が得られるのか、以下ページで確認してみてください。

jarallax.jsを使ったパララックスデモページ

ソース元：Jarallax – The parallax scrolling effect for JavaScript

Jarallax – The parallax scrolling effect for JavaScript

Jarallax.jsを使用するメリット

簡単な実装:
Jarallax.jsは、パララックス効果を実装する際に必要なJavaScriptのコードを簡略化してくれます。初心者でも比較的簡単にパララックス効果をWebページに追加することができます。
高い互換性:
Jarallax.jsは、多くのブラウザに対応しているため、幅広いユーザーに対して一貫したパララックス効果を提供することができます。
YouTube動画のサポート:
このライブラリを使用すると、背景にYouTube動画を簡単に設定して、パララックス効果を実現することができます。これにより、動画を用いた魅力的な背景デザインが可能となります。
カスタマイズ性:
Jarallax.jsには多くのオプションや設定が用意されているため、デザインや動作を自分のニーズに合わせてカスタマイズすることができます。
軽量:
ライブラリ自体が軽量であるため、ページの読み込み速度を大きく低下させることなくパララックス効果を追加することができます。
活発なコミュニティ:
Jarallax.jsはオープンソースのライブラリであり、多くの開発者が使用しています。そのため、問題が発生した場合や改善点がある場合、コミュニティを通じてサポートを受けることができます。