joshua/janus
1
0
Fork 0
mirror of https://github.com/seigler/janus synced 2025-07-27 01:36:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: better example slides

Browse source
This commit is contained in:
Joshua Seigler 2016-10-10 14:02:13 -04:00
parent 59e965047e
commit 22927bfd38
4 changed files with 382 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

44
index.html
View file

@ -7,20 +7,44 @@
</head>
<body>
<main>
<section>
<h1>Presentation Title</h1>
<ul>
<li janus-timeline>Point one</li>
<li janus-timeline>Point two</li>
<li janus-timeline>Point three!</li>
</ul>
<section style="background: linear-gradient(-30deg, black, rebeccapurple)">
<h1>Janus Presentations</h1>
<h2>Hotkey powered, multi-window presentations</h2>
<div>Press <code>Page Down</code> to continue.</div>
</section>
<section>
<section style="background: linear-gradient(-30deg, #400, black)">
<h1>Hotkeys</h1>
<div janus-timeline>
Clone Window: <code>F2</code>
</div>
<div janus-timeline>
Navigation: <code>Page Down</code>, <code>Page Up</code>
</div>
<div janus-timeline>
Toggle Presenter Mode: <code>F1</code>
</div>
</section>
<section style="text-shadow: 0 0 1em black;">
<img class="cover" src="https://placekitten.com/1024/768" alt="" />
<h1>Slide Two</h1>
<h1>Self-scaling cover images with <code>object-fit</code></h1>
</section>
<section style="background: linear-gradient(60deg, #060, black)">
<h1>Simple default markup</h1>
<div>
Any <code>section</code> tag or item with attribute <code>janus-timeline</code> is added to the timeline and revealed in sequence.
</div>
</section>
<section style="background: linear-gradient(-60deg, black, #630)">
<h1>Animations controlled by CSS</h1>
<div>
Framework sets custom attribute <code>janus-timeline</code> to <code>past</code>, <code>present</code>, or <code>future</code>
</div>
</section>
<section style="color: black; background-color: #FA0">
<h1>Cross-window synchronization with JavaScript <code>localStorage</code> events.</h1>
</section>
<section>
<h1>Slide Three</h1>
<h1>The end.</h1>
</section>
</main>
<script type="text/javascript" src="scripts/shortcut.js"></script>