JavaScript

simpleParallax.jsでのパララックス実装!初心者でも分かるステップバイステップガイド

パララックスとは、背景と前景が異なる速度でスクロールされることにより、立体的な動きや深みを感じることができる効果のことを言います。特にWebデザインで人気があり、動きがあることでサイト訪問者の注目を引くことができます。

simpleParallax.jsは、このパララックス効果を簡単に実装することができるJavaScriptのライブラリです。この記事では、simpleParallax.jsを使ってシンプルにパララックスを実装し表示する方法をステップバイステップでご紹介します。

CSS記述の準備

まず、bodyタグの高さを指定してスクロールできるようにします。こちらの例では「height: 1500px」としていますが、内容に応じて適宜変更してください。

<style>
body {
  padding: 0;
  height: 1500px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.8em;
  padding: 15px 0 50px 0;
}
</style>

HTMLの準備

次に、パララックスを実装する画像を用意します。こちらの例では「1.jpg」「2.jpg」「3.jpg」という3つの画像を使用しています。

<h1>simpleParallax.jsを使ってシンプルにパララックスを実装し表示してます。<br>下にスクロールしてみてください。</h1>

<img class="thumbnail1" src="1.jpg" alt="" width="40%">
<br>
<br>
<br>
<br>
<br>
<img class="thumbnail2" src="2.jpg" alt="" width="40%">
<br>
<br>
<br>
<br>
<br>
<img class="thumbnail3" src="3.jpg" alt="" width="40%">

simpleParallax.jsを使ったJavaScriptの記述

simpleParallax.jsファイルを読み込みます。
simpleParallax.jsファイルを読み込んだ後、各画像にパララックス効果を適用します。オプションで座標、拡大率、遅延、トランジションなどを指定できます。

<script src="simpleParallax.js"></script>

<script>
var image1 = document.getElementsByClassName('thumbnail1');
new simpleParallax(image1, {
  orientation: 'right'
});

var image2 = document.getElementsByClassName('thumbnail2');
new simpleParallax(image2, {
  scale: 1.8
});

var image3 = document.getElementsByClassName('thumbnail3');
new simpleParallax(image3, {
  delay: .6,
  transition: 'cubic-bezier(0,0,0,1)'
});
</script>

simpleParallax.jsを使ってシンプルにパララックスを実装し表示するデモページ

実際の動きを確認するためのデモページは、以下のリンクからご覧いただけます。

simpleParallax.jsを使ってシンプルにパララックスを実装し表示するデモページ

ソース元:simplePARALLAX.js

このライブラリを使用する際の詳細なドキュメントやオプションの一覧は、以下の公式サイトで確認することができます。

simplePARALLAX.js

まとめ

Webサイトに動きを加えることで、ユーザーエンゲージメントを高めることができます。simpleParallax.jsを使えば、簡単にパララックス効果を実装することができるので、是非一度試してみてください。

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。