forked from jmpressjs/jmpress.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (166 loc) · 7.84 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jmpress.js | a jQuery plugin to build a website on the infinite canvas</title>
<meta name="description" content="jmpress.js is a jQuery plugin to build a website on the infinite canvas">
<meta name="author" content="Kyle Robinson Young @shama & Tobias Koppers @sokra" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="expires" content="0">
<meta property="og:title" content="jmpress.js - a jQuery plugin to build a website on the infinite canvas" />
<meta property="og:site_name" content="jmpress.js" />
<meta property="og:image" content="http://dontkry.com/img/jmpress/jmpress.png" />
<link id="theme" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/start/jquery-ui.css" rel="stylesheet" />
<link href="src/css/style.css" rel="stylesheet" type="text/css" />
<link href="dist/basic-animations.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="dist/jmpress.demo.js"></script>
</head>
<body>
<ul id="nav">
<li><a href="#home"><span>HOME</span></a></li>
<li><a href="#about"><span>ABOUT</span></a></li>
<li><a href="#download"><span>DOWNLOAD</span></a></li>
<li><a href="#docs"><span>DOCS</span></a></li>
<li><a href="#showcase"><span>SHOWCASE</span></a>
<ul>
<li><b>THEMES</b></li>
<li><a href="#" data-theme="start"><span>start</span></a></li>
<li><a href="#" data-theme="sunny"><span>sunny</span></a></li>
<li><a href="#" data-theme="base"><span>base</span></a></li>
<li><a href="#" data-theme="le-frog"><span>le-frog</span></a></li>
<li><a href="#" data-theme="black-tie"><span>black-tie</span></a></li>
<li><a href="#" data-theme="ui-darkness"><span>ui-darkness</span></a></li>
<li><a href="#" data-theme="ui-lightness"><span>ui-lightness</span></a></li>
</ul>
</li>
</ul>
<a id="global-prev" href="#" class="prev" style="display:none"><</a>
<a id="global-next" href="#" class="next" style="display:none">></a>
<div id="jmpress" class="normal-mode" data-template="main">
<div id="home" class="step init-css">
<div class="intro-top ui-state-default">
<div class="inner">
<h4>introducing</h4>
<h1 class="ui-state-text">jmpress.js</h1>
<p>a jQuery plugin to build a website on the infinite canvas</p>
<span class="ui-icon ui-icon-star"></span>
<!-- no tabbable things here -->
<a href="#" style="visibility: hidden" class="next">next ></a>
</div>
</div>
<div class="intro-bottom ui-state-default">
<div class="inner">
<h4>introducing</h4>
<h1 class="ui-state-text">jmpress.js</h1>
<p>a jQuery plugin to build a website on the infinite canvas</p>
<span class="ui-icon ui-icon-star"></span>
<a href="#" class="next">start ></a>
</div>
</div>
</div>
<div id="about" class="step">
<h4>started as a jQuery port of</h4>
<div class="impress"><a href="http://bartaz.github.com/impress.js/" target="_blank">impress.js</a><sup>created by Bartek Szopka</sup></div>
<p>but with a different goal in mind. Why keep it behind a podium? Let's make websites!</p>
</div>
<div id="about-jquery" class="step">
<h1>why jQuery?</h1>
<ul>
<li>great plugin framework that is familiar to a lot of people</li>
<li>easier to add and maintain features</li>
<li>wouldn't be surprised if CSS3 transforms/itions are later supported</li>
<li>jQuery UI themes</li>
<li>easier to implement ajax into slides</li>
</ul>
<h3>So why not?</h3>
</div>
<div id="about-impress" class="step">
<h4>why not contribute to the</h4>
<h1>original?</h1>
<p>We have contributed and will continue to send pull requests :)<br/>
@bartaz has a very specific vision for impress.js which we respect.<br/>
<br/>
Plus he was asked and he <a href="https://twitter.com/#!/bartaz/status/156123781037957123" target="_blank">said no</a>.</p>
<p style="font-size:70%">jmpress.js currently includes all of the impress.js features.<br/>
Migration from impress.js is <a href="docs/" target="_blank">possible</a>.</p>
</div>
<div id="download" class="step">
<h1>download</h1>
<p>Download, clone, submodule or fork on <a href="https://github.com/shama/jmpress.js/">github</a></p>
<p>Or go to the <a href="docs/#docs-downloads" target="_blank">Downloads</a> page.</p>
<span class="ui-icon ui-icon-arrowthick-1-s"></span>
</div>
<div id="docs" class="step" style="display:none">
<h1>docs</h1>
<p id="read-docs" style="display:none">Read the docs <a href="docs/" target="_blank">over here</a>.</p>
<span class="ui-icon ui-icon-document"></span>
</div>
<div id="showcase" class="step">
<h1>some cool features</h1>
<ul>
<li>custom animation, click next or press arrow key to see it.</li>
<li data-jmpress="fade">embed this in a container <a href="examples/container.html">Show Sample</a></li>
<li data-jmpress="drive-right after 500ms">jquery ui themes</li>
<li data-jmpress="drive-up after 500ms">Switch to normal view: <a href="#" id="uninit-jmpress">Switch</a> or press Esc</li>
<li data-jmpress="warp-right after 500ms">nice plugin interface <br>(most of the core functionality is built on this interface)</li>
<li data-jmpress="fade after 500ms">many config options</li>
<li data-jmpress="drive-right after 500ms">tree-like hierarchies are possible</li>
</ul>
<a href="#" id="reinit-jmpress" style="display:none">Switch back to presentation view :)</a>
<p data-jmpress="fade-slow after 500ms">See more features on <a href="http://sokra.github.com/jmpress.js/#/showcase">beta</a> branch!</p>
<div id="showcase-nested" class="step">
<h1>nested step</h1>
<p>This step is nested in another step so it's position is relative to parent (view the html/css).
This can make it really easy to position the steps. You can group steps and move that group together.</p>
<p style="font-size: 70%">It also has secondary rotation, which is applied when selected (see secondary-plugin).</p>
</div>
</div>
<div id="showcase-jmpress-nested" class="step">
<h1>jmpress also nested</h1>
<p>jmpress is not only running in a container, but also nested in another jmpress as container.</p>
<p>(click it to navigate there)</p>
<div id="nested-jmpress" style="height: 100px; width: 700px;">
<div class="nested-step" data-duration="-1">
<h2>Cool usecases for that: <a href="#" class="nested-next">start ></a></h2>
</div>
<div class="nested-step" data-x="1000" data-rotate-y="90">
<h2>Embed this into your blog</h2>
<p>for a presentation</p>
</div>
<div class="nested-step" data-y="-1000" data-rotate-x="90" data-rotate-z="-90">
<h2>Make a cool slideshow of your images</h2>
<p>images can be loaded on demand by ajax</p>
</div>
<div class="nested-step" data-y="1000" data-rotate-y="45">
<h2>Do even more cool things:</h2>
</div>
<div class="nested-step" data-y="1000" data-x="1000" data-rotate-x="90">
<h2>Combine this with duration-plugin</h2>
<p>As here</p>
</div>
<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all" style="position: absolute; left: 5px; right: 5px; bottom: 5px; height: 10px">
<div id="nested-jmpress-bar" class="ui-progressbar-value ui-widget-header ui-corner-left" style="width:0"></div>
</div>
</div>
</div>
</div>
<div class="hint">
<p>your arrow keys can help navigate</p>
</div>
<script type="text/javascript">
$("#jmpress").addClass("init-css");
$(function() {
/**
* Run the jmpress.js demo!
*
* In order to showcase all the features in one demo, a lot more code is
* used than you'll need to run your own. Check out the examples for better
* examples on using jmpress.js.
*/
$("#jmpress").jmpress('demo');
});
</script>
</body>
</html>