Skip to content

A jQuery plugin for animations from static images. It is inspired in Eadweard Muybridge's Zoopraxiscope.

License

Unknown, GPL-3.0 licenses found

Licenses found

Unknown
LICENSE
GPL-3.0
GPL-LICENSE
Notifications You must be signed in to change notification settings

jon-moreira/JZoopraxiscope

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Serge G. Spaolonzi
Jul 30, 2012
ef81aab · Jul 30, 2012

History

19 Commits
Jul 30, 2012
Jul 19, 2012
Jul 19, 2012
Apr 14, 2012
Apr 14, 2012
Apr 14, 2012
Apr 14, 2012
Apr 14, 2012
Jul 30, 2012

Repository files navigation

JZoopraxiscope

http://www.cobalys.com/open-source/jzoopraxiscope.html https://github.com/cobalys/JZoopraxiscope

Animate static image sequences with this jQuery plugin.

JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge's Zoopraxiscope.

Requirements

  • JQuery
  • JQuery UI
  • An image representing the sequence to be animated

Browser Compatibility

  • Chrome 18.0.1025.162
  • Mozilla Firefox 11.0
  • Internet Explorer 8
  • Safari 5
  • Opera 11.62

Use

  1. Download JZoopraxiscope and reference the jquery.jzoopraxiscope.js file in your page.

     <script src="jquery.jzoopraxiscope.js"></script>
    
  2. Reference jQuery and jQuery UI libraries from your page

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
    
  3. Prepare the static sequence. Every frame must have the same width and be attached to his previous frame in a horizontal image. Refer to the included file 'jzoo.jpg'

+------------+------------+------------+------------+
|  Frame 1   |  Frame 2   |  Frame 3   |  Frame 4   |
+------------+------------+------------+------------+
  1. Define the options

     	var optionsAnimation = {
     		'widthItem' : 380,
     		'widthImage' : 4560,
     		'height' : 306,
     		'image' : 'images/jzoo.jpg'}
    

    widthItem: Width of every frame.
    widthImage: Width of the entire image.
    height: Height of the image.
    image: Location of the image. Use relative or absolute path, relative paths are related to the html document where the plugin is installed.

  2. Initialize a div with JZoo (#animation)

     //Html
     <div id="animation" style="border: 1px solid #999; margin: auto;"></div>
    
     //Javascript
     $('#animation').jzoopraxiscope(optionsAnimation);
    
  3. Control JZoo

     //Play the animation
     $('#animation').jzoopraxiscope('play');
     
     //Stop the animation
     $('#animation').jzoopraxiscope('stop');
    

About

A jQuery plugin for animations from static images. It is inspired in Eadweard Muybridge's Zoopraxiscope.

Resources

License

Unknown, GPL-3.0 licenses found

Licenses found

Unknown
LICENSE
GPL-3.0
GPL-LICENSE

Stars

Watchers

Forks

Packages

No packages published