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

53
examples/cube/css/cube.css
View File

@@ -1,5 +1,29 @@
@import url(fonts.css);
/* Specific to this presentation */
div.step p {
border: solid 2px black;
border-radius: 120px;
width: 170px;
height: 110px;
text-align: center;
padding-top: 65px;
background-color: black;
color: white;
}
div.step img {
border: solid 2px black;
border-radius: 120px;
width: 170px;
height: 170px;
text-align: center;
background-color: black;
color: white;
}
/* Fallback message */
@@ -62,16 +86,6 @@ body {
border: none;
box-shadow: none;
}
/*
Make inactive steps a little bit transparent.
*/
.impress-enabled .step {
margin: 0;
opacity: 0.7;
transition: opacity 1s;
}
.impress-enabled .step.active { opacity: 1 }
h1,
h2,
@@ -102,21 +116,18 @@ code {
a {
color: inherit;
text-decoration: none;
padding: 0 0.1em;
background: rgba(200,200,200,0.2);
text-shadow: -1px 1px 2px rgba(100,100,100,0.9);
border-radius: 0.2em;
border-bottom: 1px solid rgba(100,100,100,0.2);
border-left: 1px solid rgba(100,100,100,0.2);
transition: 0.5s;
color: #ddd;
text-decoration: underline;
}
a:hover,
a:focus {
background: rgba(200,200,200,1);
text-shadow: -1px 1px 2px rgba(100,100,100,0.5);
padding: 0 0.1em;
background: rgba(200,200,200,0.2);
border-radius: 0.2em;
border-bottom: 1px solid rgba(100,100,100,0.2);
border-left: 1px solid rgba(100,100,100,0.2);
}
blockquote {
@@ -146,4 +157,4 @@ strike {
small {
font-size: 0.4em;
}
}

BIN
examples/cube/img/Henrik_mustache.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

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;">