impress.js : Make Doc
impress.js
Presentation from Plain Text.
A Demo of [impress.js](http://bartaz.github.io/impress.js/) presentation tool based on the power of CSS3 transforms and transitions in modern browsers Bartek Szopka, @bartaz =step #bored x: -1000 y: -1500 .slide q. Aren't you just **bored** with all those slides-based presentations? =step x: 0 y: -1500 .slide q. Don't you think that presentations given ***in modern browsers*** shouldn't [copy the limits](strong) of 'classic' slide decks? =step x: 1000 y: -1500 .slide q. Would you like to ***impress your audience*** with ***stunning visualization*** of your talk? =step #title x: 0 y: 0 scale: 4 nop. [then you should try](span try) ===impress.js[\*](sup) nop. [[\*](sup) no rhyme intended](span footnote) =step #its x: 850 y: 3000 rotate: 90 scale: 5 It's a ***presentation tool*** inspired by the idea behind [prezi.com](http://prezi.com) and based on the ***power of CSS3 transforms and transitions*** in modern browsers. =step #big x: 3500 y: 2100 rotate: 180 scale: 6 visualize your **big** [thoughts](span thoughts) =step #tiny x: 2825 y: 2325 z: -3000 rotate: 300 scale: 1 and **tiny** ideas =step #ing x: 3500 y: -850 rotate: 270 scale: 6 by [positioning](b positioning), [rotating](b rotating) and [scaling](b scaling) them on an infinite canvas =step #imagination x: 6700 y: -300 scale: 6 the only **limit** is your [imagination](b imagination) =step #source x: 6300 y: 2000 rotate: 20 scale: 4 want to know more? q. [use the source](http://github.com/bartaz/impress.js), Luke! =step #one-more-thing x: 6000 y: 4000 scale: 2 one more thing... =step #its-in-3d x: 6200 y: 4300 z: -100 rotate-x: -40 rotate-y: 10 scale: 2 [have](span have) [you](span you) [noticed](span noticed) [it's](span its) [in](span in) **3D [\*](sup)**? nop. [\* beat that, prezi ;)](span footnote) =step #overview x: 3000 y: 1500 scale: 10 ### css/reset canvas 215.215.215 radial 240.240.240 190.190.190 canvas black radial 51.51.51 0.0.0 color white min height 740 font "PT Sans" sans-serif <b> and <strong> bold <i> and <em> italic <a> color inherit no underline padding 0 em 0.1 canvas 255.255.255.127 radius em 0.2 font shadow -1x-1 2 100.100.100.230 :0:0.5 <a> with :hover :focus canvas 255.255.255.255 font shadow -1x-1 2 100.100.100.127 .fallback-message canvas 238.221.153 780 padding 10 10 0 margin 20 auto border 1 solid 221.204.85 font sans-serif line height * 1.3 <p> in .fallback-message margin bottom 10 .fallback-message in .impress-supported hide .step relative border-box 900 padding 40 margin 20 auto font 48 line height * 1.5 "PT Serif" "Georgia" serif .step in .impress-enabled margin 0 opacity * 0.3 transition opacity :0:1 .step with .active in .impress-enabled opacity * 1 .slide block 900x700 canvas white padding 40x60 border 1 solid 0.0.0.76 radius 10 shadow 0x2 6 0.0.0.25 font 30 102.102.102 line height 36 spacing -1 "Open Sans" "Arial" sans-serif shadow 0x2 2 0.0.0.25 .logo in .slide margin top 100 <h1> in .slide block margin top 50 font 50 line height 72 bold <h3> in .slide block margin em 1 auto font no bold 28 line height 40 <q> in .slide block margin top 100 font 50 line height 72 <strong> in <q> in .slide nowrap #title padding 0 .try in #title font 64 absolute top em -0.5 left em 1.5 translate z 20 <h1> in #title font 190 translate z 50 .footnote in #title font 32 #big 600 center font 60 line height * 1 <b> in #big block font 250 line height 250 .thoughts in #big font 90 line height 150 #tiny 500 center #ing 500 <b> in #ing inline block :0:0.5 .positioning in #ing with .present translate y -10 .rotating in #ing with .present rotate deg -10 delay :0:0.25 .scaling in #ing with .present scale 0.7 delay :0:0.5 #imagination 600 .imagination in #imagination font 78 #source 700 padding bottom 300 image/png #{DECAFBAD} bottom right no repeat <q> in #source font 60 <p> in #its-in-3d and <var> and <blockquote> preserve-3d <span> <b> in #its-in-3d inline block translate z 40 :0:0.5 .have in #its-in-3d translate z -40 .you in #its-in-3d translate z 20 .noticed in #its-in-3d translate z -40 .its in #its-in-3d translate z 60 .in in #its-in-3d translate z -10 .footnote in #its-in-3d translate z -10 font 32 <span> <b> in #its-in-3d with .present translate z 0 #overview hide .step in .impress-on-overview opaque pointer
Show
|
Documentation