デフォルト設定

……ハク、聞いて。お母さんから聞いたんで自分では覚えてなかったんだけど、私、小さいとき川に落ちたことがあるの。
その川はもうマンションになって、埋められちゃったんだって……。
でも、今思い出したの。その川の名は……その川はね、琥珀川。あなたの本当の名は、琥珀川……

ああっ!

ハク

千尋、ありがとう。私の本当の名は、ニギハヤミ コハクヌシだ。

ニギハヤミ……?

ハク

ニギハヤミ、コハクヌシ。

すごい名前。神様みたい。

ハク

私も思いだした。千尋が私の中に落ちたときのこと。靴を拾おうとしたんだね。

そう。琥珀が私を浅瀬に運んでくれたのね。嬉しい……


FROM 千と千尋の神隠し

タブ切り替えにしてコンテンツの切り替えにアニメーションを設定

桜木

オヤジ・・・何をやったらいいんだ?

安西

ほっほっ シュート二万本です

一同

なにいーーーーっ!!??

桜木

2万で足りるのか?

img01

FROM SLUMDUNK

縦方向の切り替え

T

人の夢と書いて儚い…なにかもの悲しいわね…

5

うちゅうの ほうそくが みだれる!

4

ブレイク!

T

今さら疑うものか!私はおまえを信じる!

9

会わせてくれ、愛しのダガーに!!

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery.steps.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.steps.min.js"></script>
<script>
	$(window).load(function(){
		$('#stepsDemo01').steps({
			headerTag: 'h3'
		});

		$('#stepsDemo02').steps({
			headerTag: 'h3',
			transitionEffect: 'slideLeft',
			enableFinishButton: false,
			enablePagination: false,
			enableAllSteps: true,
			cssClass: 'tabcontrol'
		});

		$('#stepsDemo03').steps({
			headerTag: 'h3',
			stepsOrientation: 'vertical'
		});
	});
</script>
<p class="title">デフォルト設定</p>
<div id="stepsDemo01" class="steps-demo">
    <h3>千</h3>
	<div>……ハク、聞いて。お母さんから聞いたんで自分では覚えてなかったんだけど、私、小さいとき川に落ちたことがあるの。<br />
		その川はもうマンションになって、埋められちゃったんだって……。<br />
		でも、今思い出したの。その川の名は……その川はね、琥珀川。あなたの本当の名は、琥珀川……</div>
 
    <h3>千</h3>
    <div>ああっ!</div>
	
	<h3>ハク</h3>
	<div>千尋、ありがとう。私の本当の名は、ニギハヤミ コハクヌシだ。</div>
	
	<h3>千</h3>
	<div>ニギハヤミ……?</div>
	
	<h3>ハク</h3>
	<div>ニギハヤミ、コハクヌシ。</div>
	
	<h3>千</h3>
	<div>すごい名前。神様みたい。</div>
	
	<h3>ハク</h3>
	<div>私も思いだした。千尋が私の中に落ちたときのこと。靴を拾おうとしたんだね。</div>
	
	<h3>千</h3>
	<div>そう。琥珀が私を浅瀬に運んでくれたのね。嬉しい……<br /><br /><br /><p class="tar">FROM 千と千尋の神隠し</p></div>
</div>

<p class="title">タブ切り替えにしてコンテンツの切り替えにアニメーションを設定</p>
<div id="stepsDemo02" class="steps-demo">
    <h3>桜木</h3>
    <div>オヤジ・・・何をやったらいいんだ?</div>
 
    <h3>安西</h3>
    <div>ほっほっ シュート二万本です</div>
	
	<h3>一同</h3>
	<div>なにいーーーーっ!!??</div>
	
	<h3>桜木</h3>
	<div>2万で足りるのか?</div>
	
	<h3></h3>
	<div><img src="<PATH>/imgb12.jpg" alt="img01" width="100%" /><p class="tar">FROM SLUMDUNK</p></div>
</div>

<p class="title">縦方向の切り替え</p>
<div id="stepsDemo03" class="steps-demo">
    <h3>T</h3>
    <div>人の夢と書いて儚い…なにかもの悲しいわね…</div>
 
    <h3>5</h3>
    <div>うちゅうの ほうそくが みだれる!</div>
	
	<h3>4</h3>
	<div>ブレイク!</div>
	
	<h3>T</h3>
	<div>今さら疑うものか!私はおまえを信じる!</div>
	
	<h3>9</h3>
	<div>会わせてくれ、愛しのダガーに!!</div>
</div>

stepsについて

Stepsは、簡単にウィザード形式のコンテンツを設置できるプラグインです。
オプションで設定を変更することもできます。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • SmartWizard

    SmartWizard

    ウィザード形式のコンテンツを設置できる