Parallax Grid
Create an effect which scrolls the single columns of a grid with different speeds.
This component allows you to add a scrolling parallax effect to columns within a Grid from the Grid component.
Usage
To apply this component, add the data-f-grid-parallax
attribute to the container element. Set the width of the grid items by using the f-width-*
or .f-grid-width-*
classes from the Grid component.
Example
1
2
3
4
5
6
7
8
9
JavaScript Arguments
To adjust the scroll speed, just change the arguments of the data-f-grid-parallax
attribute, for example like this: data-f-grid-parallax="{translate:200}"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
JavaScript options
This is an example of how to set options via attribute:
<div data-f-grid-parallax="{translate:200}">...
Option | Possible value | Default | Description |
---|---|---|---|
translate |
integer | 150 | Translate value |
target |
element | false | set the animation target |
smooth |
integer | 150 | animation smoothness |
Init element manually
let gp = FatKit.gridparallax(element, { /* options */ });