Параллакс грид

Параллакс сетка. Эффектный грид, который прокручивает отдельные столбцы сетки с разными скоростями прокрутки. Компонент «Parallax Grid» позволяет добавить эффект параллакса прокрутки к столбцам сетки из компонента Grid.

Применение

Чтобы применить этот компонент, добавьте атрибут data-uk-grid-parallax к элементу контейнера. Установите ширину элементов сетки с помощью классов uk-width-* или .uk-grid-width-* из компонента Grid.

Пример

1
2
3
4
5
6
7
8
9

Разметка

<!-- Это сетка, использующая uk-width-* для каждого элемента -->
<div data-uk-grid data-uk-grid-parallax>
    <div class="uk-width-small-1-2 uk-width-medium-1-3">...</div>
    <div class="uk-width-small-1-2 uk-width-medium-1-3">...</div>
    <div class="uk-width-small-1-2 uk-width-medium-1-3">...</div>
</div>

<!-- Это сетка, использующая uk-grid-width-* на самой сетке -->
<div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-3" data-uk-grid data-uk-grid-parallax>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Javascript Arguments

Чтобы настроить скорость прокрутки, просто измените аргументы атрибута data-uk-grid-parallax, например, так: data-uk-grid-parallax="{translate:220}"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

JavaScript options

Это пример того, как установить параметры через атрибут:

data-uk-grid-parallax="{translate:200}"
Option Possible value Default Description
translate integer 150 Translate value

Init element manually

var gp = UIkit.gridparallax(element, { /* options */ });

Добавляем к проекту компонент. Синтаксис

<script src="/../js/components/grid-parallax.min.js"></script>