ゼロからはじめる Crossfader - 関数ひとつでWebサイトをフェード処理

ページ全体をフェードさせる

個別にフェードさせるのではなくページ全体をフェードインさせることも可能です。この場合は<body>タグにid名を割り当て、そのid名をCrossfader()のパラメータとして割り当てます。Crossfaderはページ上で多用するとうるさいものになってしまう可能性があります。さりげなくページ上で利用したいものです。

サンプル04

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Crossfaderサンプル</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
        <script type="text/javascript" src="js/bsn.Crossfader.js"></script>
        <script type="text/javascript"><!--
            window.onload = function(){
                new Crossfader( ["page001"], 1000, 3000 );
            }
        // --></script>
    </head>
    <body id="page001">
    <h1>Crossfaderサンプル</h1>
    <div>
        Crossfaderは一定時間ごとに同じテキストや画像を繰り返し表示するライブラリです。<br>
        Crossfaderライブラリは処理したいタグにID名を割り当てます。<br>
        あとは、ページが読み込まれたか、処理対象とするタグが読み込まれたらnew Crossfader()を指定するだけです。<br>
        <br>
        <img src="photo/001.jpg" width="384" height="216" alt="富士山"><br>
        文字と画像を混在表示することもできます。
    </div>
    </body>
</html>

サンプル04の実行結果