impress/impress.js

Another impress.js example

mierzejk opened this issue · 3 comments

Another impress.js example featuring 3D transition effect can be added to the Examples and demos Wiki page, if you wish: Spójna wiedza o klientach generatorem korzyści by Krzysztof Mierzejewski (myself).

That's some cool use of 3D. How did you create it?

I added it to wiki. Thanks.

@henrikingo It created the presentation over two years ago, so I cannot recall every detail. But I do remember I was looking for a framework I could easily apply company branding, and with impressj.js I found it really effortless (pun intended). As regards 3D effects, I can think of myself calculating shape (slide) positions with a pen, piece of paper and calculator computing trigonometric functions. But it was not so great burden once you reminisced about geometry primer you were taught in the school.

Wow, that's pretty strong math from you! I ended up creating https://github.com/henrikingo/impressionist because I felt doing 3D coordinates in my head was too hard. Impressionist isn't generally useful as an editor yet, but I did use it a couple times just to navigate the 3D space and then copied the coordinates to a real presentation I did by writing HTML.

I also learned that some 3D angles weren't possible to reach, so I added the data-rotate-order="xyz" attribute to unlock all possible rotations:

<div id="step-2" class="step" data-x="420" data-y="-70" data-z="-250" data-rotate-z="45" data-rotate-y="-45" data-rotate-order="zyx">