Contact us Create app

Directory

← Back

polymer-tilt

Parallax tilt hover effect for Polymer Component (based Polymer2)

Author

Rating

Links

Popularity

<100

[ This description is mirrored from README.md at github.com/YingshanDeng/polymer-tilt on 2019-05-10 ]

<polymer-tilt>

Published on webcomponents.org

Parallax tilt hover effect for Polymer Component, Inspired by gijsroge/tilt.js, A tiny 60+fps parallax tilt hover effect for jQuery.

Installation

bower install --save polymer-tilt

Usage

<polymer-tilt reset>
  <div slot="tilt" class="tilt">
    <div class="tilt-inner">Basic polymer-tilt demo</div>
  </div>
</polymer-tilt>

Options

maxTilt:        10,     // max tilt rotation (degrees)
perspective:    1000,   // Transform perspective, the lower the more extreme the tilt gets
easing:         "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit
scale:          1,      // 2 = 200%, 1.5 = 150%, etc..
speed:          300,    // Speed of the enter/exit transition
axis:           null,   // What axis should be disabled. Can be X or Y
reset:          false,  // If the tilt effect has to be reset on exit
glare:          false,  // Enables glare effect
maxGlare:       1       // From 0 - 1

License

MIT

Compatibility

(Loading compatibility data...)

Last updated: 2017-08-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Polymer/polymer#^2.0.0

Released
2017-08-01
Maturity
TESTED
License
Other

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

polymer-tilt - Vaadin Add-on Directory

Parallax tilt hover effect for Polymer Component (based Polymer2) polymer-tilt - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/YingshanDeng/polymer-tilt](https://github.com//YingshanDeng/polymer-tilt/blob/1.0.2/README.md) on 2019-05-10 ]** # \ [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/YingshanDeng/polymer-tilt) Parallax tilt hover effect for Polymer Component, Inspired by [gijsroge/tilt.js](https://github.com/gijsroge/tilt.js), A tiny 60+fps parallax tilt hover effect for jQuery. ![](http://7vikhl.com1.z0.glb.clouddn.com/polymer-tilt.gif) ## Installation ``` bower install --save polymer-tilt ``` ## Usage ```html
Basic polymer-tilt demo
 ``` ## Options ```js maxTilt: 10, // max tilt rotation (degrees) perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit scale: 1, // 2 = 200%, 1.5 = 150%, etc.. speed: 300, // Speed of the enter/exit transition axis: null, // What axis should be disabled. Can be X or Y reset: false, // If the tilt effect has to be reset on exit glare: false, // Enables glare effect maxGlare: 1 // From 0 - 1 ``` ## License MIT
Documentation
View on GitHub
GitHub Homepage
Online Demo
Issue tracker
License

polymer-tilt version 1.0.0
### Dependencies Polymer/polymer#^2.0.0

polymer-tilt version 1.0.1
### Dependencies Polymer/polymer#^2.0.0

polymer-tilt version 1.0.2
### Dependencies Polymer/polymer#^2.0.0

Online