【マウスオーバー】画像をスクロール表示するプラグイン【simplelib.js】

simplelib.jsは様々なプラグインを動的に読み込んで実行できます。そのプラグインの中で、マウスオーバーで画像をスクロール表示するtrimmedScrollのサンプルです。

htmlのコードは下記になります。
画像を含むリンクのaタグにclass=”trimmedScroll”を付与します。
画像はサムネイルの画像とスクロールさせる縦長の画像をそれぞれ用意して、同じディレクトリ内に格納します。画像の幅は同じにしておきます。スクロールさせる縦長の画像はサムネイルの画像のファイル名の後に「-scroll」を付けた名前にします。

<div class="hover_image_wrap">
	<div class="hover_image">
		<a href="https://www.yahoo.co.jp/" target="_blank" class="trimmedScroll">
			<img src="yahoo.jpg" alt="">
		</a>
		<p class="caption_txt">
			<a href="https://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a>
		</p>
	</div>
	<div class="hover_image">
		<a href="https://www.msn.com/ja-jp" target="_blank" class="trimmedScroll">
			<img src="msn.jpg" alt="">
		</a>
		<p class="caption_txt">
			<a href="https://www.msn.com/ja-jp" target="_blank">MSN</a>
		</p>
	</div>
</div>

続いてjsファイル読み込み部分のコードです。
jqueryの読み込み、simplelibで読み込むプラグインのオプション設定、 simplelibの読み込みの順番で記述します。
simplelibで読み込むプラグインのオプション設定は、ここではtrimmedScrollのオプション設定になります。1ピクセル当たりのスクロール時間は10ミリ秒に設定して、デフォルトの2倍のスピードでスクロールさせます。また、fadeTimeを0に設定してフェードアウトさせません。
simplelibの読み込みはsimplelib.jsの後に「?」を記述し、その後に読み込むプラグイン名を記述します。

<script src="jquery.min.js"></script>
<script>
var SimpleLibSettings = {
	trimmedScroll: {
		scrollTimePerPixcel : 10,
		fadeTime : 0
	}
};
</script>
<script src="simplelib.js?trimmedScroll"></script>

最後にCSSのコードです。
trimmedScrollはレスポンシブに対応していませんが、ブラウザ幅が狭くなった場合はメディアクエリでflex-direction: column;を指定して、縦並びのレイアウトにしています。

.hover_image_wrap {
	display: flex;
	justify-content: space-between;
	margin: 0;
}
.hover_image {
	width: 302px;
}
.trimmedScroll {
	display: block;
	border: 1px solid #dddddd;
}
.trimmedScroll img {
	vertical-align: top;
}
.caption_txt {
	margin: 10px 0 0;
	padding: 0;
	text-align: center;
}
@media screen and (max-width: 630px) {
	.hover_image_wrap {
		flex-direction: column;
	}
	.hover_image {
		margin: 0 auto 2em;
	}
	.hover_image:last-child {
		margin: 0 auto;
	}
}