1. Components
Optionally pick the component to be used in the app. They are ItemTitle and ItemDescription components, specify the variable like so:
| Option | Value | Description |
|---|---|---|
| components | [] | Disable all components |
| components | [1, 2] | ItemTitle and ItemDescription |
| components | [1] | ItemTitle |
| components | [2] | ItemDescription |
2. Controls
The application supports mouse and keyboard interactivity. When a photo is at center front, press Next and Previous arrows will switch to the next and previous photo item, press Esc bring the gallery back to floating mode.
On mobile device it responds to common touch events. A special drag mode enable the user to quickly drag and release the mouse to acclerate scrolling speed.
| Option | Default | Description |
|---|---|---|
| useMouseDrag | false | Enable or disable mouse dragging |
| useKeyboard | true | Enable or disable keyboard |
| mouseDragSpeed | 0.05 | Mouse dragging speed |
3. Animation
anime.js is used as the core tweening engine. The application exposes two most common tweening variables "easing" and "duration", further customization and development can
be implemented by tweaking the source code. To adjust scrolling speed, maximum speed and friction modify the corresponding variables.
| Option | Default | Description |
|---|---|---|
| easing | 'easeOutQuad' | animejs easing equation |
| duration | 800 | animejs tweening duration |
| speed | 3 | Gallery scrolling speed |
| maxSpeed | 40 | Maximum scrolling speed |
| friction | 0.1 | Negative acceleration applied to scrolling speed per time differential |
4. Look and feel
A default dark theme and light theme are provided in download package. Simply pick ".light.css" for light theme or ".css" for dark theme
to use in your project. Our development environment implements SASS and Compass framework to modularize the code base into visual related sections.
5. Gallery Forms
Two forms are available out of the box: horizontal and vertical. Other options also effect the item distribution and gallery design.
| Option | Default | Description |
|---|---|---|
| minDistance | 500 | Closest z position an item can occupy |
| maxDistance | 4000 | Furthest z position an item can occupy |
| rotationAngle | 40 | Maximum rotation degrees of an item around its local z axis |
| viewAngle | -0.25 | Camera view angle, controls how direct or sideway the eye views the gallery |
| flipAngle | -45 | Controls the flipping degree of an item from floating state to center state |