JZoopraxiscope – это jQuery-плагин, разработанный под впечатлением вдохновения, вызванного первым пленочным проектором Zoopraxiscope. Назначение JZoopraxiscope - создание анимированного изображения из списка изображений статичных, для чего здесь используется jQuery и jQuery UI. Вся работа JZoopraxiscope заключена в вызове простой функции, в которой мы указываем расширение изображений и кадра. Что из всего этого может получиться - вы имеете возможность увидеть
на страничке блога
; а достигается полученный результат вот таким вот несложным способом (собственно, содержание файла README):
1. Download JZoopraxiscope and reference the jquery.jzoopraxiscope.js file in your page.
Code:
<script src="jquery.jzoopraxiscope.js"></script>
2. Reference jQuery and jQuery UI libraries from your page
Code:
<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'
Code:
<pre>
+------------+------------+------------+------------+
| Frame 1 | Frame 2 | Frame 3 | Frame 4 |
+------------+------------+------------+------------+
</pre>
4. Define the options
Code:
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)
Code:
//Html
<div id="animation" style="border: 1px solid #999; margin: auto;"></div>
//Javascript
$('#animation').jzoopraxiscope(optionsAnimation);
6. Control JZoo
Code:
//Play the animation
$('#animation').jzoopraxiscope('play');
//Stop the animation
$('#animation').jzoopraxiscope('stop');
Enjoy!
