Overview
The incrementing feature helps you to quickly define and increment effect’s value. This is useful when you have several elements where you want to apply an effect with a different (incremented) value for each element. Incrementing will help you especially when you want to create a gradual revealing effects. When you define an increment/decrement, the script loops through all child target elements, and continuously increase the given value for every next effect.
Syntax
This is a full syntax data-fx-group="{target} => effect[{start};{end}]"
, but in most cases you’ll use only an end
values. Increment must be defined in the round brackets ()
with the +
or -
sign. You can use any integer or float number with the unit or not.
Value | Method | Description | Example | |
---|---|---|---|---|
{start} |
(+increment) |
Increments a given start value | scroll:@scale[(+1);5] |
|
(-decrement) |
Decrements a given start value | scroll:@translateY[(-10px);50px] |
||
{end} |
(+increment) |
Increments a given end value | delay[(+50ms)] |
|
(-decrement) |
Decrements a given end value | z-level[(-10px)] |
How it works
Basic example
Take this as an example: You have five child elements and you want to apply z-level[(+1px)]
with incremented value on each one. The script start with the first element and give it a 1px
value. Continue to second and give it a 2px
incremented value. It goes on until the last, fifth element. And this is how the final result of incrementing z-level[(+1px)]
looks:
<div data-fx="z-level[1px]"></div>
<div data-fx="z-level[2px]"></div>
<div data-fx="z-level[3px]"></div>
<div data-fx="z-level[4px]"></div>
<div data-fx="z-level[5px]"></div>
Starting value
However, there are some situations, where you don’t want to start with the incremented value. For example, if you use delay[(+100ms)]
, the first effect will start with the 100ms
delay, but in most cases you want to start with 0ms
delay. In this case, you can use begin
value.
The syntax is: effect[ ({begin+value}) ]
This will force the script to start with the begin
value and only then, in the next step, increment by the given value
.
It’s better to show it on the example. Let’s say we have five elements and we want to increment a delay between effects by 100ms
. But now, we’ll use a begin
value. The markup will be delay[(0ms+100ms)]
. Note the 0ms
number - this tells the script to start with 0ms
and then increment 100ms
for each effect. This is the final result:
<div data-fx="delay[0ms]"></div>
<div data-fx="delay[100ms]"></div>
<div data-fx="delay[200ms]"></div>
<div data-fx="delay[300ms]"></div>
<div data-fx="delay[400ms]"></div>
Check this Delay example to see it in action.
Examples
Z-level
Here we’ve created a 3D stacked element that rotates when mouse is moving. To achieve a 3D space, we need to add some kind of z-index to each element. So we’ve used a Torus Kit z-level
effect modifier that uses CSS translateZ
to move an element over z axis. Along with that, we’ve applied a z-level[(+20px)]
incrementing, that will increment the value of z-level
by 20px
for each effect.
<div data-fx-group=".fx => z-level[(+20px)]" data-fx="mouse:@tilt[20]">
<div class="fx"></div><!-- z-level[20px] -->
<div class="fx"></div><!-- z-level[40px] -->
<div class="fx"></div><!-- z-level[60px] -->
<div class="fx"></div><!-- z-level[80px] -->
</div>
Push
Another example of using incremental values. Here, we’re adding a custom value to the built-in hover:push--up
effect and incrementing it by 0.5rem
. The result is that each next element will move up on hover by increment of 0.5rem
.
<div data-fx-group=".fx => hover:push--up[(+0.5rem)]">
<div class="fx"></div><!-- hover:push--up[0.5rem] -->
<div class="fx"></div><!-- hover:push--up[1rem] -->
<div class="fx"></div><!-- hover:push--up[1.5rem] -->
<div class="fx"></div><!-- hover:push--up[2rem] -->
<div class="fx"></div><!-- hover:push--up[2.5rem] -->
</div>
Delay
Incrementing is super helpful when creating gradual effects using a delay
.
<div data-fx-group=".fx => inview:grow delay[(0+100ms)]">
<div class="fx"></div><!-- delay[0ms]-->
<div class="fx"></div><!-- delay[100ms]-->
<div class="fx"></div><!-- delay[200ms]-->
<div class="fx"></div><!-- delay[300ms]-->
<div class="fx"></div><!-- delay[400ms]-->
</div>