forked from segdeha/SlideKit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (84 loc) · 3.48 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!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 <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;">
<section class="rotate">
<article><-- content here --></article>
</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;">
<section>
<aside><-- header here --></aside>
<article><-- content here --></article>
<aside><-- footer here --></aside>
</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>