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-04 06:53:20 +02:00
Code Issues Projects Releases Wiki Activity

Update reset-to-start default to true

Browse source
This commit is contained in:
micku7zu 2022-12-13 01:00:15 +02:00
parent 042c3eac64
commit 2a1f867ec1
3 changed files with 7 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -33,7 +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]
"reset-to-start": true, // 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%)

9
src/vanilla-tilt.js
View file

@ -2,7 +2,7 @@
* Created by Sergiu Șandor (micku7zu) on 1/27/2017.
* Original idea: https://github.com/gijsroge/tilt.js
* MIT License.
* Version 1.7.3
* Version 1.8.0
*/
export default class VanillaTilt {
@ -55,7 +55,7 @@ export default class VanillaTilt {
this.addEventListeners();
this.reset();
if(this.resetToStart === false){
if (this.resetToStart === false) {
this.settings.startX = 0;
this.settings.startY = 0;
}
@ -229,7 +229,6 @@ export default class VanillaTilt {
};
}
let backupScale = this.settings.scale;
this.settings.scale = 1;
this.update();
@ -408,7 +407,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 {boolean} settings.reset-to-start - true = On reset event (mouse leave) will return to initial start angle (if startX or startY is set)
* @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.
@ -431,7 +430,7 @@ export default class VanillaTilt {
"full-page-listening": false,
"mouse-event-element": null,
reset: true,
"reset-to-start": false,
"reset-to-start": true,
gyroscope: true,
gyroscopeMinAngleX: -45,
gyroscopeMaxAngleX: 45,

4
test/index.html
View file

@ -1,6 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
@ -129,7 +128,8 @@
data-tilt-scale="1.1"
data-tilt-perspective="500"
data-tilt-max="15"
data-tilt-scale="1.1"
data-tilt-startX="15"
data-tilt-startY="30"
>
<span>vanilla-tilt.js</span>
</a>