Scribd Logo
Upload

Welcome to Scribd!

  • Index - HTML# Step-3

    Uploaded by

    Scott W
    18 views8 pages

    Original Title

    index.html#_step-3

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    18 views8 pages

    Index - HTML# Step-3

    Uploaded by

    Scott W

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    1 <!

    doctype html>
    2
    3 <!--
    4
    5 Welcome to the light side of the source, young padawan.
    6
    7 One step closer to learn something interesting you are...
    8
    9 ____
    10 _.' : `._
    11 .-.'`. ; .'`.-.
    12 __ / : ___\ ; /___ ; \ __
    13 ,'_ ""=-.:__;".-.";: :".-.":__;.-="" _`,
    14 :' `.t""=-.. '<@.`;_ ',@:` ..-=""j.' `;
    15 `:-.._J '-.-'L__ `-.-' L_..-;'
    16 "-.__ ; .-" "-. : __.-"
    17 L ' /.======.\ ' J
    18 "-. "__" .-"
    19 __.l"-:_JL_;-";.__
    20 .-j/'.; ;"""" / .'\"-.
    21 .' /:`. "-.: .-" .'; `.
    22 .-" / ; "-. "-..-" .-" : "-.
    23 .+"-. : : "-.__.-" ;-._ \
    24 ; \ `.; ; : : "+. ;
    25 : ; ;; : ; : \:
    26 ; : ;: ;: ; :
    27 :\ ; : ; : ; / ::
    28 ; ;: ;: ; : ;:
    29 : : ; : ; :: ; :;
    30 ;\ : ; : ;; ;;
    31 : `."-; : ; : ; / ;
    32 ; -: ; : ; : .-" :
    33 :\ \ : ; : \.-" :
    34 ;`. \ ; : ;.'_..-= / ;
    35 : "-. "-: ; :/." .' :
    36 \ \: ;/ __ :
    37 \ .-`.\ /t-"" ":-+. :
    38 `. .-" `l __/ /`. : ; ; \ ;
    39 \ .-" .-"-.-" .' .'j \ / ;/
    40 \ / .-" /. .'.' ;_:' ;
    41 :-""-.`./-.' / `.___.'
    42 \ `t ._ /
    43 "-.t-._:'
    44
    45 -->
    46
    47 <!--
    48
    49 So you'd like to know how to use impress.js?
    50
    51 You've made the rst, very impo ant step - you're reading the source code.
    52 And that's how impress.js presentations are built - with HTML and CSS code.
    53
    54 Believe me, you need quite decent HTML and CSS skills to be able to use impress.js e ectively.
    55 More impo antly, you need to be a designer. There are no default styles or layouts for impress.js presentations.
    56
    57 You need to design and build it by hand.
    58
    59 So...
    60
    61 Would you still like to know how to use impress.js?
    62
    63
    -->
    64
    65 <html lang="en">
    66 <head>
    67 <meta charset="u -8" />
    68 <meta name="viewpo " content="width=1024" />
    69 <meta name="apple-mobile-web-app-capable" content="yes" />
    70 <title>impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Ba ek Szopka
    @ba az</title>
    71
    72 <meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in
    modern browsers and inspired by the idea behind prezi.com." />
    73 <meta name="author" content="Ba ek Szopka" />
    74
    75 <link href="//fonts.googleapis.com/css?
    family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic"
    rel="stylesheet" />
    76
    77 <!--
    78
    79 Impress.js doesn't depend on any external stylesheets. It adds all of the styles it needs for the
    80 presentation to work.
    81
    82 This style below contains styles only for demo presentation. Browse it to see how impress.js
    83 classes are used to style presentation steps, or how to apply fallback styles, but I don't want
    84 you to use them directly in your presentation.
    85
    86 Be creative, build your own. We don't really want all impress.js presentations to look the same,
    87 do we?
    88
    89 When creating your own presentation get rid of this le. Sta from scratch, it's fun!
    90
    91 -->
    92 <link href="css/impress-demo.css" rel="stylesheet" />
    93 <link href="css/impress-common.css" rel="stylesheet" />
    94
    95 <link rel="sho cut icon" href="favicon.png" />
    96 <link rel="apple-touch-icon" href="apple-touch-icon.png" />
    97 </head>
    98
    99 <!--
    100
    101 Body element is used by impress.js to set some useful class names, that will allow you to detect
    102 the suppo and state of the presentation in CSS or other scripts.
    103
    104 First very useful class name is `impress-not-suppo ed`. This class means, that browser doesn't
    105 suppo features required by impress.js, so you should apply some fallback styles in your CSS.
    106 It's not necessary to add it manually on this element. If the script detects that browser is not
    107 good enough it will add this class, but keeping it in HTML means that users without JavaScript
    108 will also get fallback styles.
    109
    110 When impress.js script detects that browser suppo s all required features, this class name will
    111 be removed.
    112
    113 The class name on body element also depends on currently active presentation step. More details about
    114 it can be found later, when `hint` element is being described.
    115
    116 -->
    117 <body class="impress-not-suppo ed">
    118
    119 <!--
    120 For example this fallback message is only visible when there is `impress-not-suppo ed` class on body.
    121
    -->
    122 <div class="fallback-message">
    123 <p>Your browser <b>doesn't suppo the features required</b> by impress.js, so you are presented with a simpli ed version of this
    presentation.</p>
    124 <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
    125 </div>
    126
    127 <!--
    128
    129 Now that's the core element used by impress.js.
    130
    131 That's the wrapper for your presentation steps. In this element all the impress.js magic happens.
    132 It doesn't have to be a `<div>`. Only `id` is impo ant here as that's how the script nd it.
    133
    134 O en you don't need to use any a ributes here, but for educational purposes I have used all of them below.
    135
    136 To change the duration of the transition between slides use `data-transition-duration="2000"` giving it
    137 a number of ms. It defaults to 1000 (1s).
    138
    139 When authoring impress.js presentations, you should target some screen size, which you can de ne here.
    140 The default is 1024 x 768. You should write your CSS as if this is the screen size used for the
    141 presentation. When you present your presentation on a screen (or browser window) of di erent size,
    142 impress.js will automatically scale the presentation to t the screen. The minimum and maximum limits
    143 to this scaling can also be de ned here.
    144
    145 NOTE: I intend to change the defaults to target HD screens in 2021. So you may want to make a habit
    146 of explicitly de ning these a ributes for now, to avoid any disruption when the defaults change.
    147
    148 You can also control the perspective with `data-perspective="500"` giving it a number of pixels.
    149 It defaults to 1000. You can set it to 0 if you don't want any 3D e ects.
    150 If you are willing to change this value make sure you understand how CSS perspective works:
    151 h ps://developer.mozilla.org/en/CSS/perspective
    152
    153 Plugins:
    154
    155 We set the default time for autoplay plugin to 7 seconds. Autoplay will automatically advance
    156 to next slide a er a timeout expires.
    157 -->
    158 <div id="impress"
    159 data-transition-duration="1000"
    160
    161 data-width="1024"
    162 data-height="768"
    163 data-max-scale="3"
    164 data-min-scale="0"
    165 data-perspective="1000"
    166
    167 data-autoplay="7">
    168
    169 <!--
    170
    171 Here is where interesting thing sta to happen.
    172
    173 Each step of the presentation should be an element inside the `#impress` with a class name
    174 of `step`. These step elements are positioned, rotated and scaled by impress.js, and
    175 the 'camera' shows them on each step of the presentation.
    176
    177 Positioning information is passed through data a ributes.
    178
    179 In the example below we only specify x and y position of the step element with `data-x="-1000"`
    180 and `data-y="-1500"` a ributes. This means that **the center** of the element (yes, the center)
    181 will be positioned in point x = -1000px and y = -1500px of the presentation 'canvas'.
    182

    183 It will not be rotated or scaled.


    184
    185 --------
    186 Plugins: For rst slide, set the autoplay time to a custom 10 seconds.
    187
    188 -->
    189 <div id="bored" class="step slide" data-x="-1000" data-y="-1500" data-autoplay="10">
    190 <q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
    191 </div>
    192
    193 <!--
    194
    195 The `id` a ribute of the step element is used to identify it in the URL, but it's optional.
    196 If it is not de ned, it will get a default value of `step-N` where N is a number of slide.
    197
    198 So in the example below it'll be `step-2`.
    199
    200 The hash pa of the url when this step is active will be `#/step-2`.
    201
    202 You can also use `#step-2` in a link, to point directly to this pa icular step.
    203
    204 Please note, that while `#/step-2` (with slash) would also work in a link it's not recommended.
    205 Using classic `id`-based links like `#step-2` makes these links usable also in fallback mode.
    206
    207 -->
    208 <div class="step slide" data-x="0" data-y="-1500">
    209 <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>
    210 </div>
    211
    212 <div class="step slide" data-x="1000" data-y="-1500">
    213 <q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q>
    214 </div>
    215
    216 <!--
    217
    218 This is an example of step element being scaled.
    219
    220 Again, we use a `data-` a ribute, this time it's `data-scale="4"`, so it means that this
    221 element will be 4 times larger than the others.
    222 From presentation and transitions point of view it means, that it will have to be scaled
    223 down (4 times) to make it back to its correct size.
    224
    225 -->
    226 <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
    227 <span class="try">then you should try</span>
    228 <h1>impress.js<sup>*</sup></h1>
    229 <span class="footnote"><sup>*</sup> no rhyme intended</span>
    230 </div>
    231
    232 <!--
    233
    234 This element introduces rotation.
    235
    236 Notation shouldn't be a surprise. We use `data-rotate="90"` a ribute, meaning that this
    237 element should be rotated by 90 degrees clockwise.
    238
    239 -->
    240 <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
    241 <p>It’s a <strong>presentation tool</strong> <br/>
    242 inspired by the idea behind <a href="h p://prezi.com">prezi.com</a> <br/>
    243
    and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
    244 </div>
    245
    246 <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
    247 <p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
    248 </div>
    249
    250 <!--
    251
    252 And now it gets really exciting! We move into third dimension!
    253
    254 Along with `data-x` and `data-y`, you can de ne the position on third (Z) axis, with
    255 `data-z`. In the example below we use `data-z="-3000"` meaning that element should be
    256 positioned far away from us (by 3000px).
    257
    258 -->
    259 <div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
    260 <p>and <b>tiny</b> ideas</p>
    261 </div>
    262
    263 <!--
    264
    265 This step here doesn't introduce anything new when it comes to data a ributes, but you
    266 should notice in the demo that some words of this text are being animated.
    267 It's a very basic CSS transition that is applied to the elements when this step element is
    268 reached.
    269
    270 At the very beginning of the presentation all step elements are given the class of `future`.
    271 It means that they haven't been visited yet.
    272
    273 When the presentation moves to given step `future` is changed to `present` class name.
    274 That's how animation on this step works - text moves when the step has `present` class.
    275
    276 Finally when the step is le the `present` class is removed from the element and `past`
    277 class is added.
    278
    279 So basically every step element has one of three classes: `future`, `present` and `past`.
    280 Only one current step has the `present` class.
    281
    282 Note: data-x/y/z a ributes, if not de ned, by default will inherit the value of the
    283 previous step. So to get back to 0 on the z-axis, we must set it to 0.
    284 See src/plugins/rel/README.md for more information.
    285
    286 -->
    287 <div id="ing" class="step" data-x="3500" data-y="-850" data-z="0" data-rotate="270" data-scale="6">
    288 <p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an
    in nite canvas</p>
    289 </div>
    290
    291 <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
    292 <p>the only <b>limit</b> is your <b class="imagination">imagination</b></p>
    293 </div>
    294
    295 <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
    296 <p>want to know more?</p>
    297 <q><a href="h p://github.com/impress/impress.js">use the source</a>, Luke!</q>
    298 </div>
    299
    300 <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
    301 <p>one more thing...</p>
    302 </div>
    303
    304
    <!--
    305
    306 And the last one shows full power and exibility of impress.js.
    307
    308 You can not only position element in 3D, but also rotate it around any axis.
    309 So this one here will get rotated by -40 degrees (40 degrees anticlockwise) around X axis and
    310 10 degrees (clockwise) around Y axis.
    311
    312 You can of course rotate it around Z axis with `data-rotate-z` - it has exactly the same e ect
    313 as `data-rotate` (these two are basically aliases).
    314
    315 -->
    316 <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">
    317 <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>
    318 <span class="footnote">* beat that, prezi ;)</span>
    319 </div>
    320
    321 <!--
    322
    323 So to summarize of all the possible a ributes used to position presentation steps, we have:
    324
    325 * `data-x`, `data-y`, `data-z` - they de ne the position of **the center** of step element on
    326 the canvas in pixels; their default value is 0;
    327 * `data-rotate-x`, `data-rotate-y`, 'data-rotate-z`, `data-rotate` - they de ne the rotation of
    328 the element around given axis in degrees; their default value is 0; `data-rotate` and `data-rotate-z`
    329 are exactly the same;
    330 * `data-scale` - de nes the scale of step element; default value is 1
    331
    332 These values are used by impress.js in CSS transformation functions, so for more information consult
    333 CSS transfrom docs: h ps://developer.mozilla.org/en/CSS/transform
    334
    335 -->
    336 <div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
    337 </div>
    338
    339 </div>
    340
    341 <!--
    342 This is a UI plugin. You can read more about plugins in src/plugins/README.md.
    343 For now, I'll just tell you that this adds some graphical controls to navigate the
    344 presentation. In the CSS le you can style them as you want. We've put them bo om right.
    345 -->
    346 <div id="impress-toolbar"></div>
    347
    348 <!--
    349
    350 Hint is not related to impress.js in any way.
    351
    352 But it can show you how to use impress.js features in creative way.
    353
    354 When the presentation step is shown (selected) its element gets the class of "active" and the body element
    355 gets the class based on active step id `impress-on-ID` (where ID is the step's id)... It may not be
    356 so clear because of all these "ids" in previous sentence, so for example when the rst step (the one with
    357 the id of `bored`) is active, body element gets a class of `impress-on-bored`.
    358
    359 This class is used by this hint below. Check CSS le to see how it's shown with delayed CSS animation when
    360 the rst step of presentation is visible for a couple of seconds.
    361
    362 ...
    363
    364
    And when it comes to this piece of JavaScript below ... kids, don't do this at home ;)
    365 It's just a quick and di y workaround to get di erent hint text for touch devices.
    366 In a real world it should be at least placed in separate JS le ... and the touch content should be
    367 probably just hidden somewhere in HTML - not hard-coded in the script.
    368
    369 Just sayin' ;)
    370
    371 -->
    372 <div class="hint">
    373 <p>Use a spacebar or arrow keys to navigate. <br/>
    374 Press 'P' to launch speaker console.</p>
    375 </div>
    376 <script>
    377 if ("ontouchsta " in document.documentElement) {
    378 document.querySelector(".hint").innerHTML = "<p>Swipe le or right to navigate</p>";
    379 }
    380 </script>
    381
    382 <!--
    383
    384 Last, but not least.
    385
    386 To make all described above really work, you need to include impress.js in the page.
    387 I strongly encourage to minify it rst.
    388
    389 In here I just include full source of the script to make it more readable.
    390
    391 You also need to call a `impress().init()` function to initialize impress.js presentation.
    392 And you should do it in the end of your document. Not only because it's a good practice, but also
    393 because it should be done when the whole document is ready.
    394 Of course you can wrap it in any kind of "DOM ready" event, but I was too lazy to do so ;)
    395
    396 -->
    397 <script src="js/impress.js"></script>
    398 <script>impress().init();</script>
    399
    400 <!--
    401
    402 The `impress()` function also gives you access to the API that controls the presentation.
    403
    404 Just store the result of the call:
    405
    406 var api = impress();
    407
    408 and you will get three functions you can call:
    409
    410 `api.init()` - initializes the presentation,
    411 `api.next()` - moves to next step of the presentation,
    412 `api.prev()` - moves to previous step of the presentation,
    413 `api.goto( stepIndex | stepElementId | stepElement, [duration] )` - moves the presentation to the step given by its index number
    414 id or the DOM element; second parameter can be used to de ne duration of the transition in ms,
    415 but it's optional - if not provided default transition duration for the presentation will be used.
    416
    417 You can also simply call `impress()` again to get the API, so `impress().next()` is also allowed.
    418 Don't worry, it wont initialize the presentation again.
    419
    420 For some example uses of this API check the last pa of the source of impress.js where the API
    421 is used in event handlers.
    422
    423 -->
    424
    425 </body>
    426
    </html>
    427
    428 <!--
    429
    430 Now you know more or less everything you need to build your rst impress.js presentation, but before
    431 you sta ...
    432
    433 Oh, you've already cloned the code from GitHub?
    434
    435 You have it open in text editor?
    436
    437 Stop right there!
    438
    439 That's not how you create awesome presentations. This is only a code. Implementation of the idea that
    440 rst needs to grow in your mind.
    441
    442 So if you want to build great presentation take a pencil and piece of paper. And turn o the computer.
    443
    444 Sketch, draw and write. Brainstorm your ideas on a paper. Try to build a mind-map of what you'd like
    445 to present. It will get you closer and closer to the layout you'll build later with impress.js.
    446
    447 Get back to the code only when you have your presentation ready on a paper. It doesn't make sense to do
    448 it earlier, because you'll only waste your time ghting with positioning of useless points.
    449
    450 If you think I'm crazy, please put your hands on a book called "Presentation Zen". It's all about
    451 creating awesome and engaging presentations.
    452
    453 Think about it. 'Cause impress.js may not help you, if you have nothing interesting to say.
    454
    455 -->
    456
    457 <!--
    458
    459 Are you still reading this?
    460
    461 For real?
    462
    463 I'm impressed! Feel free to let me know that you got that far (I'm @ba az on Twi er), 'cause I'd like
    464 to congratulate you personally :)
    465
    466 But you don't have to do it now. Take my advice and take some time o . Make yourself a cup of co ee, tea,
    467 or anything you like to drink. And raise a glass for me ;)
    468
    469 Cheers!
    470
    471 -->
    472
    473

    You might also like