NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

クールなHTMLベースのスライドを作ることができるプレゼン用フレームワーク「reveal.js」

2015年2月11日jQueryプラグイン活用

クールなスライドが作れるプレゼン用フレームワーク「reveal.js」

JSとCSSと読み込むだけで、スライド遷移のアニメーションが格好良い、HTMLベースのプレゼン用スライドが簡単に作れます。

デモページ

JavaScript

Reveal.initialize({
	controls: true,
	progress: true,
	history: true,
	center: true,
	transition: 'concave' // none/fade/slide/convex/concave/zoom
});

HTML

<div class="reveal">
	<div class="slides">

		<section data-background="#f4f4f4">
			<h1>slide01</h1>
			<p>slide01 slide01 slide01 slide01 slide01</p>
		</section>

		<section data-background="#000000">
			<h2>slide02</h2>
			<p>slide02 slide02 slide02 slide02 slide02</p>
		</section>

		<section data-background="#f4f4f4">
				<section>
					<h3>slides03-01</h3>
					<p>slide03-01 slide03-01 slide03-01 slide03-01 slide03-01</p>
					<p><a href="#" class="navigate-down">▼</a></p>
				</section>				
				<section>
					<h3>slides03-02</h3>
					<p>slide03-02 slide03-02 slide03-02 slide03-02 slide03-02</p>
					<p><a href="#" class="navigate-down">▼</a></p>
				</section>				
				<section>
					<h3>slides03-03</h3>
					<p>slide03-03 slide03-03 slide03-03 slide03-03 slide03-03</p>
				</section>				
		</section>
	
	</div>
</div>

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. クールなHTMLベースのスライドを作ることができるプレゼン用フレームワーク「reveal.js」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com