今日の人気記事

  1. 入力に応じてテキストエリアの高さを調節「Autosize」

配列に指定したテキストが切り替わるスライダー「Text Slider」

スポンサーリンク

配列に指定したテキストが切り替わるスライダーを実装するプラグイン「Text Slider」を紹介します。

jQueryプラグイン「Text Slider」

配列にいくつかのテキストを指定し、指定した時間が経過するとアニメーション効果付きで、テキストが切り替わります。びよ~ん、びよ~んとスライドしながらテキストが切り替わるので、おもしろい効果をサイトに加えることができます。

スポンサーリンク

デモでテキストの切り替わりをご覧ください。

「Text Slider」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Text Slider - jQueryまとめのカルマ</title>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.slide-text-left.js"></script>
<script>
$(function() {
  $(".slideText").slideTextLeft({
    words: ["春過ぎて夏来にけらし白妙の 衣干すてふ天の香具山", "あしびきの山鳥の尾のしだり尾の ながながし夜をひとりかも寝む", "田子の浦にうち出でて見れば白妙の 富士の高嶺に雪は降りつつ"],
    delay: 2000
  });
});
</script>

</head>
<body>
<h1>Text Sliderのデモでーす。</h1>
<h2>「<span class="slideText">秋の田のかりほの庵の苫をあらみ わが衣手は露にぬれつつ</span>」</h2>
</body>
</html>

jsファイルのダウンロード、さまざまなオプションやその他の詳細はこちらからどうぞ。
» Text Slider

スポンサーリンク

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