Skip to content

Moerphy/dizzy.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

dizzy.js

dizzy.js enables you to create non-linear presentations similiar to
Prezi, without using Flash or some other proprietary technology.

For a quick start, try using presenter.html, appending the path of one of the examples as the URL hash.
(Example: <file:///home/erlehmann/src/dizzy.js/presenter.html#examples/upside-down-zoom.svg>)

Usage

SVG

Dizzy makes extensive use of SVG groups. First, “slides” are groups with the class “group” and one or more class “group_n”, where n is a positive integer signifying the position of the “slide” in the presentation. Second, all “slides” have to be in one SVG group with the id “canvas”.

To impress the audience properly, SVG transformations should be applied to the “slide” groups.

Javascript

Just create a new Dizzy object and pass a selector for a dom node thats used as container.
var dizz = new Dizzy(‘#dizzy’);
You can also pass options to the Dizzy() function. See the wiki for a description of all options.
var dizz = new Dizzy(‘#dizzy’, {pannable: true, transformTime: 1000});
Afterwards you can load a new SVG-file with:
dizz.load(‘./file.svg’);
optional pass a callback:
dizz.load(‘./file.svg’,
function(){ // gets executed once file.svg has been loaded.
dizz.show(0); // display canvas untransformed.
} );

To navigate through the presentation just call the methods next(), previous() or show(n) on the dizzy object.

Browser support

See Browser support in the wiki

To do

- Bugfixing
- Zooming and panning
- moar jQuery
- More tools in editor (draw lines, circles, frames..)

License

dizzy.js is licensed under the terms of the MIT License, see “LICENSE” file in repository.

About

Prezi-like Presentations without Flash, using SVG and Javascript

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published