Directory

← Back

polymer-tilt

Parallax tilt hover effect for Polymer Component (based Polymer2)

Author

Contributors

Rating

[ 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...)

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
Online