https://github.com/soulwire/Makisu

CSS 3D Dropdown Concept
https://github.com/soulwire/Makisu

Last synced: about 2 months ago
JSON representation

CSS 3D Dropdown Concept

• Host: GitHub
• URL: https://github.com/soulwire/Makisu
• Owner: soulwire
• Created: 2012-10-18T00:01:35.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2022-07-28T05:16:46.000Z (over 2 years ago)
• Last Synced: 2024-10-15T23:34:46.181Z (about 2 months ago)
• Language: CSS
• Size: 155 KB
• Stars: 1,533
• Watchers: 116
• Forks: 353
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-web-effect - Makisu - An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin. (🚀 A series of exquisite and compact web page cool effects / Css 3D Effect)
• awesome-web-effect - Makisu - An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin. (🚀 A series of exquisite and compact web page cool effects / Css 3D Effect)

README

        
### Makisu

An experimental CSS 3D dropdown concept, wrapped up in a [jQuery](http://jquery.com/) plugin.

Check out the [demo](http://soulwire.github.com/Makisu/) _(you'll need a CSS 3D capable browser, such as [Chrome](www.google.com/chrome).)_

A current list of supported browsers can be found [here](http://caniuse.com/#search=3d%20transform).

#### Example usage

Use it like any regular jQuery plugin:

    $( '.list' ).makisu({

        selector: 'li',

        overlap: 0.2,

        speed: 0.8

    });

The options available are:

 - `selector` Children matching this selector will be _folded_ into the Makisu

 - `speed` The animation duration (in _seconds_) for each folding item

 - `overlap` Fraction of `speed	` by which folding items overlap (`0` to `1`)

 - `shading` Default shading colour (`null` for no shading)

 - `perspective` Perspective to apply to 3D transformed objects

 

#### API

Once an element has been extended as in the example above, you can `open`, `close` and `toggle` it.

	$( '.list' ).makisu( 'open' );

 

#### Trivia

The name comes from the [object](http://en.wikipedia.org/wiki/Makisu) that inspired it.