Tilts the content of the element based on mouse position or mobile device orientation.

See a very basic demo here.

Usage

1 - Install the package

$ yarn add repa-tilt

# or

$ npm i --save repa-tilt

2 - Import the element

<script type="module" src="node_modules/repa-tilt/repa-tilt.js"></script>

or in your javascript file

import "repa-tilt/repa-tilt.js";

3 - Use it in your HTML

<repa-tilt>content here</repa-tilt>

Styling

The following custom properties and mixins are available for styling:

Custom property | Default | Description :--- |:--- |:--- --repa-tilt-background | transparent | background --repa-tilt-text-color | #fff | text color --repa-tilt-primary-color | #44a655 | primary color (card) --repa-tilt-secondary-color | #6168a5 | secondary color (card) --repa-tilt-gradient-deg | 135deg | gradient tilt degree --repa-tilt-z | 10vh | Z axis translation of the content

Properties

Property | Default | Description :--- | :--- | :--- no-x | false | X axis disabled no-y | false | Y axis disabled no-mobile | false | device orientation tilt disabled reversed | false | tilt direction reversed no-gradient | false | single color background

Development

Install the Polymer-CLI

First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run polymer serve to serve your element locally.

Development Server

$ polymer serve

index.html contains only a single empty <repa-tilt> element, please check the demo page under http://localhost:8081/demo/

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

Documentation

When polymer serve is running, the documentation is available under http://localhost:8081/doc.html

###V ES5 Compatible Build

Running

$ polymer build

will generate an ES5 compatible version of the custom element into build/es5 directory. An example index.html will be included there.