コンテンツを一風変わったスクロールで切り替えられるJavaScript「multiScroll.js」

コンテンツを一風変わったスクロールで切り替えられるJavaScript「multiScroll.js」サンプル
スライドするコンテンツはかなり出回っているかと思いますが、jqueryプラグインのmultiscroll.js - split multi-scrolling pages pluginを利用すると左右に分割されたスライドが上下に印象的に表示されてきます。
訪問者にちょっと変わった印象を与えられそうです。

使用方法 multiscroll.js - split multi-scrolling pages pluginからファイル一式をダウンロードします。

下記を<head>内に記述します。
<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" />
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.multiscroll.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myContainer').multiscroll({
sectionsColor: ['#8FB98B', '#000000', '#EAE1C0'], //各スライドの色
anchors: ['first', 'second', 'third'], //アンカー
menu: '#menu', //メニューのid
scrollingSpeed: 700, //スクロールスピード
easing: 'easeOutBack', //エフェクト
loopTop: true, //1枚目から最後に遷移させるか
loopBottom: true //最後から1枚目に遷移させるか
});
});
</script>

あとはスライドを左右に分けて記述すれば完成です。 <div class="ms-left">
<div class="ms-section" id="left1">
<h1>テキスト</h1>
</div>
<!-- ここまで1スライド左分。スライド分左はすべてここに追記 -->
</div>
<div class="ms-right">
<div class="ms-section" id="right1">
<h1>テキスト</h1>
</div>
<!-- ここまで1スライド右分。スライド分右はすべてここに追記 -->
</div>

コンテンツを一風変わったスクロールで切り替えられるJavaScript「multiScroll.js」サンプル

sponsors

「コンテンツを一風変わったスクロールで切り替えられるJavaScript「multiScroll.js」」をシェアする

記事作成:
記事URL:

TOP > > > コンテンツを一風変わったスクロールで切り替えられるJavaScript「multiScroll.js」