/
githubmirror
/
impress.js
Обзор
Документация
Войти
/
githubmirror
/
impress.js
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
examples/2D-navigation/index.html
236 строк
8 KB
Meng Weng Wong
New "bookmark" plugin allows hotkey fast-travel to specific steps (#852)
01 ноя 2023, 02:13
Не верифицирован
01 ноя 2023, 02:13
d0ba7ff
Код
Авторство
О чём код?
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Desserts (2D navigation demo)</title> <meta name="description" content="2D navigation demo" /> <meta name="author" content="Henrik Ingo" /> <link href="../../css/impress-common.css" rel="stylesheet" /> <link href="css/presentation.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> <!-- Some images that are fixed to background in the css --> <img id="applepie-image" class="bg" src="images/6296334551_b3d5c27823_b.png"> <img id="icecream-image" class="bg" src="images/35535918670_f1d12627ff_o.png"> <img id="crisps-image" class="bg" src="images/6636957665_5e7c4a79de_o.png"> <div id="impress" data-transition-duration="1000"> <div class="step" data-scale="2" data-x="-500" data-y="-500"> <h1>2D navigation</h1> <ul> <li>Impress.js allows you to layout your presentation in a 3D space</li> <li><a href="https://github.com/impress/impress.js/tree/master/src/plugins/goto">The goto plugin</a> allows you to specify non-linear navigation!</li> <li>This demo can be navigated by <ul> <li>continuously pressing Space</li> <li>continuously pressing Right Arrow</li> <li>continuously pressing Down Arrow</li> <li>(or freely, pressing Up, Down, Right, Left as you choose)</li> </ul> <li>It's up to you to decide which is the better structure</li> </li> </div> <div id="bm0" class="step" data-scale="1" data-rel-x="1500" data-rel-y="0" data-bookmark-key-list="0"> <h1>Using bookmark hotkeys</h1> <ul> <li><a href="https://github.com/impress/impress.js/tree/master/src/plugins/bookmark">The bookmark plugin</a> also allows you to specify non-linear navigation, in a different way.</li> <li>This demo can <em>also</em> be navigated by <ul> <li>pressing 1 2 3 4 5 6 7 8 9 to fast travel directly</li> <li>pressing J J J, K K K, L L L to cycle vertically</li> <li>pressing U U U, I I I, O O O to cycle horizontally</li> <li>pressing Z or [ to zoom out to the full view</li> <li>pressing 0 to come back to this text</li> </ul> </li> <li>It's up to you to decide which is the better structure</li> </ul> </div> <div id="contents" class="step" data-rel-x="0" data-rel-y="1500" data-scale="1" data-bookmark-key-list="w" > <h1>Choosing a treat</h1> <ul> <li>You can choose your preferred treat from: <ul> <li>Ice cream</li> <li>Crisps</li> <li>Apple pie</li> </ul> </li> <li>We will make a structured pro's & con's analysis to arrive at a conclusion</li> </ul> </div> <!-- Ice cream slides (3) --> <div id="icecream" class="step" data-x="2000" data-y="2000" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-next-list="contents icecream-pro contents crisps" data-bookmark-key-list="7 u j" > <h1>Ice cream</h1> <ul> <li>Cold</li> <li>Creamy</li> <li>Vanilla or flavored</li> <li>Caramel sauce, jams & other toppings</li> </ul> </div> <div id="icecream-pro" class="step" data-rel-x="0" data-rel-y="1000" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-next-list="icecream icecream-con applepie crisps-pro" data-bookmark-key-list="4 i j" > <h1>Ice cream: Pro's</h1> <ul> <li>Great for dessert or snack</li> <li>Great in the Summer</li> </ul> </div> <div id="icecream-con" class="step" data-rel-x="0" data-rel-y="1000" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-next-list="icecream-pro crisps applepie-pro crisps-con" data-bookmark-key-list="1 o j" > <h1>Ice cream: Con's</h1> <ul> <li>Not so great in the Winter</li> <li>If you're allergic to lactose/milk</li> <li>Diet alternatives are not real ice cream</li> </ul> </div> <!-- Crisps slides (3) --> <div id="crisps" class="step" data-x="3500" data-y="2000" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-next-list="icecream-con crisps-pro icecream applepie" data-bookmark-key-list="8 u k" > <h1>Crisps</h1> <ul> <li>Potatoes fried in oil and salted</li> <li>Various flavors</li> <li>Dips</li> <li>Can be used as ingredient in subs (Cliff Huxtable style)</li> </ul> </div> <div id="crisps-pro" class="step" data-rel-x="0" data-rel-y="1000" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-next-list="crisps crisps-con icecream-pro applepie-pro" data-bookmark-key-list="5 i k" > <h1>Crisps: Pro's</h1> <ul> <li>Simple yet tasty concept</li> <li>Great for snack</li> <li>Salty / spicy (not sweet)</li> <li>Finger food</li> <li>Diet alternatives are often ok</li> </ul> </div> <div id="crisps-con" class="step" data-rel-x="0" data-rel-y="1000" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-next-list="crisps-pro applepie icecream-con applepie-con" data-bookmark-key-list="2 o k" > <h1>Crisps: Con's</h1> <ul> <li>Commonly not used as dessert</li> <li>Not sweet</li> </ul> </div> <!-- Apple pie slides (3) --> <div id="applepie" class="step" data-x="5000" data-y="2000" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-next-list="crisps-con applepie-pro crisps icecream-pro" data-bookmark-key-list="9 u l" > <h1>Apple pie</h1> <ul> <li>Apple's in a pie</li> <li>Many recipes exist. (Grandma's is the best.)</li> <li>Vanilla sauce or cream on top</li> </ul> </div> <div id="applepie-pro" class="step" data-rel-x="0" data-rel-y="1000" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-next-list="applepie applepie-con crisps-pro icecream-con" data-bookmark-key-list="6 i l" > <h1>Apple pie: Pro's</h1> <ul> <li>Great for dessert</li> <li>Or just with a cup of tea or glass of milk</li> <li>Best when warm</li> </ul> </div> <div id="applepie-con" class="step" data-rel-x="0" data-rel-y="1000" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-next-list="applepie-pro conclusion crisps-con conclusion" data-bookmark-key-list="3 o l" > <h1>Apple pie: Con's</h1> <ul> <li>I'm allergic to apple (but a small slice is worth it)</li> <li>Not finger food</li> </ul> </div> <div id="conclusion" class="step" data-rel-x="1000" data-rel-y="1000" data-bookmark-key-list="q" > <h1>Conclusion</h1> <p>Can I choose all three ;-)</p> <p style="font-size: small; position: absolute; bottom: 30px; left: 300px;" id="image-credits" >Image credits: <a href="https://www.flickr.com/photos/reimagingerica/35535918670">reimagingerica@Flickr</a>, <a href="https://www.flickr.com/photos/mixedmolly/6636957665">mixedmolly@Flickr</a>, <a href="https://www.flickr.com/photos/stevepj2009/6296334551">stevepj2009@Flickr</a> </p> </div> <div id="overview" class="step" data-x="3000" data-y="2000" data-scale="9" style="pointer-events: none;" data-bookmark-key-list="z [" > </div> </div> <div id="impress-toolbar"></div> <div class="impress-progressbar"><div></div></div> <div class="impress-progress"></div> <div id="impress-help"></div> <script type="text/javascript" src="../../js/impress.js"></script> <script>impress().init();</script> </body> </html>