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

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

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

Contents

CSS記述の準備
HTMLの準備
simpleParallax.jsを使ったJavaScriptの記述
simpleParallax.jsを使ってシンプルにパララックスを実装し表示するデモページ
ソース元：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>