tiny slides

100%

✓ Published0🌍 Public

Last edited Jan 13, 2017

Created on Jan 13, 2017

A tiny slide deck runs entirely in one HTML file. Each slide is a `<section>` element inside the `<main>` tag, with CSS `display:none` hiding all but the first slide. The script listens for `keyup` events and uses `insertAdjacentElement` to move the first or last section to the opposite end of the container, shifting which slide is visible on right or left arrow presses. The presentation wraps around, and the entire implementation—HTML, CSS, and JavaScript—stays under 100 lines, using only the native DOM API and vanilla event listeners.

AI-generated description

Similar vizzes

Loading thumbnail…

Reveal.js Starter

This example presents a minimal slide deck built with Reveal.js, featuring three HTML slides with titles and text in a black theme. Users navigate between slides via arrow keys or the built-in controls, with progress and history tracking enabled. The presentation initializes through the `Reveal.initialize` API with a slide transition, while custom CSS adjusts heading capitalization and image styling. It demonstrates a basic setup for creating interactive presentations using Reveal.js version 4.3.1 from a CDN.

CCurran Kelleher

69% match

Loading thumbnail…

Simple transitioning slides with SVG and D3

This example demonstrates a slide-based presentation system built with D3.js and SVG, where each slide is defined by a rectangle with an ID like "slide_1" or "slide_2.5" in an Inkscape-created SVG file. The script sorts slides by their numeric IDs and transitions between them by animating the SVG viewBox with a 1.5-second duration, using keyboard controls (arrow keys, Home, End) or touch gestures. Each slide exposes scale_x and scale_y functions that map a normalized [0,1000] domain to the slide's pixel boundaries, enabling easy placement of interactive elements—here a bouncing steelblue circle on slide 3. The visualization also supports panning and zooming via mouse drag and mousewheel, with zoom anchored to the cursor position. This example demonstrates a simple, flexible approach to building slide-based presentations from SVG files.

ZZJONSSON

68% match

Loading thumbnail…

Gist b4bdcd5422cc8c12b97fac3776955cb2

This animated presentation showcases a slide deck within Mozilla Hubs, a virtual reality environment, using Three.js and AFRAME to load and position image-based slides in 3D space. The slides, sourced from Unsplash and Twitter, display content about the author’s work with the European Parliament, UNICEF, and Hubs scripting. A custom `slides` object controls navigation via `nextSlide()`, scaling the active slide, and can auto-advance or drop all content using `startAutoPresent()` and `dropAllContent()`. The `media-loader` and `networked` components handle asset loading and sharing in the scene.

UUtopiah

68% match

Loading thumbnail…

Gist 85f76a1d46b0309fd975

This example presents a slide deck on HTML5 adoption for an internal IT presentation. It covers HTML5 elements, form enhancements, and new attributes such as `autofocus`, `input type="date"`, `datalist`, and the `dialog` element. The content includes code snippets for JavaScript and HTML, and references live samples like a CodePen demo. It explains how HTML5 simplifies validation and input controls compared to older JavaScript-heavy approaches.

MMiyaton

67% match

Loading thumbnail…

A dependency-free Vanilla JS drawer

An interactive HTML page demonstrates a slide-out drawer controlled by custom JavaScript, with no external libraries. The drawer slides in from the right side using CSS transform transitions, triggered by an anchor link and closed via a button or overlay click. The content uses placeholder text, while the structure relies on data attributes and semantic markup. The example showcases a pure HTML/CSS/JavaScript approach for creating accessible UI components without frameworks.

Rrickyphula

66% match

Loading thumbnail…

Gist 3ea15e735c876056ba750785a7ef8362

This example presents a slide deck titled "DH-talk," formatted as a Google Slides presentation. It uses the reveal.js framework to render HTML-based slides, with content drawing from a Gist repository. The presentation focuses on digital humanities topics, and its visualizations are constructed through the `d3.js` library, including `d3.forceSimulation` for network layouts and `d3.geoPath` for geographical mapping. The code demonstrates how to embed interactive charts directly within the slide framework, merging narrative with data-driven graphics for an educational talk.

CCliffordAnderson

65% match

Loading thumbnail…

Talkie.js - HTML/CSS/JavaScript Presentation Library

This example demonstrates Talkie.js, an HTML/CSS/JavaScript presentation library that renders slides from Markdown templates. It shows features like code highlighting with Highlight.js, responsive scaling, fullscreen and pointer modes, and custom key bindings using RxJS observables. The presentation includes Japanese text, backface images with CSS filters, and presenter notes logged to the console via the library’s `changed` and `notes` APIs.

Aaaizemberg

65% match

Loading thumbnail…

Odyssey.js Slides

An interactive slide deck uses Odyssey.js to present a sequence of map-based story slides, with a CartoDB basemap and optional CartoDB layers loaded from a `vizjson` URL. The story advances through sequential triggers, responding to keyboard arrow keys and on-screen next/prev buttons, while a dot progress indicator tracks the current slide. The code also adapts slide layout to window resizing and adjusts the basemap’s tile URL when the global `baseurl` changes, relying on Leaflet and CartoDB’s JavaScript library for map rendering.

Aandrewxhill

65% match