Tilts the content of the element based on mouse position or mobile device orientation.
Usage
1 - Install the package
$ yarn add repa-tilt
# or
$ npm i --save repa-tilt2 - 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.