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/)
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();| 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.
| 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 |
- 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
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
Generate minified CSS and JavaScript in dist directory:
npm run build-prod