[JS]わずか2行のスクリプトで実装するアニメーション機能付きスライドショー

Post on:2011年4月7日

Step 1: コンテンツ（HTML）

はじめに、スライドショーのコンテンツを用意します。
ここでは一つのスライドに一行のテキストを表示します。

HTML5

<!DOCTYPE HTML>
<html>
  <head>
    <title>My slides</title>
  </head>
  <body>
    <section>This is the <em>first</em> slide</section>
    <section>This is the <em>second</em> slide</section>
    <section>This is the <em>third</em> slide</section>
    <section>This is the <em>penultimate</em> slide</section>
    <section>And this is the <em>final</em> slide</section>
  </body>
</html>

各スライドはHTML5のsection要素を使って配置しました。

デモページ：HTMLのみ

Step 2: ページめくり（JavaScript）

スライドショーのページめくり機能を実装します。
まずは、各スライドとなる各section要素をスタイルシートで隠します。

CSS

<style>
  section { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
</style>

次に、スクリプトで最初のsection要素を見つけ、ページがロードされた際にフェードイン表示します。
これを実現するのはjQueryが本当に簡単なので、jQueryを使用します。

JavaScript

<script>
  var currentSection = $('section').first().fadeIn();
</script>

あとは、ページ送りの機能を実装します。クリックとキープレスされた際に、次のスライドが表示されるようにします。

JavaScript

<script>
$('body').bind('click keypress', function() { currentSection = currentSection.fadeOut().next('section').fadeIn(); });
</script>

[ad#ad-2]

デモページ：JavaScriptでページめくりを実装

Step 3: スタイリング（CSS）

ここまでで機能は実装したので、あとはスタイルをつけます。
下記は、デモページで使ったスタイルシートです。

CSS

<style>
  body    { color: #ffffff; background-color: #000000; font-family: arial; font-size: 40px; -webkit-user-select: none; }
  section { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; padding-top: 200px; }
  em      { color: #ffff00; font-family: serif; font-size: 150%; }
</style>

これで終わりです。
完成したスライドショーはシンプルながら、素敵なものとなっています。