/
githubmirror
/
impress.js
Обзор
Документация
Войти
/
githubmirror
/
impress.js
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
examples/cube/index.html
76 строк
4 KB
Falco Nogatz
Replace backslashes by slashes in href to CSS (#828)
12 дек 2022, 04:03
Не верифицирован
12 дек 2022, 04:03
64d66bf
Код
Авторство
О чём код?
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Cube | Explore impress.js in 3D | by Henrik Ingo @henrikingo</title> <meta name="description" content="Explore impress.js in 3D" /> <meta name="author" content="Henrik Ingo" /> <link href="../../css/impress-common.css" rel="stylesheet" /> <link href="css/cube.css" rel="stylesheet" /> </head> <body class="impress-not-supported"> <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> <div id="impress" data-transition-duration="2000"> <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 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 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 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 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 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 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;">&</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;"> </div> </div> <div id="impress-toolbar"></div> <div id="impress-help"></div> <script type="text/javascript" src="../../js/impress.js"></script> <script>impress().init();</script> </body> </html>