simpleParallax.jsを使ってシンプルにパララックスを実装し表示する方法 DAD UNION

simpleParallax.jsを使ってシンプルにパララックスを実装し表示する方法をご紹介します。

Contents

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

simpleParallax.jsを使ってシンプルにパララックスを実装し表示するHTML記述

※パララックスを実装する画像（1.jpg、2.jpg、3.jpg）を用意します。

<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ファイルを読み込みます。new simpleParallax(パララックス実装エリアのclass, {オプション})を記述します。オプションに座標、拡大率、delay、transition等を指定します。

<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>