Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/remy/present
A(nother) JavaScript Presentation Library
https://github.com/remy/present
Last synced: 14 days ago
JSON representation
A(nother) JavaScript Presentation Library
- Host: GitHub
- URL: https://github.com/remy/present
- Owner: remy
- Created: 2010-10-12T19:15:39.000Z (almost 14 years ago)
- Default Branch: master
- Last Pushed: 2011-08-18T13:00:08.000Z (about 13 years ago)
- Last Synced: 2024-06-22T22:04:46.329Z (3 months ago)
- Language: JavaScript
- Homepage: http://jsbin.com/oxohev/7
- Size: 152 KB
- Stars: 25
- Watchers: 5
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# present.js
A(nother) custom JavaScript presentation script. I wrote this inspired by [slides.html5rocks.comπ](http://slides.html5rocks.com/) - but (a) didn't like the complexity in the script (obviously because those guys are doing a lot more than I needed to do) and (b) didn't like the navigation handling (back, forward, key controls, etc.).
Also - this all my own code, nothing pinched - I swear guvna!
Here's a simple example you can play with: [present.js demo](http://jsbin.com/oxohev/edit#html,live)
# Features
- Automatic sizing to browser window
- Supports predefined sizes
- Animated scrolling between slides can be enabled or disabled
- Linear view
- Full browser navigation supported (i.e. back and forward buttons)
- Permalinks - so you can jump to specific slide
- Doesn't *just* work in Chrome!
# Usage
Include present library:
And you're ready to write your slides:
The code is optimised for Chrome - simply because that's the browser I'm using right now, but it does also work in Firefox, Safari and Opera (though Opera doesn't currently support the CSS3 flex box model - so the content is in a odd place right now).
Both keyboard and touch navigation allow you to move through the presentation: up/left, down/right, space/shift+space - for back and forth. Touch on the left side of the screen for back and right side for forward.
## Linear view
Press 't' to toggle between the linear view and the "slide" view. This should make it easier to skim through quickly if you're after something specific.
Currently there's no print styles - that should be added and will look similar to the linear view.
## Resizing presentation
By default present.js will size to your window size. Alternatively you can specify a width and height:
present.resizeTo(800, 600); // 800x600
## Enabling animated scroll
By default there's no animation to transition from one slide to the next. To do so, add the classname 'scroll' to the body element:
# Creating slides
Any element with a classname of "slide" will be read in as a slide. Typically this would be a `div` or perhaps a `section`:
The slide is automatically assigned an id which can be referenced in the URL. If the slide has an id on it already, that will be used instead.
## Headings
An `h1` will sit firmly in the middle of the slide and is useful for slides containing only that content. Alternatively a `header` element will be put at the top of the slide for your content to sit inside.
The text for the `h1`, `header` or other heading element is used for the slide title, which is displayed in the browser's title bar.
## Revealing individual blocks
If you want to reveal individual items on a slide, such as a list or some images, you can use the classname 'reveal':
Putting the reveal class on a `ul` or `ol` will automatically apply the reveal class to the `li` elements inside the list. If you wanted to start with the first `li` visible and reveal the subsequent items, you need to class the `li`s manually:
## Realing with a fade
Elements with a reveal class are hidden using the following style:
visibility: hidden;
opacity: 0;
Adding a classname of 'fade' to the reveal element will animate the opacity on reveal (using CSS3 transitions).
## The current item revealed
Out of all the elements with a reveal class on the slide, the *current* item being revealed will have a classname of 'current'. You can use this to style the element different if you wanted.