Skip to content

Latest commit

 

History

History
86 lines (54 loc) · 3.43 KB

README.md

File metadata and controls

86 lines (54 loc) · 3.43 KB
Raw

Netlify Status npm version

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