Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Readme

  • Loading branch information...
commit fc9c728f290839d71e035014eb951d758092b567 1 parent 3aefe14
Cobalys authored
Showing with 5 additions and 70 deletions.
  1. +0 −65 README.rst
  2. +5 −5 src/jquery.jzoopraxiscope.js
65 README.rst
View
@@ -1,65 +0,0 @@
-JZoopraxiscope
-==============
-**Animate static image sequenses with this jQuery plugin.**
-
-JZoopraxiscope is a jQuery plugin for animations from static images. It is inspired in Eadweard Muybridge's Zoopraxiscope.
-
-
-Requierements
--------------
-* JQuery
-* JQuery UI
-* An image representing the sequese to be animated
-
-
-Use
----
-
-1. Download JZoopraxiscope and link the jquery.jzoopraxiscope.js file in your page::
- <script src="jquery.jzoopraxiscope.js"></script>
-
-
-2. Link the jQuery and jQuery UI libraries in 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 sequense. Every frame must have the same width and be attached to his previous frame in a horizontal image. Refer to the included file 'media/jzoo.jpg'
-
-+------------+------------+------------+------------+
-| Frame 1 | Frame 2 | Frame 3 | Frame 4 |
-+------------+------------+------------+------------+
-
-*Horizontal image*
-
-
-4. 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.
-
-
-5. Initialize a div with JZoo (#animation)::
- <div id="animation" style="border: 1px solid #999; margin: auto;"></div>
-
-Javascript code::
- $('#animation').jzoopraxiscope(optionsAnimation);
-
-
-6. Control JZoo::
- //Play the animation
- $('#animation').jzoopraxiscope('play');
-
- //Stop the animation
- $('#animation').jzoopraxiscope('stop');
10 src/jquery.jzoopraxiscope.js
View
@@ -30,7 +30,7 @@
'background-repeat' : 'repeat',
'background-position' : '0 0',
'background-attachment' : 'scroll',
- 'box-shadow' : 'inset 0 0 40px #000000',
+ 'box-shadow' : 'inset 0 0 40px #000000'
});
$this.data('jzoopraxiscope', {
playing : false,
@@ -52,13 +52,13 @@
if(!data.playing) {
data.playing = true;
$this.animate({
- backgroundPosition : data.fadePosition,
+ backgroundPosition : data.fadePosition
}, 7000, 'easeInQuint', function() {
data.timer = setInterval(animationLoop, 50);
});
animationLoop = function() {
$this.animate({
- backgroundPosition : data.position,
+ backgroundPosition : data.position
}, 1, 'linear', function() {
data.position = data.position - data.widthItem;
if(data.position < -data.widthImage) {
@@ -77,11 +77,11 @@
clearInterval(data.timer);
$this.stop(true);
$this.animate({
- backgroundPosition : data.fadePosition,
+ backgroundPosition : data.fadePosition
}, 7000, 'easeOutQuint', function() {
data.playing = false;
$this.css({
- 'background-position' : '0px',
+ 'background-position' : '0px'
});
});
}
Please sign in to comment.
Something went wrong with that request. Please try again.