Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
90 lines (84 sloc) 3.48 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SlideKit</title>
<link rel="stylesheet" href="slidekit.css">
</head>
<!-- the classname here sets the base/default transition -->
<body class="fade">
<!-- slide, the last -->
<section>
<article>
<p>SlideKit was originally conceived by <a href="http://twitter.com/segdeha">Andrew Hedges</a> and <a href="http://twitter.com/brianarn">Brian Arnold</a> with help from <a href="http://twitter.com/_jjphillips">Jayson Phillips</a>. The current version is based on Andrew's <a href="http://ahedg.es/txjs/2011/">TXJS Roundup</a>.</p>
</article>
</section>
<section>
<article>
<p>On the "to do" list:</p>
<ul>
<li><s>Allowing authors to override the default transition type by putting a classname on the &lt;section> tag</s></li>
<li><s>Enabling touch/swipe gestures</s></li>
<li>More transitions</li>
</ul>
<p>Feel free to submit a pull request!</p>
</article>
</section>
<section>
<article>
<p>SlideKit is designed to work in Safari or Chrome (or any other browser based on WebKit). It is <strong>not</strong> an authoring tool. Basically, it's meant for people who know how to edit HTML.</p>
</article>
</section>
<!-- the classname here overrides the base/default transition -->
<section class="rotate">
<article>
<p style="margin-bottom: 1em;">Add a classname to a slide to override the default transition.</p>
<pre style="font-size: 24px;margin-top: 1em;">
&lt;section class="rotate">
&lt;article>&lt;-- content here -->&lt;/article>
&lt;/section>
</pre>
</article>
</section>
<section>
<aside>
This is a header
</aside>
<article>
<p style="margin-bottom: 1em;">Slides are simple to implement.</p>
<pre style="font-size: 24px;margin-top: 1em;">
&lt;section>
&lt;aside>&lt;-- header here -->&lt;/aside>
&lt;article>&lt;-- content here -->&lt;/article>
&lt;aside>&lt;-- footer here -->&lt;/aside>
&lt;/section>
</pre>
</article>
<aside>
This is a footer
</aside>
</section>
<!-- slide, the first -->
<section>
<article>
<h1>Welcome to SlideKit</h1>
<p style="font-size: 36px;">
<strong>Right arrow</strong> advances through slides.<br>
<strong>Left arrow</strong> goes back.
</p>
<p style="font-size: 36px;">
Transition style:
<select style="font-size: 36px;" onchange="document.body.className=this.options[this.selectedIndex].value">
<option value="fade">Fade through</option>
<option value="rotate">Rotate</option>
<option value="scale">Scale out</option>
<option value="scale-in">Scale in</option>
<option value="slide-down">Slide down</option>
<option value="slide-left">Slide left</option>
</select>
</p>
</article>
</section>
<script src="slidekit.js"></script>
</body>
</html>
Something went wrong with that request. Please try again.