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;
}
}