Custom Scroll-linked effects

Overview

By using scroll" you can create scroll-linked effects that reacts to page scroll.

Syntax

To create a scroll-linked effect add data-tor="scroll:<effect> to your desired element.

• scroll - change the values while the page is scrolling in y direction

Examples

These are basic example with default options and behavior. To see more examples of what is possible check Options.

scroll

Change the values on both x and y axis cursor movement by using data-tor="mouse:<effect>".

<div data-tor="scroll:@transform=scale(0;1)">Scale</div>
<div data-tor="scroll:@transform=rotateZ(0deg;20deg)">Rotate</div>
<div data-tor="scroll:@transform=translateY(0px;50px)">Translate</div>

Options

Override a default options.

offset

The offset option defines how the percentage (and so custom value) is calculated based on the element position against the viewport height. In other words, it defines where the effect starts and where it ends. The default value is middle - the element is exactly in the middle of the screen.

The full syntax markup: data-tor="<trigger>:<effect>(<start>;<end>)".

By default, the <start> value is 0, which means that start of percentage calculation is at the bottom edge of the viewport. If you are not using a <start> value, you don’t need to define it. The <end> value tells where is the finish state for the percentage calculation. If you set 80%, then effect finishes in the 80% of the viewport height.

Example

<!-- Default `middle` origin -->
<div data-tor="scroll:@transform=scale(0;1)">Scale</div>

<!-- Effect ends in the 80% of the viewport height -->
<div data-tor="scroll:@transform=scale(0;1, {end: 80})">Scale</div>

<!-- Effect starts in the 50% and ends in the 80% of the viewport height -->
<div data-tor="scroll:@transform=scale(0;1, {start: 50, end: 80})">Scale</div>