Permalink
Browse files

building out convas to drill into

  • Loading branch information...
1 parent f8905d6 commit 9621d628d8451f44588988e7a3aad5e1fad83c12 @heymishy committed Mar 6, 2012
Showing with 9 additions and 104 deletions.
  1. +9 −104 index.html
View
@@ -1,23 +1,5 @@
<!doctype html>
-<!--
-
- So you'd like to know how to use impress.js?
-
- You've made the first, very important step -- you're reading the source code.
- And that's how impress.js presentations are built -- with HTML and CSS code.
-
- Believe me, you need quite decent HTML and CSS skills to be able to use impress.js effectively.
- And what is even more important, you need to be a designer, too, because there are no default
- styles for impress.js presentations, there is no default or automatic layout for them.
-
- You need to design and build it by hand.
-
- So...
-
- Would you still like to know how to use impress.js?
-
--->
<html lang="en">
<head>
@@ -58,48 +40,9 @@
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser. Upcoming version 10 of Internet Explorer <i>should</i> also handle it.</p>
</div>
- <!--
-
- Here is where interesting thing start to happen.
-
- Each step of the presentation should be an element inside the `#impress` with a class name
- of `step`. These step elements are positioned, rotated and scaled by impress.js, and
- the 'camera' shows them on each step of the presentation.
-
- Positioning information is passed through data attributes.
-
- In the example below we only specify x and y position of the step element with `data-x="-1000"`
- and `data-y="-1500` attributes. This means that **the center** of the element (yes, the center)
- will be positioned in point x = -1000px and y = -1500px of the presentation 'canvas'.
-
- It will not be rotated or scaled.
-
- -->
- <div id="start" class="step slide" data-x="-1000" data-y="-1500">
- <q>'Present'ing a new way to 'present' (Thanks to impress.js!)</q>
- </div>
-
- <div class="step slide" data-x="0" data-y="-1500">
- <q>Replacing some standard text - is it a transition on new slide?</q>
- </div>
-
- <div class="step slide" data-x="1000" data-y="-1500">
- <q>Or transition on the same slide?</q>
- </div>
- <!--
-
- This is an example of step element being scaled.
-
- Again, we use a `data-` attribute, this time it's `data-scale="4"`, so it means that this
- element will be 4 times larger than the others.
- From presentation and transitions point of view it means, that it will have to be scaled
- down (4 times) to make it back to it's correct size.
-
- -->
<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
- <span class="try">scaling up </span>
- <h1>impress.js</h1>
+ <span class="try">A new platform (impress.js)</span>
<span class="footnote"><sup>*</sup> no rhyme intended</span>
</div>
@@ -112,11 +55,11 @@
-->
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
- <p>This attribute rotates, this time going 90 degrees. Position x=850, y=3000</p>
+ <p>Build</p>
</div>
<div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
- <p>Moving canvas elements - over to x=3500 and y=2100. What does <span class="thoughts">thoughts</span> do?</p>
+ <p>Demonstrate</p>
</div>
<!--
@@ -129,24 +72,15 @@
-->
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
- <p>introducing a new 3d positioning element - x=2825, y=2325 and z=-3000. Z is the 3d dimension</p>
+ <p>Dimensions!</p>
</div>
<div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
- <p>this block moves x and y co-ords and rotates 270 degrees, while scaling 6 times!</p>
+ <p>Drill in..</p>
</div>
<div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
- <p>the only <b>limit</b> is your <b class="imagination">imagination</b></p>
- </div>
-
- <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
- <p>want to know more?</p>
- <q><a href="http://github.com/bartaz/impress.js">use the source</a>, Luke!</q>
- </div>
-
- <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
- <p>one more thing...</p>
+ <p>Move and dive in</p>
</div>
<!--
@@ -162,8 +96,7 @@
-->
<div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
- <p><span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it's</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p>
- <span class="footnote">* beat that, prezi ;)</span>
+ <p>Tilt!</p>
</div>
<!--
@@ -178,7 +111,8 @@
* `data-scale` -- defines the scale of step element; default value is 1
-->
- <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
+ <div id="overview" class="step" data-x="4000" data-y="4500" data-scale="10">
+ <p>Zoom out
</div>
</div>
@@ -249,35 +183,6 @@
is used in event handlers.
-->
-
-
-<!-- social, tracking etc, ignore -->
-
-<div style="position: fixed; bottom: 10px; left: 10px;">
- <iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=bartaz&repo=impress.js&type=watch&count=true"
- allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
- <iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=bartaz&repo=impress.js&type=fork&count=true"
- allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
-
- <a href="http://twitter.com/share" class="twitter-share-button" data-text="impress your audience with impress.js - a #prezi inspired CSS3 presentation framework by @bartaz" data-url="http://bartaz.github.com/impress.js" data-related="bartaz"></a>
- <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
-</div>
-
-<script type="text/javascript">
-
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-9117370-1']);
- _gaq.push(['_trackPageview']);
-
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
-
-</script>
-
-
</body>
</html>

0 comments on commit 9621d62

Please sign in to comment.