突然ですが、jQueryでパララックスっぽい動きするのを作りました。

 

というも・・・新しいWordpressテーマを現在作っているんですが、そのテーマになんかかんかのパララックス的な動きを入れたかったんです。

 

今回のテーマは配布するつもりですので、例えjQuery使ってJavascript作るとなると面倒くさいし、極力手間を省いて、CSS3とか既存CSSのパッチワークで、最新ブラウザで動けばいいなと思っていたんです。

 

で、他のサイト様を参考にしてCSSでパララックスを実装しようとしてみたものの・・・。

 

• background-position:fixed;のBootstrapで作られたサイトによくあるCSSパラックスがスマホでまったく動作しない。
• 遠景視差を見せるためのparsepectiveとtaransformZを利用した方法がEdgeで動かない。

 

両方ともかなり手痛いダメージです。

以上の理由で、CSSでのパララックスはまだ時期尚早なのでは、と考えました。

 

 

CSSでパララックスはできません！！

 

でも、サードパーティ製のパララックスJavascriptは機能がいっぱいありすぎて面倒くさい。

使うつもりは毛頭ありません。

 

だから、パララックスもやりません！！

 

で、終わったらなんか悔しいですので・・・

結局作るつもりないのにそれっぽいのを作りました。

 

こんな感じのやつ。

 

 

余計な動きをさせたくなかったので本体スクリプトは相当シンプル。

というか、ひとまず背面レイヤーに効果つけとけば、前面レイヤーは別で制御する方法なんていくらでもあるでしょう。

 

プラグイン方式で書いてあるので（jQueryさえあれば）汎用性抜群。

パソコンならちゃんと動きます。パソコンなら。

あれ・・・スマホは・・・？一応それとなく対応してます。

 

あれ・・・スマホは・・・？一応それとなく対応してます。

 

プラグインのプロパティ

// XXXは単一設置する場合はid、複数ならclassで指定
$('XXX').simplelax({
  base: '.base',             // グループ要素
  content: '.content',       // コンテンツの要素
  background: '.background', // 背景に回す要素
  delay: 100,      // 背景のディレイ、数値が大きくなればぬるりと動く
  easing: 'swing', // イージング入れてる時だけ指定
  multiCoef: 10,   // パララックスを複数設置した際のz-index補正値
  smpDelay: null   // スマホ時の背景のディレイ(ここ未設定ならdelay優先)
});

 

ファイル

こんなもん必要なクリエイター諸兄は絶対いないだろ・・・と思いつつひっそり記載。

DLはこちらからどうぞ