| - | <div id="bored" class="step slide active present" data-x="-1000" data-y="-1500" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(-1000px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform-style: preserve-3d; "><q>Aren't you just <b>bored</b> with all those slides-based presentations?</q></div><div class="step slide future" data-x="0" data-y="-1500" id="step-2" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(0px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform-style: preserve-3d; "><q>Don't you think that presentations given <strong>in modern browsers</strong> shouldn't <strong>copy the limits</strong> of 'classic' slide decks?</q></div><div class="step slide future" data-x="1000" data-y="-1500" id="step-3" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(1000px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform-style: preserve-3d; "><q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q></div><div id="title" class="step future" data-x="0" data-y="0" data-scale="4" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(4); -webkit-transform-style: preserve-3d; "><span class="try">then you should try</span><h1>impress.js<sup>*</sup></h1><span class="footnote"><sup>*</sup> no rhyme intended</span></div><div id="its" class="step future" data-x="850" data-y="3000" data-rotate="90" data-scale="5" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(850px, 3000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg) scale(5); -webkit-transform-style: preserve-3d; "><p>It's a <strong>presentation tool</strong> <br>inspired by the idea behind <a href="http://prezi.com/">prezi.com</a> <br>and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p></div><div id="big" class="step future" data-x="3500" data-y="2100" data-rotate="180" data-scale="6" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(3500px, 2100px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(180deg) scale(6); -webkit-transform-style: preserve-3d; "><p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p></div><div id="tiny" class="step future" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(2825px, 2325px, -3000px) rotateX(0deg) rotateY(0deg) rotateZ(300deg) scale(1); -webkit-transform-style: preserve-3d; "><p>and <b>tiny</b> ideas</p></div><div id="ing" class="step future" data-x="3500" data-y="-850" data-rotate="270" data-scale="6" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(3500px, -850px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(270deg) scale(6); -webkit-transform-style: preserve-3d; "><p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p></div><div id="imagination" class="step future" data-x="6700" data-y="-300" data-scale="6" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6700px, -300px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(6); -webkit-transform-style: preserve-3d; "><p>the only <b>limit</b> is your <b class="imagination">imagination</b></p></div><div id="source" class="step future" data-x="6300" data-y="2000" data-rotate="20" data-scale="4" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6300px, 2000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(20deg) scale(4); -webkit-transform-style: preserve-3d; "><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 future" data-x="6000" data-y="4000" data-scale="2" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6000px, 4000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(2); -webkit-transform-style: preserve-3d; "><p>one more thing...</p></div><div id="its-in-3d" class="step future" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6200px, 4300px, -100px) rotateX(-40deg) rotateY(10deg) rotateZ(0deg) scale(2); -webkit-transform-style: preserve-3d; "><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></div><div id="overview" class="step future" data-x="3000" data-y="1500" data-scale="10" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(3000px, 1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(10); -webkit-transform-style: preserve-3d; "></div></div></div><div id="bored" class="step slide active present" data-x="-1000" data-y="-1500" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(-1000px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform-style: preserve-3d; "> <q>Aren't you just <b>bored</b> with all those slides-based presentations?</q></div><div class="step slide future" data-x="0" data-y="-1500" id="step-2" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(0px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform-style: preserve-3d; "> <q>Don't you think that presentations given <strong>in modern browsers</strong> shouldn't <strong>copy the limits</strong> of 'classic' slide decks?</q> </div> <div class="step slide future" data-x="1000" data-y="-1500" id="step-3" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(1000px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform-style: preserve-3d; "> <q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q></div> <div id="title" class="step future" data-x="0" data-y="0" data-scale="4" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(4); -webkit-transform-style: preserve-3d; "><span class="try">then you should try</span><h1>impress.js<sup>*</sup></h1><span class="footnote"><sup>*</sup> no rhyme intended</span></div><div id="its" class="step future" data-x="850" data-y="3000" data-rotate="90" data-scale="5" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(850px, 3000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg) scale(5); -webkit-transform-style: preserve-3d; "><p>It's a <strong>presentation tool</strong> <br>inspired by the idea behind <a href="http://prezi.com/">prezi.com</a> <br> and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p> </div> <div id="big" class="step future" data-x="3500" data-y="2100" data-rotate="180" data-scale="6" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(3500px, 2100px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(180deg) scale(6); -webkit-transform-style: preserve-3d; "> <p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p> </div> <!-- And now it gets really exiting! We move into third dimension! Along with `data-x` and `data-y`, you can define the position on third (Z) axis, with `data-z`. In the example below we use `data-z="-3000"` meaning that element should be positioned far away from us (by 3000px). --> <div id="tiny" class="step future" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(2825px, 2325px, -3000px) rotateX(0deg) rotateY(0deg) rotateZ(300deg) scale(1); -webkit-transform-style: preserve-3d; "> <p>and <b>tiny</b> ideas</p> </div> <div id="ing" class="step future" data-x="3500" data-y="-850" data-rotate="270" data-scale="6" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(3500px, -850px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(270deg) scale(6); -webkit-transform-style: preserve-3d; "> <p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p> </div> <div id="imagination" class="step future" data-x="6700" data-y="-300" data-scale="6" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6700px, -300px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(6); -webkit-transform-style: preserve-3d; "> <p>the only <b>limit</b> is your <b class="imagination">imagination</b></p> </div> <div id="source" class="step future" data-x="6300" data-y="2000" data-rotate="20" data-scale="4" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6300px, 2000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(20deg) scale(4); -webkit-transform-style: preserve-3d; "> <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 future" data-x="6000" data-y="4000" data-scale="2" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6000px, 4000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(2); -webkit-transform-style: preserve-3d; "> <p>one more thing...</p> </div> <!-- And the last one shows full power and flexibility of impress.js. You can not only position element in 3D, but also rotate it around any axis. So this one here will get rotated by -40 degrees (40 degrees anticlockwise) around X axis and 10 degrees (clockwise) around Y axis. You can of course rotate it around Z axis with `data-rotate-z` - it has exactly the same effect as `data-rotate` (these two are basically aliases). --> <div id="its-in-3d" class="step future" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6200px, 4300px, -100px) rotateX(-40deg) rotateY(10deg) rotateZ(0deg) scale(2); -webkit-transform-style: preserve-3d; "> <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> </div> <div id="overview" class="step future" data-x="3000" data-y="1500" data-scale="10" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(3000px, 1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(10); -webkit-transform-style: preserve-3d; "></div></div></div>
| + | <html lang="en"><style>#jmpress { width: 90%; height: 800px; margin:auto; font-size:20pt; font-family:Helvetica;}#jmpress .step{ text-align:center; width:1024px;}#jmpress #slide7{ width:400px; } #jmpress #slide8{ width:400px; } #jmpress #slide9{ width:400px; } </style><div id="start" class="step" ><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide1.PNG" height="380" /></div><div id="slide1" class="step" data-y="1200"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide2.PNG" height="380" /></div><div id="slide3" class="step" data-y="2400" ><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide3.PNG" height="380"/></div><div id="slide4" class="step" data-y="3600" ><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide4.PNG" height="380"/></div><div id="slide5" class="step" data-y="4800" ><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide5.PNG" height="380"/></div><div id="slide6" class="step" data-y="6000" > <img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide6.PNG" height="380"/></div><div id="slide7" class="step" data-y="7200" > <img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide7.PNG" height="380" style="position:relative; left:-55px;" /></div><div id="slide8" class="step" data-y="8400"> <img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide8.PNG" height="380" style="position:relative; left:-55px;" /></div><div id="slide9" class="step" data-y="9600"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide9.PNG" height="380" style="position:relative; left:-55px;" /></div><div id="slide10" class="step" data-y="10800"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide10.PNG" height="380"/></div><div id="slide11" class="step" data-y="12000"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide11.PNG" height="380"/></div><div id="slide12" class="step" data-y="13200"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide12.PNG" height="380"/></div><div id="slide13" class="step" data-y="14400"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide13.PNG" height="380"/></div><div id="slide14" class="step" data-y="15600"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide14.PNG" height="380"/></div><div id="slide15" class="step" data-y="16800"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide15.PNG" height="380"/></div><div id="slide16" class="step" data-y="19000"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide16.PNG" height="380"/></div><div id="slide17" class="step" data-y="20200"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide17.PNG" height="380"/></div><div id="slide18" class="step" data-y="21400"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide18.PNG" height="380"/></div><div id="slide19" class="step" data-y="22600"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide19.PNG" height="380"/></div><div id="slide20" class="step" data-y="23800"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide20.PNG" height="380"/></div><div id="slide21" class="step" data-y="25000"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide21.PNG" height="380"/></div><div id="slide22" class="step" data-y="26200"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide22.PNG" height="380"/></div><div id="slide23" class="step" data-y="27400"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide23.PNG" height="380"/></div><div id="slide24" class="step" data-y="28600"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide24.PNG" height="380"/></div><div id="slide25" class="step" data-y="29800"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide25.PNG" height="380"/></div><div id="slide26" class="step" data-y="31000"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide26.PNG" height="380"/></div><div id="slide27" class="step" data-y="32200"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide27.PNG" height="380"/></div><div id="slide28" class="step" data-y="33400"><img src="https://dl.dropbox.com/u/3703109/igeme/slides/Slide28.PNG" height="380"/></div></html> |
"
