Visualizes arrays as cube interfaces
CoffeeScript CSS HTML
Latest commit b6acc58 Aug 5, 2016 @dmotz update build
Permalink
Failed to load latest commit information.
demo update build Aug 5, 2016
.gitignore ignore sourcemaps Apr 29, 2015
.npmignore
Cakefile simplified watch process spawning Sep 1, 2013
LICENSE added license Jul 20, 2013
README.md updated docs Dec 2, 2013
hexaflip.coffee
hexaflip.css rebuild May 15, 2014
hexaflip.jquery.json
hexaflip.js update build Aug 5, 2016
hexaflip.min.js build 0.1.6 Apr 29, 2015
hexaflip.styl update build Aug 5, 2016
index.html
package.json update deps Dec 10, 2015

README.md

HexaFlip

HexaFlip

Transform arrays of any length into cubes with infinite sides.

Featuring touch/mouse interaction, getter/setter methods, zero dependencies, and jQuery support.

Dan Motzenbecker, MIT License

@dcmotz

Take a look at the Codrops article for a guide through the process and some demos.

Basic Usage

Create an instance by passing a DOM element and a key-value set of arrays:

var cubeSet = new HexaFlip(documentGetElementById('my-el'),
    {
        prince: ['For You', 'Prince', 'Dirty Mind', 'Controversy', '1999', 'Around the World in a Day'],
        curtis: ['Curtis', 'Roots', 'Super Fly', 'Back to the World', 'Got to Find a Way', 'Sweet Exorcist']
    }
);

// you can also pass a selector string and HexaFlip will take the first matching element:
var firstDiv = new HexaFlip('div');

If a value is a URL, HexaFlip will set that side to the image it points to, preloading it automatically.

You can also pass objects as values with style and value keys for some meticulous customization of different sides. Make the former an object literal of CSS properties to customize the styling of that cube face.

var colorCube = new HexaFlip('#color-cube',
    {
        chromaSet: [
          {
              value: 'orange',
              style: {
                  backgroundColor: '#e67e22',
                  fontWeight: 100
              }
          },
          {
              value: 'teal',
              style: {
                  backgroundColor: '#1abc9c',
                  fontFamily: 'Futura'
              }
          },
          {
              value: 'yellow',
              style: {
                  backgroundColor: '#f1c40f',
                  textDecoration: 'underline'
              }
          }
        ]
    }
);

To enable horizontal rotation (like the photos above), pass it in the options:

var horizontalCube = new HexaFlip('#my-el2',
    {
        letters: ['α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'ι', 'κ', 'λ', 'μ',
                  'ν', 'ξ', 'ο', 'π', 'ρ', 'σ', 'τ', 'υ', 'φ', 'χ', 'ψ', 'ω']
    },
    {
        horizontalFlip: true,
        size: 300
    }
);

To set and get the values of the cubes:

cubeSet.setValue({ prince: '1999', curtis: 'Roots' });
cubeSet.getValue();

To rotate the cubes to the next or previous sides:

cubeSet.flip();
cubeSet.flipBack();

Events

To add custom DOM events, simply pass a key value object called domEvents to the instance's options:

//...
    },
    {
        domEvents: {
            mouseover: function(e, face, cube) {
                face.style.backgroundColor = 'red';
            },
            mouseout: function(e, face, cube) {
                face.style.backgroundColor = 'blue';
            },
            click: function(e, face, cube) {
                console.log(face.innerHTML);
            }
        }
    }
);

Every callback is passed the event object, the face element that triggered the event, and the cube element the face belongs to. The callback is automatically bound to the HexaFlip instance so this works properly.