https://github.com/binocarlos/buddy

Turn HTML content into an animating 3d book - also the name of the Story Time Island cat.
https://github.com/binocarlos/buddy

Last synced: 11 days ago
JSON representation

Turn HTML content into an animating 3d book - also the name of the Story Time Island cat.

• Host: GitHub
• URL: https://github.com/binocarlos/buddy
• Owner: binocarlos
• Created: 2013-09-29T21:32:43.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2014-02-27T12:29:50.000Z (over 10 years ago)
• Last Synced: 2024-04-14T14:36:37.610Z (7 months ago)
• Language: JavaScript
• Homepage: http://binocarlos.github.io/buddy/
• Size: 816 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
buddy

=====

Turn HTML content into an animating 3d book - also the name of the Story Time Island cat.

[![Buddy the cat](assets/buddy.png)](http://www.storytimeisland.com/cat.html)

[view an example](http://binocarlos.github.io/buddy)

## installation

### HTML

Download [build.css](https://raw.github.com/binocarlos/buddy/master/build/build.css) and [build.js](https://raw.github.com/binocarlos/buddy/master/build/build.js) and add them to your page.

```html

```

### Component

To install buddy as a [component](https://github.com/component/component):

	$ component install binocarlos/buddy

## Usage

First you need some content that Buddy will turn into a book:

```html



  


    Buddy likes fish.

  

  


    Buddy likes humans when they give him fish.

  

  


    Buddy likes chips with his fish.

  



```


Then - tell buddy about your book:

```js

var Buddy = require('buddy');

var book = new Buddy({

  selector:'#book',

  touch_selector:'#book',

  page_selector:'.page'

});

```

### animate_direction

This moves the book either forward or backwards by one page:

```js

var book = new Buddy(...);

// move the book forward one page

book.animate_direction(1)

```

### animate_index

This moves the book to a particular page:

```js

var book = new Buddy(...);

// send the book to page 6

book.animate_index(5)

```

## Complete Options

Buddy can handle a range of other options - here is an example:

```js

var Buddy = require('buddy');

var book = new Buddy({

  // the div that holds our pages

  selector:'#book',

  // the selector for our actual pages

  page_selector:'.page',

  // the element that responds to drag events to turn the page

  touch_selector:'body',

  // additional classname to apply to pages

  apply_pageclass:'bookpage',

  // control 3d mode (pages fade when disabled)

  is_3d:true,

  // how much to apply the 3d effect

  perspective:950,

  // control which page the book starts on

  startpage:0,

  // control whether a shadow is auto-rendered

  shadow:true

});

```

## Story Time Island - Cat Diary

If you like Buddy - checkout his [diary](http://www.storytimeisland.com/cat.html) at [Story Time Island!](http://www.storytimeisland.com)

[](http://www.storytimeisland.com)

## Licence

MIT