| - | <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><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>
| + | <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> |
"
