CoolWebWindow

自作したjQueryプラグインを無料配布しているサイトです。
jQueryプラグインは商用利用可能、MITライセンス表示、カスタマイズ無制限です。

無料jQueryプラグイン [パララックス(画像スクロール)]

単体バージョン:jquery.imagescroll.js

よくあるパララックス効果と違い、スクロールによってボックスの背景が一緒にスライドするタイプのパララックスです。どちらかと言うと、画像バナーのエフェクト用です。

画像を表示するdiv要素と、それを囲むdiv要素を作り、それぞれ適当にidやクラス名をつけてください。

オプションで

が選べます。

factor画像のスライド速度を調整する補正係数です。「1」でスクロールと同じ速度になります。スクロールより0.1倍(10分の1)の速度にしたい場合は「0.1」あるいは「1/10」にします。
初期値は「0.1」です。
duration遅延速度を設定します。スクロールに対して少し遅れて画像をスライドさせるのに使用します。
初期値は「1000」です。単位は「ms(ミリ秒)」ですが、単位を付ける必要はありません。
easing画像のスライド効果の種類です。「liner」と「swing」から選べます。シングルクォーテーションかダブルクォーテーションで文字列を括る必要があるので注意です。プラグインを導入することによりさらに多彩な効果を選択できます。サンプルではjQuery Easing Pluginというプラグインを使用しています。初期値は「'swing'」です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>[DEMO]パララックス(画像スクロール)</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="js/jquery.js"></script>
	<script src="js/jquery.easing.1.3.js"></script>
	<script src="js/jquery.parallax.js"></script>
	<script>
		$(function(){
			$('.box').imagescroll({
				factor   : 0.125,
				duration : 1000,
				easing   : 'easeOutSine'
			});
		});
	</script>
</head>
<body>
下にスクロールしてください。<br>
↓<br>↓<br>↓<br>↓(略)<br>
<div class="box"><div class="image"></div></div>
↓<br>↓<br>↓<br>↓(略)<br>
おわり
</body>
</html>

CSS

.box {
	overflow: hidden;
	position: relative;
	width: 800px;
	height: 300px;/* 表示サイズ */
	margin: 0 auto;
}

.box .image {
	position: relative;
	top: -150px;
	width: 800px;
	height: 600px;/* 実際の画像サイズ */
	background: url("../images/image.jpg") 0 0 no-repeat;
}

「.box」に指定している「margin: 0 auto;」以外は必須です。画像は、表示領域より十分に大きいものが必要になります。サンプルでは表示領域縦300pxに対して、600pxの画像を用意しています。
また、「.box」要素がPC画面の真ん中にきたときに、背景画像が表示領域の真ん中にくるように、「-(画像サイズ - 表示領域)/ 2」、つまり「-150px」を「top」に指定しています。(11行目)

更新履歴

2018-08-26
ver1.0公開
ページのトップへ戻る