janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pimp the cube demo a bit.

Browse Source 
I always wanted to do it this way. Today finally had some free time to
hack it this weekend.
This commit is contained in:
Henrik Ingo
2021-02-27 14:52:33 +02:00
parent 4c9d2e38aa
commit f68e5fff29
3 changed files with 53 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
examples/cube/index.html
View File

@@ -19,32 +19,47 @@
<div class="step" data-x="0" data-y="0" data-z="350"
data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-4 step-3 step-2 step-5 overview">
<p>Slide one</p>
<p style="position: absolute; top: 240px; left: 240px;">Slides</p>
</div>
<div class="step" data-x="350" data-y="0" data-z="0" data-rotate-y="90"
data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-4 step-3 step-6 step-1 overview">
<p>Slide two</p>
<p style="position: absolute; top: 50px; left: 50px;">In</p>
<p style="position: absolute; bottom: 50px; right: 50px;">3D</p>
</div>
<div class="step" data-x="0" data-y="350" data-z="0" data-rotate-x="-90" data-rotate-z="90"
data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-2 step-5 step-6 step-1 overview">
<p>Slide three</p>
<p style="position: absolute; top: 50px; left: 50px;">Check</p>
<p style="position: absolute; top: 240px; left: 240px;"><a href="https://impress.js.org">impress.js</a></p>
<p style="position: absolute; bottom: 50px; right: 50px;">out</p>
</div>
<div class="step" data-x="0" data-y="-350" data-z="0" data-rotate-x="90" data-rotate-z="-90"
data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-5 step-2 step-6 step-1 overview">
<p>Slide four</p>
<p style="position: absolute; top: 50px; left: 50px;">CSS</p>
<p style="position: absolute; top: 50px; right: 50px;">Positioning</p>
<p style="position: absolute; bottom: 50px; left: 50px;">is</p>
<p style="position: absolute; bottom: 50px; right: 50px;">amazing</p>
</div>
<div class="step" data-x="-350" data-y="0" data-z="0" data-rotate-y="-90" data-rotate-z="-180"
data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-3 step-4 step-6 step-1 overview">
<p>Slide five</p>
<p style="position: absolute; top: 50px; left: 50px;">By</p>
<p style="position: absolute; top: 50px; right: 50px;">hingo</p>
<img src="img/Henrik_mustache.jpg" alt="Henrik Ingo portrait, with mustache" style="position: absolute; top: 275px; left: 275px;">
<p style="position: absolute; bottom: 50px; left: 50px;">bartaz</p>
<p style="position: absolute; bottom: 50px; right: 50px; padding-top: 30px; height: 140px;"><a href="https://github.com/impress/impress.js/graphs/contributors">+70 contributors</a></p>
</div>
<div class="step" data-x="0" data-y="0" data-z="-350" data-rotate-y="-180" data-rotate-z="-180"
data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-3 step-4 step-2 step-5 overview">
<p>Slide six</p>
<p style="position: absolute; top: 50px; left: 50px;">Open</p>
<p style="position: absolute; top: 50px; right: 50px;">Source</p>
<p style="position: absolute; top: 240px; left: 50px;">&amp;</p>
<p style="position: absolute; top: 240px; right: 50px;">HTML</p>
<p style="position: absolute; bottom: 50px; left: 50px;">CSS</p>
<p style="position: absolute; bottom: 50px; right: 50px;">JavaScript</p>
</div>
<div id="overview" class="step" data-x="700" data-y="-100" data-z="1000" data-scale="1" style="pointer-events: none;">