forked from jmpressjs/jmpress.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (121 loc) · 5.22 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
<!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 jQuery port of https://github.com/bartaz/impress.js based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.">
<meta name="author" content="Kyle Robinson Young @shama" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/excite-bike/jquery-ui.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body class="ui-state-default">
<ul id="nav">
<li><a href="#about">ABOUT</a></li>
<li><a href="#download">DOWNLOAD</a></li>
<li><a href="#docs">DOCS</a></li>
<li><a href="#contribute">CONTRIBUTE</a></li>
</ul>
<div id="jmpress">
<div id="about" class="step" data-x="-900" data-y="-1500">
<h4>introducing</h4>
<h1>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">next ></a>
</div>
<div id="about-port" class="step" data-x="-800" data-y="-1100" data-rotate="-20" data-scale="1.2">
<h4>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>
<a href="#" class="next">next ></a>
</div>
<div id="about-jquery" class="step" data-x="-700" data-y="-500" data-rotate="-40" data-scale="1.4">
<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>Fallback to <i>.animate()</i> when needed</li>
<li>jQuery UI themes</li>
<li>easier to implement ajax into slides</li>
<li>jQuery mobile for adding touch support</li>
</ul>
<h3>So why not?</h3>
<a href="#" class="next">next ></a>
</div>
<div id="about-impress" class="step" data-x="0" data-y="100" data-rotate="-60" data-scale="1.6">
<h4>why not contribute to the</h4>
<h1>original?</h1>
<p>I have contributed and will continue to send pull requests :)<br/>
@bartaz has a very specific vision for impress.js which I respect.<br/>
<br/>
Plus I asked him and he <a href="https://twitter.com/#!/bartaz/status/156123781037957123" target="_blank">said no</a>.</p>
<a href="#" class="next">next ></a>
</div>
<div id="download" class="step" data-x="1000" data-y="200" data-rotate="-95" data-scale="1.8">
<h1>download</h1>
<p>Download, clone, submodule or fork on <a href="https://github.com/shama/jmpress.js/">github</a></p>
<span class="ui-icon ui-icon-arrowthick-1-s"></span>
<a href="#" class="next">next ></a>
</div>
<div id="docs" class="step" data-x="1800" data-y="-100" data-rotate="-120" data-scale="2">
<h1>docs</h1>
<p>Available <a href="https://github.com/shama/jmpress.js">in the readme</a> for now</p>
<span class="ui-icon ui-icon-document"></span>
<a href="#" class="next">next ></a>
</div>
<div id="contribute" class="step" data-x="2500" data-y="-900" data-rotate="-160" data-scale="2.2">
<h1>contribute</h1>
<p>Good news! I accept pull requests ;)</p>
<p>Please work and pull against the <i>dev</i> branch. Thanks!</p>
<span class="ui-icon ui-icon-person"></span>
<a href="#" class="next">next ></a>
</div>
<div id="contribute-tests" class="step" data-x="2600" data-y="-1700" data-rotate="-180" data-scale="2.4">
<h1>tests</h1>
<p>jmpress.js uses the <a href="http://pivotal.github.com/jasmine/" target="_blank">jasmine bdd</a> library for testing. Please load <i>test.html</i> in your browser to run the tests.</p>
<a href="#" class="next">next ></a>
</div>
<div id="contribute-wishlist" class="step" data-x="2600" data-y="-2500" data-rotate="-210" data-scale="2.6">
<h1>wishlist</h1>
<ul>
<li>Browser Support (hard but important)</li>
<li>Better fallback support for older browsers</li>
<li>Mobile/Touch (use jQuery mobile)</li>
<li>Integrate an option for jQuery UI theme support</li>
</ul>
<a href="#" class="next">home</a>
</div>
</div>
<div class="hint">
<p>Use arrow keys to navigate</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jmpress.js"></script>
<script type="text/javascript">
$(function() {
$('#jmpress').jmpress({
beforeChange: function( slide ) {
var id = slide.attr('id');
if (id.indexOf('-') != -1) {
id = id.substr(0, id.indexOf('-'));
}
$('#nav a').removeClass( 'active' );
$('#nav a[href=#' + id + ']').addClass( 'active' );
}
});
$('.next').click(function() {
$('#jmpress').jmpress('next');
return false;
});
// HACK TO CHANGE HINT IF IPAD
var ua = navigator.userAgent.toLowerCase();
if ( ua.search(/(ipad)/) != -1 ) {
$('.hint').text('Swipe support is coming :)');
}
});
</script>
</body>
</html>