「Stellar.js」を使ったパララックスエフェクト

Stellar.js とは

パララックスの実装に使えるjQueryプラグインです。
それぞれの要素の縦横のスクロール速度をずらすことができます。

デモ

それぞれで縦のスクロール速度をずらしています。

DEMO

使ってみる

ますダウンロード

こちらから

設置する

jQueryも忘れずに読み込みましょう。

<script src="js/jquery.stellar.min.js"></script>

対象の要素またはwindowに対して使用します。

$(function(){
  $(window).stellar();
});

ソース

まず縦横のスクロールを設定します。
horizontalは横、verticalは縦を指します。

$(window).stellar({
  horizontalScrolling: true,
  verticalScrolling: true,
});

要素を動かしたいとき

それぞれCSSのpositionでabsoluteかrelativeかfixedにしておきます。

対象の要素に「data-stellar-ratio=”数値”」を付与します。
数値は小さくなるほどスクロールするスピードが遅くなり、大きくなるほど早くなります。
例えば「data-stellar-ratio=”0.5″」だと通常の半分のスピードで要素がスクロールします。
もし数値を1以下にする場合は「position:fixed;」が推奨されているようです。

<div data-stellar-ratio="0.5">

背景を動かしたいとき

対象の要素に「data-stellar-background-ratio=”数値”」を付与します。
もし数値を1以下にする場合は「background-attachment:fixed;」が推奨されているようです。

<div data-stellar-background-ratio="0.5">

相対位置を変える

要素の位置を補正するには「data-stellar-horizontal-offset=”数値”」と「data-stellar-vertical-offset=”数値”」を使います。
要素に直接記述するやり方が一番多いかと思います。

<div data-stellar-horizontal-offset="10" data-stellar-vertical-offset="50">

スマートデバイスで使用する

比較的新しいデバイスは普通に動くようです。
公式ドキュメントにも載っていますが、スマートデバイスで「Stellar.js」を使用する場合、スクロール系のライブラリと共に使用するといいみたいです。
その際には、オプションの「scrollProperty」と「positionProperty」を「transform」に変える必要があるようです。
なお、スマートデバイスで背景を動かすのは推奨されていません。

さいごに

「Stellar.js」はパララックス系のライブラリの中でも、導入の敷居が低いかと思います。
他にも様々なオプションが用意されているようです。
ほとんどがPCサイトでの使用だと思いますが、動きが面白いのでぜひ使ってみて下さい。