gallery.js
A small, high-performance, and minimal-dependence library for creating image infinite-scrolling animations.
Compared to film.js, gallery.js:
- is faster, as it uses native css animation, and no math calculation on every frame
- responsive by default, as it behaves like a background image
- works horizonally and vertically
- ONLY works with images
Check out the demo here: https://f15gdsy.github.io/gallery.js/
How
1. Installation
If you are using npm:
npm install gallery-js --save
If you are using yarn:
yarn add gallery-js
2. Use
First, you need to setup the following DOM structure:
Then create a new gallery object
const images = 'images/pic_1.jpg' 'images/pic_2.jpg' 'images/pic_3.jpg' 'images/pic_4.jpg' const opts = direction: 'vertical' // ... other options const gallery = '.gallery' images opts// orconst gallery = el images opts
That's it!
API
Constructor
params
- el { String | HTMLElement } - The gallery DOM element or selector.
- direction { String } - The direction the images are going to scroll in. Possible values are:
- 'left', default value
- 'right'
- 'top'
- 'down'
- imgWidth { Number } - The width of the images.
- imgHeight { Number } - The height of the images.
- imgAlignX { Number } - If the image is clopped, how should the image to be aligned horizonally.
- 0: align left
- .5: default value, align center
- 1: align right
- imgAlignY { Number } - If the image is clopped, how should the image to be aligned vertically.
- 0: align top
- .5: default value, align center
- 1: align bottom
- gapX { Number } - The horizonal gap between each images. Default 0. Will be ignored if direction is set to 'top' or 'down'.
- gapY { Number } - The vertical gap between each images. Default 0. Will be ignored if direction is set to 'left' or 'right'.
- duration { Number } - How long should one rotation lasts. Default 10. Longer a gallery, it takes longer duration to achieve the same speed.
- direction { String } - The direction the images are going to scroll in. Possible values are:
.start()
Starts the animation.
.stop()
Stops the animation.
.refresh()
Re-initialize the gallery. Will do heavy image regeneration and style recalculation. Usually not needed.