All Projects → LeaVerou → Inspire.js

LeaVerou / Inspire.js

Licence: mit
Lean, hackable, extensible slide deck framework. Previously known as CSSS.

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to Inspire.js

markdown-slides
Using markdown, write simple but beautiful presentations with math, animations and media.
Stars: ✭ 64 (-96.1%)
Mutual labels:  slideshow, presentation, slidedeck
s6
S6 Blank - Slideshow templates using HTML 5, CSS 3 'n' JavaScript 2017+ w/ Bespoke.js-compatible "microkernel"
Stars: ✭ 91 (-94.45%)
Mutual labels:  slideshow, presentation
Patat
Terminal-based presentations using Pandoc
Stars: ✭ 1,725 (+5.25%)
Mutual labels:  presentation, slideshow
Godot Power Pitch
International pitch for the Godot Game Engine, made in Godot, available in 15+ languages
Stars: ✭ 348 (-78.77%)
Mutual labels:  presentation, slideshow
Vue Slides
Present with Vue
Stars: ✭ 240 (-85.36%)
Mutual labels:  presentation, slideshow
inkslides
A rewrite of the inkscapeslide script to create PDF presentations out of inkscape SVG files.
Stars: ✭ 24 (-98.54%)
Mutual labels:  slideshow, presentation
Big
presentations for busy messy hackers
Stars: ✭ 3,208 (+95.73%)
Mutual labels:  presentation, slideshow
Backslide
💦 CLI tool for making HTML presentations with Remark.js using Markdown
Stars: ✭ 679 (-58.57%)
Mutual labels:  presentation, slideshow
Nodeppt
This is probably the best web presentation tool so far!
Stars: ✭ 9,589 (+485.05%)
Mutual labels:  presentation, slideshow
Videoshow
Simple node.js utility to create video slideshows from images with optional audio and visual effects using ffmpeg
Stars: ✭ 618 (-62.29%)
Mutual labels:  presentation, slideshow
Libreoffice Impress Templates
Freely-licensed LibreOffice Impress templates
Stars: ✭ 238 (-85.48%)
Mutual labels:  presentation, slideshow
Remark Boilerplate
A boilerplate to create presentations using remark, Gulp, Stylus and more.
Stars: ✭ 41 (-97.5%)
Mutual labels:  presentation, slideshow
TW-Tamasha
Presentation and slideshow app using web technology based onTiddlywiki
Stars: ✭ 28 (-98.29%)
Mutual labels:  slideshow, presentation
React Presents
React slideshow framework
Stars: ✭ 454 (-72.3%)
Mutual labels:  presentation, slideshow
Showoff
Don't just present; interact with your audience!
Stars: ✭ 879 (-46.37%)
Mutual labels:  presentation, slideshow
Xaringan
Presentation Ninja 幻灯忍者 · 写轮眼
Stars: ✭ 1,129 (-31.12%)
Mutual labels:  presentation, slideshow
Glitchslideshow
A slideshow that uses a CSS glitch effect for slide transitions.
Stars: ✭ 93 (-94.33%)
Mutual labels:  slideshow
Embla Carousel
A lightweight carousel library with fluid motion and great swipe precision.
Stars: ✭ 1,874 (+14.34%)
Mutual labels:  slideshow
Spectacle
ReactJS based Presentation Library
Stars: ✭ 9,106 (+455.58%)
Mutual labels:  presentation
Dablin
DAB/DAB+ receiver for Linux (including ETI-NI and EDI AF playback)
Stars: ✭ 81 (-95.06%)
Mutual labels:  slideshow

Inspire.js

Lean, hackable, extensible slide deck framework. Create basic slides by just writing HTML and CSS, do fancy custom stuff with JS, the sky is the limit!

Previously known as CSSS.

If you were using CSSS and would rather stay at it, run git checkout v1.0.0 and stay there.

Migrating from CSSS

  • Almost all HTML syntax is the same! The same JS events are still fired. So, very little should break.
  • slideshow.css is now inspire.css
  • slideshow.js is now inspire.js
  • You don't need to run JS to create a slideshow, it is created automatically.
  • The SlideShow JS class is now Inspire
  • The slideshow JS variable is now Inspire
  • Presenter view will not be loaded unless there is at least one class="presenter-notes" item.
  • The CSS Controls plugin is now gone. Use Mavo if you need this functionality.
  • The CSS Snippets plugin is now gone. We will soon add a much better one, extracted based on the live demo script in https://github.com/leaverou/talks.
  • Incrementable is no longer a plugin. Use the separate script from https://github.com/leaverou/incrementable.
  • reusable.css has now been merged into the default theme, theme.css.
  • data-import is now data-insert

API FAQ

Running code after any imports have loaded

await Inspire.importsLoaded;
// code to run after imports have loaded

Note that await needs to be inside an async function otherwise it will error. However, this could just be a self-executing async function.

Running code after a specific plugin has loaded

await Inspire.importsLoaded;
await Inspire.pluginsLoaded.PLUGIN_ID.loaded;
// code to run after the plugin with id PLUGIN_ID has loaded and executed

or:

await Inspire.loadPlugin(PLUGIN_ID);
// code to run after the plugin with id PLUGIN_ID has loaded and executed

The second example would load the plugin if it hasn't otherwise been loaded, but if it will never be loaded twice.

Running code when a specific slide is displayed

You can do this via the slidechange hook:

Inspire.hooks.add("slidechange", env => {
	if (Inspire.currentSlide.id === "slide-id") {
		// Code to run
	}
});

or, via an event:

document.addEventListener("slidechange", evt => {
	if (Inspire.currentSlide.id === "slide-id") {
		// Code to run
	}
});

Running code when a specific slide is displayed for the first time

You can do this via the slidechange hook:

Inspire.hooks.add("slidechange", env => {
	if (Inspire.currentSlide.id === "slide-id" && env.firstTime) {
		// Code to run
	}
});

or, via an event:

document.addEventListener("slidechange", evt => {
	if (Inspire.currentSlide.id === "slide-id" && evt.firstTime) {
		// Code to run
	}
});

Running code after a specific slide has been displayed

You can do this via the slidechange hook:

Inspire.hooks.add("slidechange", env => {
	if (env.prevSlide.id === "slide-id") {
		// Code to run
	}
});

or, via an event:

document.addEventListener("slidechange", evt => {
	if (evt.prevSlide.id === "slide-id") {
		// Code to run
	}
});
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].