AliceJS Demos

AliceJS - (A Lightweight Independent CSS Engine) is a micro JavaScript library focused on using hardware-accelerated capabilities (in particular CSS3 features) in modern browsers for generating high-quality, high-end visual effects.

Cheshire Demos

Bounce

Bounce - The "bounce" effect simulates the bouncing of an object from a top view including a shadow.

alicejs.bounce({
    elems: "my_bounce",
    scale: 125,
    shadow: true,
    duration: "750ms",
    timing: "easeOutSine",
    delay: "0ms",
    iteration: "infinite",
    direction: "alternate",
    playstate: "running"
});

Dance

Dance - The "dance" effect...

alicejs.dance({
    elems: "my_dance",
    rotate: 45,
    duration: "950ms",
    timing: "easeInOutBack",
    delay: "0ms",
    iteration: "infinite",
    direction: "alternate",
    playstate: "running"
});

Drain

Drain - The "drain" effect...

alicejs.drain({
    elems: "my_drain",
    fade: "out",
    rotate: -720,  
    duration: "4500ms",
    timing: "ease-in-out",
    delay: "0ms",
    iteration: "infinite",
    direction: "normal",
    playstate:  "running"
});

Fade (in)

Fade (in) - The "fade (in)" effect...

alicejs.fade({
    elems: "my_fade",
    fade: "in",   
    duration: "4500ms",
    timing: "ease-in-out",
    delay: "0ms",
    iteration: "infinite",
    direction: "normal",
    playstate: "running"
});

Hinge

Hinge - The "hinge" effect...

alicejs.hinge({
    elems: "my_hinge",
    rotate: 35,
    overshoot: 0,
    duration: "1000ms",
    timing: "linear",
    delay: "0ms",
    iteration: "infinite",
    direction: "alternate",
    playstate: "running"
});

Page Flip (left)

Page Flip (left) - The "pageFlip (left)" effect...

alicejs.pageFlip({
    elems: "my_pageFlip",
    flipDirection: "left",
    turns: 1,
    overshoot: 0,
    duration: "2000ms",
    timing: "ease-in-out",
    delay: "0ms",
    iteration: "infinite",
    direction: "normal",
    playstate: "running"
});

Pendulum

Pendulum - The "pendulum" effect...

alicejs.pendulum({
    elems: "my_pendulum",
    rotate: 45,
    overshoot: 0,
    duration: "2000ms",
    timing: "ease-in-out",
    delay: "0ms",
    iteration: "infinite",
    direction: "alternate",
    playstate: "running"
});

Phantom Zone

Phantom Zone - The "phantomZone" effect...

alicejs.phantomZone({
    elems: "my_phantomZone",
    fade: "in",
    rotate: -720,
    flip: "left",
    duration: "5000ms",
    timing: "ease-in-out",
    delay: "0ms",
    iteration: "infinite",
    direction: "normal",
    playstate: "running"
});

Race Flag

Race Flag - The "raceFlag" effect...

alicejs.raceFlag({
    elems: "my_raceFlag",
    rotate: -720,
    perspectiveOrigin: "top-right",
    duration: "3000ms",
    timing: "ease-in-out",
    delay: "0ms",
    iteration: 'infinite',
    direction: "normal",
    playstate: "running" 
});

Slide (left)

Slide (left) - The "slide (left)" effect...

alicejs.slide({
    elems: "my_slide",
    move: {direction: "left", start: 0, end: 500},
    overshoot: '0',
    duration: "3000ms",
    timing: "ease",
    delay: "0ms",
    iteration: "infinite",
    direction: "alternate",
    playstate: "running"  
});

Spin (left)

Spin (left) - The "spin (left)" effect...

alicejs.spin({
    elems: "my_spin",
    flip: "left",
    turns: 1,
    oevrshoot: 0,
    duration: "1200ms",
    timing: "ease-in-out",
    delay: "0ms",
    iteration: "infinite",
    direction: "normal",
    playstate: "running"  
});

Toss (left)

Toss (left) - The "toss (left)" effect...

alicejs.toss({
    elems: "my_toss",
    move: "right",
    perspectiveOrigin: "center",
    oevrshoot: 0,
    duration: "2500ms",
    timing: "ease-in-out",
    delay: "0ms",
    iteration: "infinite",
    direction: "normal",
    playstate: "running" 
});

Twirl (from left)

Twirl (from left) - The "twirl (from left)" effect...

alicejs.twirl({
    elems: "my_twirl",
    flip: "left",
    duration: "3000ms",
    timing: "ease",
    delay: "0ms",
    iteration: "infinite",
    direction: "normal",
    playstate: "running" 
});

Wobble

Wobble - The "wobble" effect...

alicejs.wobble({
    elems: "my_wobble",
    rotate: 5,
    perspectiveOrigin: "center",
    duration: "200ms",
    timing: "linear",
    delay: "0ms",
    iteration: "infinite",
    direction: "normal",
    playstate: "running" 
});

Zoom

Zoom - The "zoom" effect...

alicejs.zoom({
    elems: "my_zoom",
    scale: {from: "1%", to: "125%"},
    move: "none",
    duration: "200ms",
    timing: "linear",
    delay: "0ms",
    iteration: "infinite",
    direction: "normal",
    playstate: "running" 
});