preact-tilt
A Preact port of the vanilla-tilt.js version of Tilt.js based on React port.
A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for Preact Add server-side pre-rendering check for window.
Check out a simple demo here!
Installation
This package is hosted on npm
npm install preact-tilt --save
How to Use
This component is imported and used like any standard Preact component
import Component from 'preact/compat'import Tilt from "preact-tilt"; { return <div ="App"> <Tilt></Tilt> </div> ; } ;
Options
Tilt has a variety of options which can be passed in either as a settings object prop or as individual properties using data-tilt-{propertyname}
Here is a list of available options with their defaults:
reverse: false // Reverse the tilt directionmax: 35 // Max tilt rotation (degrees)perspective: 1000 // Transform perspective, the lower the more extreme the tilt gets.scale: 1 // 2 = 200%, 1.5 = 150%, etc..speed: 300 // Speed of the enter/exit transitiontransition: true // Set a transition on enter/exit.axis: null // What axis should be disabled, can be X or Y.reset: true // If the tilt effect has to be reset on exiteasing: "cubic-bezier(.03,.98,.52,.99)" // Easing on enter/exitglare: false // if it should have a "glare" effect"max-glare": 1 // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)"glare-prerender": false // false = VanillaTilt creates the glare elements for you, otherwise // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourselfgyroscope: true // Boolean to enable/disable device orientation detectiongyroscopeMinAngleX: -45 // This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the elementgyroscopeMaxAngleX: 45 // This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the elementgyroscopeMinAngleY: -45 // This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the elementgyroscopeMaxAngleY: 45 // This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element
Example:
<Tilt ="true" ="x" = ></Tilt>
Creating a Parallax Effect
In order to add a parallax effect to the element and it's child, you must add some css properties to them:
- Add
transform-style: preserve-3d
to your tilt element - Add
transform: translateZ(20px)
to your child element (this pixel value can be increased to cause the child element to feel more separated)
<Tilt => <div =></div></Tilt>
Tilt Change Event
You can add an event listener to the component's tiltChange
event in order to access it's x and y tilts, percentages, and overall angle
{ const tilt = document; tilt;}
Attributions
- tilt.js created by Gijs Rogé
- vanilla-tilt.js created by Șandor Sergiu