画像比較スライダー

2つの画像をスライダーを使って比較するためのライブラリをご紹介します。

デモ

ライブラリのダウンロードと設置

こちらを押下してダウンロードしてください。
ダウンロードしたimage-comparison-slider.jsを任意の場所へ置き読み込みます。

HTML

<script type="text/javascript" src="js/image-comparison-slider.js"></script>

使い方

第一引数(必須)に省略を適用する要素を指定します。
newを使用してインスタンスを生成します。
インスタンスを生成した瞬間に省略が反映されます。

引数 初期値 説明
第一引数
必須
  適用する要素
第二引数 { ... } オプション
詳細は次のリンクを参照
オプションの詳細

JavaScript

var sampleElem = document.getElementById('sample');

new imageComparisonSlider(sampleElem, {
	image : {
		first  : 'img/picture1.jpg',
		second : 'img/picture2.jpg'
	}
});

HTML

								<div id="sample"></div>
							

CSS


#sample {
	position:relative;
	overflow:hidden;
	border:2px solid #333;
	width:500px;
}

	#sample .image {
		width:100%;
		height:100%;
		vertical-align:top;
	}

	#sample .image.second {
		position:absolute;
		overflow:hidden;
	}

	#sample.horizontal .image.second {
		top:0;
		right:0;
	}

	#sample.vertical .image.second {
		left:0;
		bottom:0;
	}

		#sample .image img {
			vertical-align:top;
		}

		#sample .image.second img {
			position:absolute;
		}

		#sample.horizontal .image.second img {
			right:0;
		}

		#sample.vertical .image.second img {
			bottom:0;
		}

	#sample .slider {
		position:absolute;
		top:0;
		left:0;
		box-sizing:content-box;
		border:none;
		padding:0;
		background-color:rgba(255, 255, 255, 0.9);
		background-clip:content-box;
		-webkit-appearance:none;
		-moz-appearance:none;
		appearance:none;
		cursor:pointer;
		transition:border-color 0.2s;
	}

	#sample.horizontal .slider {
		border-left:4px solid transparent;
		border-right:4px solid transparent;
		width:3px;
		height:100%;
		transform:translate(-50%);
	}

	#sample.vertical .slider {
		border-top:4px solid transparent;
		border-bottom:4px solid transparent;
		width:100%;
		height:3px;
		transform:translate(0, -50%);
	}

	#sample .slider:hover {
		border-color:rgba(255, 255, 255, 0.4);
	}

オプション

次のオプションが利用可能です。

オプションの詳細

名称 初期値 説明
direction string 'horizontal' スライドする方向
horizontal ... 水平にスライド
vertical ... 垂直にスライド
image
必須
Object {
    first : null,
    second : null
},
表示する画像パス
action string 'drag' スライドアクションの種類
drag ... ドラッグによるスライド
always ... マウス移動によるスライド
border number 0.5 境界線の初期位置
1 ... 100%
0 ... 0%

JavaScript

var sampleElem = document.getElementById('sample');

new imageComparisonSlider(sampleElem, {
	direction : 'vertical',
	image     : {
		first  : 'img/picture1.jpg',
		second : 'img/picture2.jpg'
	},
	border    : 0.7
});

JavaScript逆引きリファレンス一覧へ戻る