Web component that implements Tilt Effect of Axiom Design System.
// with npm
npm install @ax-design/pressure
// with yarn
yarn add @ax-design/pressure
and import it:
//CommonJS
require('@ax-design/pressure').register();
//ESModule
import { register } from '@ax-design/pressure';
register();
To add a reveal effect on your web application, you need to wrap a ax-pressure
component with the component you want to add tile effect.
Here's an example:
<ax-pressure>
<div class="tile">
<img class="tile-icon" src="./images/apple.svg" alt="Icon of Apple" />
<p class="tile-title">Apple</p>
</div>
</ax-pressure>
Pressure component uses custom properties to manage the style of the tile effect.
Type: <length>
Default: 1px
Description: The depth at which one side sinks down when the mouse presses the edge of the element.
Type: <length>
Default: 0.8px
Description: The extent to which the entire element falls down when the mouse is pressed down the center of the element.
Type: <length>
Default: 25px
Description: To give the element some perspective, check out this tutorial.