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 */ });