Custom Parallax

Create a parallax effect on any element with various triggers

Overview

Parallax effects are still very popular. The most of them make use of page scrolling, but with Torus Kit you can also attach the parallax effect to mouse cursor movement or even to device sensor orientation.

Syntax

To create a parallax effect add data-tor="<trigger>:@parallax(<amount>) to your desired element. Where <amount> is the integer and represents the strength of parallax effect. The bigger the <amount> the bigger the element’s parallax movement.

Examples

scroll

Attach parallax effect to page scroll by adding data-tor="scroll:@parallax(<amount>)" to desired element.

<div data-tor="scroll:@parallax(5)">Scale</div>
<div data-tor="scroll:@parallax(20)">Rotate</div>
<div data-tor="scroll:@parallax(50)">Translate</div>

mouse

Create parallax effect when moving the cursor over both x and y axis by using data-tor="mouse:@parallax(<amount>)".

<div data-tor="mouse:@parallax(5)">Scale</div>
<div data-tor="mouse:@parallax(20)">Rotate</div>
<div data-tor="mouse:@parallax(50)">Translate</div>

mouseX

Create parallax effect when moving the cursor over x axis by using data-tor="mouseX:@parallax(<amount>)".

<div data-tor="mouseX:@parallax(5)">Scale</div>
<div data-tor="mouseX:@parallax(20)">Rotate</div>
<div data-tor="mouseX:@parallax(50)">Translate</div>

mouseY

Create parallax effect when moving the cursor over y axis by using data-tor="mouseY:@parallax(<amount>)".

<div data-tor="mouseY:@parallax(5)">Scale</div>
<div data-tor="mouseY:@parallax(20)">Rotate</div>
<div data-tor="mouseY:@parallax(50)">Translate</div>