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-05-18 05:36:39 +02:00
Code Issues Projects Releases Wiki Activity

Revert "Add setting to use px instead of degrees for tilt (#94)" (#97)

Browse source 
This reverts commit 43ca5c53cf.
This commit is contained in:
Șandor Sergiu 2021-11-03 09:14:50 +02:00 committed by GitHub
parent 43ca5c53cf
commit f6b73dac54
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -24,10 +24,9 @@ If you want to use this library in IE, you need to include a CustomEvent polyfil
```js
{
reverse: false, // reverse the tilt direction
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
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.
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, maxTiltX, maxTiltY;
let x, y;
if (this.fullPageListening) {
x = this.event.clientX / this.clientWidth;
@ -273,16 +273,8 @@ export default class VanillaTilt {
x = Math.min(Math.max(x, 0), 1);
y = Math.min(Math.max(y, 0), 1);
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 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);
let angle = Math.atan2(this.event.clientX - (this.left + this.width / 2), -(this.event.clientY - (this.top + this.height / 2))) * (180 / Math.PI);
return {
@ -415,10 +407,9 @@ export default class VanillaTilt {
/**
* Method return patched settings of instance
* @param {boolean} settings.reverse - reverse the tilt direction
* @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.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 {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..
@ -438,7 +429,6 @@ export default class VanillaTilt {
extendSettings(settings) {
let defaultSettings = {
reverse: false,
unit: "deg",
max: 15,
startX: 0,
startY: 0,