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-09 09:12:13 +02:00
Code Issues Projects Releases Wiki Activity

Feature: "reset to start"

Browse source
This commit is contained in:
Andžs Pilskalns 2022-12-09 13:13:32 +02:00
parent ffc28a5bab
commit fa7f17a9ea
2 changed files with 16 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -33,6 +33,7 @@ If you want to use this library in IE, you need to include a CustomEvent polyfil
transition: true, // Set a transition on enter/exit.
axis: null, // What axis should be enabled. Can be "x" or "y".
reset: true, // If the tilt effect has to be reset on exit.
"reset-to-start": false, // Whether the exit reset will go to [0,0] (default) or [startX, startY]
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
glare: false, // if it should have a "glare" effect
"max-glare": 1, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)

43
src/vanilla-tilt.js
View file

@ -35,6 +35,7 @@ export default class VanillaTilt {
this.settings = this.extendSettings(settings);
this.reverse = this.settings.reverse ? -1 : 1;
this.resetToStart = VanillaTilt.isSettingTrue(this.settings["reset-to-start"]);
this.glare = VanillaTilt.isSettingTrue(this.settings.glare);
this.glarePrerender = VanillaTilt.isSettingTrue(this.settings["glare-prerender"]);
this.fullPageListening = VanillaTilt.isSettingTrue(this.settings["full-page-listening"]);
@ -53,7 +54,11 @@ export default class VanillaTilt {
this.addEventListeners();
this.reset();
this.updateInitialPosition();
if(this.resetToStart === false){
this.settings.startX = 0;
this.settings.startY = 0;
}
}
static isSettingTrue(setting) {
@ -210,33 +215,6 @@ export default class VanillaTilt {
}
reset() {
this.event = {
clientX: this.left + this.width / 2,
clientY: this.top + this.height / 2
};
if (this.element && this.element.style) {
this.element.style.transform = `perspective(${this.settings.perspective}px) ` +
`rotateX(0deg) ` +
`rotateY(0deg) ` +
`scale3d(1, 1, 1)`;
}
this.resetGlare();
}
resetGlare() {
if (this.glare) {
this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)";
this.glareElement.style.opacity = "0";
}
}
updateInitialPosition() {
if (this.settings.startX === 0 && this.settings.startY === 0) {
return;
}
this.onMouseEnter();
if (this.fullPageListening) {
@ -259,6 +237,13 @@ export default class VanillaTilt {
this.resetGlare();
}
resetGlare() {
if (this.glare) {
this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)";
this.glareElement.style.opacity = "0";
}
}
getValues() {
let x, y;
@ -423,6 +408,7 @@ export default class VanillaTilt {
* @param {boolean} settings.full-page-listening - If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
* @param {string|object} settings.mouse-event-element - String selector or link to HTML-element what will be listen mouse events
* @param {boolean} settings.reset - false = If the tilt effect has to be reset on exit
* @param {boolean} settings.reset-to-start - true = On reset event (mouse leave) will return to initial start angle (startX, startY)
* @param {gyroscope} settings.gyroscope - Enable tilting by deviceorientation events
* @param {gyroscopeSensitivity} settings.gyroscopeSensitivity - Between 0 and 1 - The angle at which max tilt position is reached. 1 = 90deg, 0.5 = 45deg, etc..
* @param {gyroscopeSamples} settings.gyroscopeSamples - How many gyroscope moves to decide the starting position.
@ -445,6 +431,7 @@ export default class VanillaTilt {
"full-page-listening": false,
"mouse-event-element": null,
reset: true,
"reset-to-start": false,
gyroscope: true,
gyroscopeMinAngleX: -45,
gyroscopeMaxAngleX: 45,