テキストをフェードさせる

サンプル01は画像のフェードですが、画像だけでなくサンプル02のようにテキストのフェードも可能です。

サンプル02の実行結果

テキストの

フェードも可能となる

サンプル02

<!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( ["text001","text002","text003"], 1000, 3000 );
            }
        // --></script>
    </head>
    <body>
    <h1>Crossfaderサンプル</h1>
    <div id="text001">
        Crossfaderは一定時間ごとに同じテキストや画像を繰り返し表示するライブラリです。
    </div>
    <div id="text002">
        Crossfaderライブラリは処理したいタグにID名を割り当てます。
    </div>
    <div id="text003">
        あとは、ページが読み込まれたか、処理対象とするタグが読み込まれたらnew Crossfader()を指定するだけです。
    </div>
    </body>
</html>

サンプル03のように<div>の中の要素に<br>を入れて改行するとテキストを少しずつ表示するような感じにすることもできます(アクセシビリティとしてはNGですが)。

サンプル03の実行結果

表示テキストに改行を入れると

テキストが少しづつ表示される

サンプル03

<!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( ["text001","text002","text003"], 1000, 3000 );
            }
        // --></script>
    </head>
    <body>
    <h1>Crossfaderサンプル</h1>
    <div id="text001">
        Crossfaderは一定時間ごとに同じテキストや画像を繰り返し表示するライブラリです。
    </div>
    <div id="text002">
        Crossfaderは一定時間ごとに同じテキストや画像を繰り返し表示するライブラリです。<br>
        Crossfaderライブラリは処理したいタグにID名を割り当てます。
    </div>
    <div id="text003">
        Crossfaderは一定時間ごとに同じテキストや画像を繰り返し表示するライブラリです。<br>
        Crossfaderライブラリは処理したいタグにID名を割り当てます。<br>
        あとは、ページが読み込まれたか、処理対象とするタグが読み込まれたらnew Crossfader()を指定するだけです。
    </div>
    </body>
</html>