Shifting Tiles

Displays Images (similar to Shifting Tiles screensaver on Mac OS X).

Example: http://davestevens.github.io/shifting-tiles/ (Images used from http://snippets.khromov.se/stock-photo-archive-zip-77-images/)

Usage

var shiftingTiles = new ShiftingTiles({
  el: ".shifting-tiles-example-1",
  imageUrls: [
    "images/1.jpg",
    "images/2.jpg",
    "images/3.jpg",
    "images/4.jpg",
    "images/5.jpg",
    "images/6.jpg",
    "images/7.jpg",
    "images/8.jpg"
  ],
  animationInterval: 3000,
  columnWidth: 300,
  rowHeight: 300
});

shiftingTiles.render();

API

Name	Description
`render`	Builds DOM element, preloads images and builds grid layout
`pause`	Stops animations.
`resume`	Resumes animations.
`destroy`	Removes ShiftingTiles object.
`animationInterval=`	Interval between images being switched out (milliseconds), clamped at 1s.
`rowCount=`	Number of rows of images to display.
`rowHeight=`	Requested rows height *.
`columnCount=`	Number of columns of images to display.
`columnWidth=`	Requested column width *.

This value is used to calculated the closet value while still filling the entire view.

Options

Name	Description	Default
`el`	Selector to render Shifting Tiles into.	N/A
`imageUrls`	Array of URLs of Images to display.	N/A
`interval`	Milliseconds between animations.	3000
`columnCount`	Number of Columns to render (takes precedence over columnWidth).	N/A
`columnWidth`	Requested width of Columns (used when calculating optimal widths.	300
`rowCount`	Number of Rows to render (takes precedence over rowWidth).	N/A
`rowHeight`	Requested height of Rows (used when calculating optimal heights.	300

TODO

Pause / Resume Animations
Define number of rows & columns
Redraw (Update row/column and redraw current grid)
Redraw on container resize
Update animations on change to timeout

Development

Written in ES6 using babelify for transpilation.

Install dependencies:

npm install

Build and watch directories (outputs in example/dist directory:

npm run watch

Build directories (outputs in example/dist directory:

npm run build

Create a webserver serving from example directory:

npm start

Building

Generate minified CSS and JavaScript in dist directory:

npm run build-prod