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.

Caterpillar Demos

Caterpillar - The "book" effect generates book with the content provided in the child divs of the parent div, allowing the binding to be placed on any side of the parent div.

General Book Effect Rules

1. The book div, that is the parent of the pages must be sized in one of the following ways:
pixels
percentage

Examples:
width: 400px;
height: 20%;

2. The book div will dictate the details of the page sizes.
3. All pages must be divs, they can have as much or as little content as desired.

But Wait! That's not all!

Since the caterpillar effect is object based { example. var mybook = alicejs.notebook() } we make sure to not overstep our boundaries and put all the power in your hands. So what does this mean for you? It means you control the following aspects of your book:

Built In Functions and Feedback

var mybook = alicejs.notebook({
   elems: "book",
   binding: "left",
   wrap: false,
   pageBackground: "#333" 
});

//This is your basic notebook method call for the caterpillar effect.

//Page Turn Methods

mybook.nxtPage() //Moves to the next page
mybook.prePage() //Flips to the previous page

//Modify the book itself by adding content

mybook.appendPages("div id") //Allows the specified div to be incorportated into the book as more pages
mybook.book //Returns the book in document object form
mybook.bookName //Returns the id of the book

//Page Numbers and Totals

mybook.pageNumber() //Returns the page number currently at the fore-front
mybook.realPageCount //Returns the number of pages in the book

notebook - A single page book with modifiable page background.

var notebook = alicejs.notebook({
    elems: "book",
    pageClass: '',                  //a class to add to pages
    shadow: true,                   //true || false
    speed: '500ms',                 //select a speed
    randomize: '15%'                //string of percetange (impacts the speed of the page turns)
    binding: "top",                 //left || right || top || bottom
    wrap: false,                    //true || false
    pageBackground: '#333'          //string (basic css applied to the page backgrounds)
});

Alice in Wonderland

Down the Rabbit Hole

The Pool of Tears

The Caucus Race and a Long Tale

The Rabbit Sends a Little Bill

Advice from a Caterpillar

Pig and Pepper

A Mad Tea-Party

The Queen's Croquet Ground

The Mock Turtle's Story

Lobster Quadrille

Who Stole the Tarts?

Alice's Evidence

notebook - A single page book with modifiable page background.

var flipbook = alicejs.flipbook({
    elems: "book",
    pageClass: '',                  //a class to add to pages
    shadow: true,                   //true || false
    speed: '500ms',                 //select a speed
    randomize: '15%'                //string of percetange (impacts the speed of the page turns)
    binding: "center",              //center || middle
    wrap: true                      //true || false
});

The Mock Turtle's Story

Lobster Quadrille

Who Stole the Tarts?

Alice's Evidence

A Mad Tea-Party

The Queen's Croquet Ground

The Mock Turtle's Story

Lobster Quadrille

Who Stole the Tarts?

Alice's Evidence

notebook - A single page book with modifiable page background.

var book = alicejs.book({
    elems: "book",
    pageClass: '',                  //a class to add to pages
    shadow: true,                   //true || false
    speed: '500ms',                 //select a speed
    randomize: '15%'                //string of percetange (impacts the speed of the page turns)
    binding: "left",                //left || right || top || bottom
});

A Mad Tea-Party

The Queen's Croquet Ground

The Mock Turtle's Story

Lobster Quadrille

Who Stole the Tarts?

Alice's Evidence