deblan-mirror/vanilla-tilt.js
deblan-mirror/vanilla-tilt.js
1
0
Fork 0
mirror of https://github.com/micku7zu/vanilla-tilt.js synced 2024-06-01 21:32:11 +02:00
Code Issues Projects Releases Wiki Activity

Add setting to use px instead of degrees for tilt

Browse source
This commit is contained in:
Eric Castillo 2021-09-24 16:51:12 -05:00
parent cb1f298d83
commit e09c7936fa
2 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -24,9 +24,10 @@ If you want to use this library in IE, you need to include a CustomEvent polyfil
```js
{
reverse: false, // reverse the tilt direction
max: 15, // max tilt rotation (degrees)
startX: 0, // the starting tilt on the X axis, in degrees.
startY: 0, // the starting tilt on the Y axis, in degrees.
unit: "deg", // unit for tilt values ("deg" or "px")
max: 15, // max tilt rotation
startX: 0, // the starting tilt on the X axis
startY: 0, // the starting tilt on the Y axis
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 transition

22
src/vanilla-tilt.js
View file

@ -260,7 +260,7 @@ export default class VanillaTilt {
}
getValues() {
let x, y;
let x, y, maxTiltX, maxTiltY;
if (this.fullPageListening) {
x = this.event.clientX / this.clientWidth;
@ -273,8 +273,16 @@ export default class VanillaTilt {
x = Math.min(Math.max(x, 0), 1);
y = Math.min(Math.max(y, 0), 1);
let tiltX = (this.reverse * (this.settings.max - x * this.settings.max * 2)).toFixed(2);
let tiltY = (this.reverse * (y * this.settings.max * 2 - this.settings.max)).toFixed(2);
if(this.settings.unit == "px") {
maxTiltX = Math.asin(this.settings.max / (this.width / 2)) * (180/Math.PI);
maxTiltY = Math.asin(this.settings.max / (this.width / 2)) * (180/Math.PI);
} else {
maxTiltX = this.settings.max;
maxTiltY = this.settings.max;
}
let tiltX = (this.reverse * (maxTiltX - x * maxTiltX * 2)).toFixed(2);
let tiltY = (this.reverse * (y * maxTiltY * 2 - maxTiltY)).toFixed(2);
let angle = Math.atan2(this.event.clientX - (this.left + this.width / 2), -(this.event.clientY - (this.top + this.height / 2))) * (180 / Math.PI);
return {
@ -407,9 +415,10 @@ export default class VanillaTilt {
/**
* Method return patched settings of instance
* @param {boolean} settings.reverse - reverse the tilt direction
* @param {number} settings.max - max tilt rotation (degrees)
* @param {startX} settings.startX - the starting tilt on the X axis, in degrees. Default: 0
* @param {startY} settings.startY - the starting tilt on the Y axis, in degrees. Default: 0
* @param {boolean} settings.unit - unit for tilt values ("deg" or "px"). Default: "deg"
* @param {number} settings.max - max tilt rotation
* @param {startX} settings.startX - the starting tilt on the X axis Default: 0
* @param {startY} settings.startY - the starting tilt on the Y axis. Default: 0
* @param {number} settings.perspective - Transform perspective, the lower the more extreme the tilt gets
* @param {string} settings.easing - Easing on enter/exit
* @param {number} settings.scale - 2 = 200%, 1.5 = 150%, etc..
@ -429,6 +438,7 @@ export default class VanillaTilt {
extendSettings(settings) {
let defaultSettings = {
reverse: false,
unit: "deg",
max: 15,
startX: 0,
startY: 0,