Angular Tilt

An Angular port of Tilt.js.

Angular tilt is an easy way to apply parallax and depth micro-transitions to HTML elements.

Note: This does not require any jQuery.

Installation

Angular Tilt is available from npmjs.com

NPM

npm install @geometricpanda/angular-tilt --save

Yarn

yarn add @geometricpanda/angular-tilt

Getting Started

You'll need to add the NgTiltModule to the relevant parts of your application:

// Your NgModule

import {NgTiltModule} from '@geometricpanda/angular-tilt';

@NgModule({
  declarations: [...],
  imports: [NgTiltModule],
  exports: [...],
})

Usage

// Your Template

<div class="gradient" ngTilt>

  <div class="square" ngTiltParallax></div>

</div>

Directives

[ngTilt]

This is the main ngTilt directive which you apply to your order HTML element.

Inputs

| Name | Type | Default | Description | |---------------|-----------|---------------------------------|---------------------------------------------------------------------------------| | maxTilt | number | 20 | The maximum number of degrees to tilt | | perspective | number | 300 | Sets the perspective of the plane, lower numbers will appear to transition more | | glare | boolean | false | Applies a glare to the tilted element | | maxGlare | number | 0.4 | Maximum amount of glare | | easing | string | cubic-bezier(.03,.98,.52,.99) | CSS Easing effect on mouse enter / exit | | scale | number | 1 | CSS Scale transformation applied on mouseover, 1 = 100%, 2 = 200% ... | | speed | number | 400 | Time taken in ms for reset transition | | disableAxix | x / y | undefined | Prevent the tilt from applying to a specific axis | | reset | boolean | true | Whether the tilt should reset to 0 degrees when the mouse leaves the area |

[ngTiltParallax]

This is a sub directive, which can be applied to children of the ngTilt directive. It will allow the child element to parallax (appear as if it's on a different plane) against the ngTilt element.

Inputs

| Name | Type | Default | Description | |---------------|-----------|---------|--------------------------------------------------| | distance | number | 50 | Configures distance in front of the parent plane |

Recognitions

• Thanks go to Gijs Roge, the original author of Tilt.js