デモページについて

このページは簡易的なパララックス効果のデモページです。

アイコン

内容について

CSSでのパララックスがスマホで使用できなかったので作りました。

同じような動作のパララックス効果を設定できます。

アイコン

構成について

jQueryを利用して作成したのでスクリプトはかなりシンプルです。

([2016年09月28日 追記]さらにシンプルになるように修正しました。)

組込が簡単なプラグイン形式なのでそのまま使えます…たぶんおそらく思うに。

アイコン

対応デバイス

IE7～Edge、著名なモダンブラウザは動作し、それとなくスマートフォンも一応対応。

iOSの慣性スクロールが怖いですが。

アイコン

コードについて

こんな感じで設定します。複数設置にも対応しています。

コンテンツの途中にパーツ的に入れることも可能です。

<script>
$(document).ready(function(){
	$('.base').simplelax({
		view: '.background'
	});
});
</script>
<div class="base">
	<div class="content">ここにコンテンツ</div>
	<div class="background">ここに背景に設定したい画像など</div>
</div>
<div class="base">
	<div class="content">以下同じ</div>
	<div class="background">以下同じ</div>
</div>
アイコン

最後に

あたりまえだけど、長くてもきちんと現在の背景は保持されます。

 

 

 

 

 

 

 

 

 

 

 

～途中～

 

 

 

 

 

 

 

 

 

 

～途中～

 

 

 

 

 

 

 

 

 

 

こんな感じで。