今日の人気記事

  1. ブラウザーをフルスクリーン(全画面)表示に「Fullscreen」

英数字がパラパラめくれるボードを実装「Flight Board」

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

スポンサーリンク

英数字がパラパラめくれるボードを実装するプラグイン「Flight Board」を紹介します。

jQueryプラグイン「Flight Board」

このプラグインを使えば、指定したアルファベットや数字の文字列へアニメ効果でパラパラと切り替わるフライトボードのようなボードを実装することができます。

文字列はいくつも指定することができ、アニメーションの時間やスピードも指定することができます。

スポンサーリンク

それではデモページをご覧ください。

「Flight Board」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Flight Board のデモでーす。">
<title>Flight Board - jQuery Plugin Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.plugin.js"></script>
<script src="jquery.flightboard.js"></script>
<script>
$(function () {
  $('#basicBoard').flightboard({messages: ['TOKYO', 'HONOLULU', 'JQUERY PLUGIN'],
    lettersImage: 'flightBoardLarge.png',
    shadingImages: ['flightBoardHigh.png', 'flightBoardShad.png']
  });
});
</script>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/flightboard/">「jQueryプラグインまとめ」に戻る</a></p>

<h1>Flight Board のデモ。</h1>
<div id="basicBoard"></div>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)