Web上でプレゼンテーションを「LocalScroll」 - jQueryプラグイン

当ページのリンクには広告が含まれています。

jQuery Plugin » アニメーション » Web上でプレゼンテーションを「LocalScroll」 - jQueryプラグイン

Web上でのプレゼンテーションを実現するプラグイン「LocalScroll」を紹介します。

LocalScroll

このプラグインを使えば、簡単にWeb上でのプレゼンを実装することができます。

Web上でプレゼンテーションを行えるサービス（slidesなど）がいくつも公開されています。

自サイトのコンテンツとしてプレゼンテーションを作成する場合、これらのサービスを使うのもひとつの手ですが、デザインをサイトに合わせたりといったカスタマイズが簡単にできるので、自作したほうがいいかもしれません。

まー状況次第ですが、ひとつの候補としておすすめです。

デモでアニメ効果で切り替わるプレゼンテーションをお楽しみください。

「LocalScroll」のデモ

デモのソース（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">&gt;&gt;</a>
      </li>
      <li class="sub" id="section2">
        <h2>スライド 2</h2>
        <p>こんなに簡単に！</p>
        <p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
        <a href="#section1" class="prev">&lt;&lt;</a>
        <a href="#section3" class="next">&gt;&gt;</a>         
      </li>
      <li class="sub" id="section3">
        <h2>スライド 3</h2>
        <p>便利なプラグイン！</p>
        <p>うううううううううううううううううううううううううううううううう</p>
        <a href="#section2" class="prev">&lt;&lt;</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">&gt;&gt;</a>
      </li>
      <li class="sub" id="section2">
        <h2>スライド 2</h2>
        <p>こんなに簡単に！</p>
        <p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
        <a href="#section1" class="prev">&lt;&lt;</a>
        <a href="#section3" class="next">&gt;&gt;</a>         
      </li>
      <li class="sub" id="section3">
        <h2>スライド 3</h2>
        <p>便利なプラグイン！</p>
        <p>うううううううううううううううううううううううううううううううう</p>
        <a href="#section2" class="prev">&lt;&lt;</a>
      </li>
    </ul>
  </div>
</div>
 
</body>
</html>

jsファイルのダウンロードやオプションなどの詳細はこちらからどうぞ。
» LocalScroll

LocalScroll

デモのソース（HTML + jQuery）

関連記事（一部広告含む）