fc.tape — rotate css-sprites like cinema tape!

Download v0.3 12 kb

fc.tape — jQuery widget for sprite animations.

For the widget to work you need: jQuery (1.6+), jQuery UI (1.8+) Core and Widget, and certainly a sprite with animation frames.

Background image (sprite) consisting of picture frames is animated like the tape in old-time movie projectors. Widget supports options to adjust smoothness and animation speed as well as methods to control animation behavior. You can create such sprite using console util convert, included in popular image editing tool ImageMagick. E.g. to join all images in a folder into a single sprite you can use this command:

$ convert img_* -append sprite.png
or
$ convert img_* +append sprite.png

Basic usage

To embed the widget in your page you need to create a block element with fixed dimensions, equal to your frame size, and background image of your sprite:

<div class="tape" />

.tape {
    width: 420px;
    height: 315px;
    background: url(tape.png) 0px 0px no-repeat;
}

Now you need to activate fc.tape. Options can be provided both in javascript and in html via data-attributes (we will use later method throughout the demo).

$('.js-sample__tape').tape();

Low level API. Methods windToNext and windToPrev

windToNext and windToPrev are basic methods for tape manipulation that allow to move it one frame forwards or backwards respectivly. Here is a more real-life code sample, showing how to adjust number of frames in a tape and animation speed:

<div class="b-tape js-sample__tape"
     data-frame-count="32"
     data-frame-change-duration="80"></div>

In this example, methods are called on button click:

$('.js-sample__button')
    .bind('click', function(){
        $(this)
            .closest('.js-sample')
            .find('.js-sample__tape')
            .tape('windToNext');
    });

Medium level API. windTo and stepInTo methods

windTo and stepInTo methods are more high-level, they do animation from current to certain frame. Difference between windTo and stepInTo methods is that the first method change frame without progressive transition.

$('.js-sample__button').click(function(){
    $(this)
        .closest('.js-sample')
        .find('.js-sample__tape')
                    .tape('setPosition', 0)
        .tape('windTo', 20);
});

The second method can be used for smooth transitions between the states. Speed is controlled by changeDuration option.

$('.js-sample__button').click(function(){
    $(this)
        .closest('.js-sample')
        .find('.js-sample__tape')
        .tape('setPosition', 0)
        .tape('stepInTo', 20);
});

"smooth" option

This option adds extra smoothness to your animation. Use it when tape has low number of frames or you want to add unordinary effects. Note that in this example, the sprite frames are glued horizontally.

<div class="b-tape js-sample__tape"
     data-frame-count="32"
     data-frame-change-duration="200"
     data-sprite-direction="h"
     data-smooth="false"></div>
<div class="b-tape js-sample__tape"
     data-frame-count="32"
     data-frame-change-duration="200"
     data-sprite-direction="h"
     data-smooth="true"></div>

JS code (tape usage):

$('.js-sample__button').click(function(){
    $(this)
        .closest('.js-sample')
        .find('.js-sample__tape')
        .tape('stepInTo', 4);
});

High level API. Rotate behavior

There also one high-level feature available out of the box: rotate behavoir. It's appliable for cases when you have images of an object, taken from different angles: fc.tape allowes you to rotate it. It's useful for showing goods in online store.

$('.js-sample__tape')
    .tape('rotate');
$('.js-sample__tape')
    .tape('rotate', {
        element: $('.js-sample__rotation-handler'),
        direction: -1,
        deltaX: 5
    });

In this sample rotation rotation behavior apply to the tape and the grey bar (with options). deltaX option reduces the speed.

Rotate it! Drag the image
... or the bar
Fork me on GitHub