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>

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

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

ソース元:simplePARALLAX.js

simplePARALLAX.js

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