# parallax

The markup of every demo on <https://kuiper.oeds.it/parallax/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## transform

Varies: 6 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="y: -100,100"><p>y</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="x: -100,100"><p>x</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="opacity: 0,1"><p>opacity</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="scale: 0.5,1"><p>scale</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="rotate: 0,90"><p>rotate</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="blur: 10,0"><p>blur</p></div></div></div></div>
</div>
```

## filter

Varies: 6 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="grayscale: 100,0"><p>grayscale</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="sepia: 100,0"><p>sepia</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="invert: 100,0"><p>invert</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="saturate: 0,4"><p>saturate</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="hue: 0,180"><p>hue</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="fopacity: 0,100"><p>fopacity</p></div></div></div></div>
</div>
```

## color

The same specimen repeated on each ground Kuiper paints. The point is what you do NOT write: the ink, the border and the placeholder follow the ground through the `--foreground-*` tokens, so no color class appears on the specimen itself.

Varies: 3 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="background-color: #767676,#5d6388"><p>background-color</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="border-color: #f7f7f7,#5d6388"><p>border-color</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="color: #000000,#ffffff"><p>color</p></div></div></div></div>
</div>
```

## background

Varies: 2 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden background-image-cover" data-src="/images/image-1.jpg" data-img data-parallax="bgy: -200"><p class="background-muted text-center">bgy</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden background-image-cover" data-src="/images/image-1.jpg" data-img data-parallax="bgx: -200"><p class="background-muted text-center">bgx</p></div></div></div>
</div>
```

## option

Varies: 2 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="y: -100,100; start: 100%; end: 100%"><p>start end</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="height-m background-white-dark overflow-hidden"><div class="height-1-1 background-muted text-center" data-parallax="y: -100,100; easing: 0"><p>easing</p></div></div></div></div>
</div>
```