Web上でプレゼンテーションを「LocalScroll」 - jQueryプラグイン
当ページのリンクには広告が含まれています。
スポンサーリンク
Web上でのプレゼンテーションを実現するプラグイン「LocalScroll」を紹介します。
LocalScroll
このプラグインを使えば、簡単にWeb上でのプレゼンを実装することができます。
Web上でプレゼンテーションを行えるサービス（slidesなど）がいくつも公開されています。
自サイトのコンテンツとしてプレゼンテーションを作成する場合、これらのサービスを使うのもひとつの手ですが、デザインをサイトに合わせたりといったカスタマイズが簡単にできるので、自作したほうがいいかもしれません。
まー状況次第ですが、ひとつの候補としておすすめです。
スポンサーリンク
デモでアニメ効果で切り替わるプレゼンテーションをお楽しみください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="jQuery.LocalScrollのデモでーす。">
<title>jQuery.LocalScroll - jQueryプラグインまとめのカルマ</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.localScroll.js"></script>
<script>
jQuery(function( $ ){
$.localScroll.defaults.axis = 'xy';
$.localScroll.hash({
target: '#content',
queue:true,
duration:1500
});
$.localScroll({
target: '#content',
queue:true,
duration:1000,
hash:true,
onBefore:function( e, anchor, $target ){},
onAfter:function( anchor, settings ){}
});
});
</script>
</head>
<body>
<h1>jQuery.LocalScroll のでもでーす。</h1>
<div id="content">
<div class="section">
<ul>
<li class="sub" id="section1">
<h2>スライド 1</h2>
<p>Web上でプレゼンテーションができるよ〜。</p>
<p>右下の>>をクリックすると次のページだよ。</p>
<p>ああああああああああああああああああああああああああああああああ</p>
<a href="#section2" class="next">>></a>
</li>
<li class="sub" id="section2">
<h2>スライド 2</h2>
<p>こんなに簡単に！</p>
<p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
<a href="#section1" class="prev"><<</a>
<a href="#section3" class="next">>></a>
</li>
<li class="sub" id="section3">
<h2>スライド 3</h2>
<p>便利なプラグイン！</p>
<p>うううううううううううううううううううううううううううううううう</p>
<a href="#section2" class="prev"><<</a>
</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="jQuery.LocalScrollのデモでーす。">
<title>jQuery.LocalScroll - jQueryプラグインまとめのカルマ</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.localScroll.js"></script>
<script>
jQuery(function( $ ){
$.localScroll.defaults.axis = 'xy';
$.localScroll.hash({
target: '#content',
queue:true,
duration:1500
});
$.localScroll({
target: '#content',
queue:true,
duration:1000,
hash:true,
onBefore:function( e, anchor, $target ){},
onAfter:function( anchor, settings ){}
});
});
</script>
</head>
<body>
<h1>jQuery.LocalScroll のでもでーす。</h1>
<div id="content">
<div class="section">
<ul>
<li class="sub" id="section1">
<h2>スライド 1</h2>
<p>Web上でプレゼンテーションができるよ〜。</p>
<p>右下の>>をクリックすると次のページだよ。</p>
<p>ああああああああああああああああああああああああああああああああ</p>
<a href="#section2" class="next">>></a>
</li>
<li class="sub" id="section2">
<h2>スライド 2</h2>
<p>こんなに簡単に！</p>
<p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
<a href="#section1" class="prev"><<</a>
<a href="#section3" class="next">>></a>
</li>
<li class="sub" id="section3">
<h2>スライド 3</h2>
<p>便利なプラグイン！</p>
<p>うううううううううううううううううううううううううううううううう</p>
<a href="#section2" class="prev"><<</a>
</li>
</ul>
</div>
</div>
</body>
</html>
jsファイルのダウンロードやオプションなどの詳細はこちらからどうぞ。
» LocalScroll
スポンサーリンク