Sichtreise / Tutorials  / HTML & PHP  / impress  / Impress.js für eigene Präsentationen

Impress.js für eigene Präsentationen

[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]Der Body-Bereich[/custom_headline]

Der Body gliedert sich in 3 Teile. In erster Linie um einen Hinweis, falls Impress.js in dem verwendeten Browser nicht dargestellt werden kann:
[code]<body class=”impress-not-supported”>

For example this fallback message is only visible when there is impress-not-supported class on body.
<div class=”fallback-message”>
<p>Your browser <b>doesn’t support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>[/code] Als nächstes der Impress.js DIV Container, der ALLE Folien beinhaltet und sich über mehrere Zeilen strecken kann. Wir behandeln diesen Part in einem separaten Artikel, damit es möglichst übersichtlich bleibt:
[code]<div id=”impress”>
</div>[/code] Und am Ende kommen noch Hinweise zur Benutzung (optional)

Hint is not related to impress.js in any way.

But it can show you how to use impress.js features in creative way.

When the presentation step is shown (selected) its element gets the class of “active” and the body element
gets the class based on active step id impress-on-ID (where ID is the step’s id)… It may not be
so clear because of all these “ids” in previous sentence, so for example when the first step (the one with
the id of bored) is active, body element gets a class of impress-on-bored.

This class is used by this hint below. Check CSS file to see how it’s shown with delayed CSS animation when
the first step of presentation is visible for a couple of seconds.

And when it comes to this piece of JavaScript below … kids, don’t do this at home 😉
It’s just a quick and dirty workaround to get different hint text for touch devices.
In a real world it should be at least placed in separate JS file … and the touch content should be
probably just hidden somewhere in HTML – not hard-coded in the script.

Just sayin’ 😉

<div class=”hint”>
<p>Use a spacebar or arrow keys to navigate</p>
if (“ontouchstart” in document.documentElement) {
document.querySelector(“.hint”).innerHTML = “<p>Tap on the left or right to navigate</p>”;
</script>[/code] Sowie die Einbindung der JavaScript Datei, die Impress.js überhaupt ermöglicht:

Last, but not least.

To make all described above really work, you need to include impress.js in the page.
I strongly encourage to minify it first.

In here I just include full source of the script to make it more readable.

You also need to call a impress().init() function to initialize impress.js presentation.
And you should do it in the end of your document. Not only because it’s a good practice, but also
because it should be done when the whole document is ready.
Of course you can wrap it in any kind of “DOM ready” event, but I was too lazy to do so 😉

<script src=”js/impress.js”></script>


The impress() function also gives you access to the API that controls the presentation.

Just store the result of the call:

var api = impress();

and you will get three functions you can call:

api.init() – initializes the presentation, – moves to next step of the presentation,
api.prev() – moves to previous step of the presentation,
api.goto( idx | id | element, [duration] ) – moves the presentation to the step given by its index number
id or the DOM element; second parameter can be used to define duration of the transition in ms,
but it’s optional – if not provided default transition duration for the presentation will be used.

You can also simply call impress() again to get the API, so impress().next() is also allowed.
Don’t worry, it wont initialize the presentation again.

For some example uses of this API check the last part of the source of impress.js where the API
is used in event handlers.

–>[/code] Am Ende wird klarerweise die HTML Datei beendet… wer noch weiter runterscrollt bekommt übrigens ein paar Tipps vom Entwickler (die ich hier aber nicht einbinde)
</html>[/code] Soweit so gut.
Dann sehen wir uns nun einmal an, was wir in dem “impress”-DIV Container genau haben, denn er ist der Schlüssel auf dem Weg zu unserem Ziel: Impress.js – Folienaufbau

[content_band class=”center-text” no_margin=”true” inner_container=”true” border=”vertical” bg_color=”#fff”] [container] [column type=”1/1″ last=”true” fade=”true” fade_animation=”in”] [gap size=”1%”]

[icon type=”thumbs-up”] Notiz am Rande: Wenn ein Artikel gefällt, dann empfehle ihn doch bitte weiter. Nichts macht mehr Spaß, wenn man sieht, dass die Arbeit auch durch Liken & Sharen ein wenig Anerkennung findet. Liken & Sharen – eine bessere kostenlose Anerkennung gibt es nicht 😉

[gap size=”1%”] [share title=”Liken & Sharen” facebook=”true” twitter=”true” google_plus=”true” pinterest=”true” email=”true”] [/column] [/container] [/content_band] [custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]Weitere Beiträge[/custom_headline] [recent_posts count=”4″ category=”impress”]

Post a Comment