Skip to content

Commit

Permalink
Version 1.6.2: Add gyroscope samples
Browse files Browse the repository at this point in the history
  • Loading branch information
@micku7zu
micku7zu committed Apr 12, 2019
1 parent 91bc380 commit 30a8ec0
Show file tree
Hide file tree
Showing 12 changed files with 275 additions and 117 deletions.
5 changes: 1 addition & 4 deletions README.md
View file
Expand Up @@ -42,6 +42,7 @@ If you want to use this library in IE, you need to include a CustomEvent polyfil
gyroscopeMaxAngleX: 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 element;
gyroscopeMinAngleY: -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 element;
gyroscopeMaxAngleY: 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;
gyroscopeSamples: 10 // How many gyroscope moves to decide the starting position.
}
```

Expand Down Expand Up @@ -87,10 +88,6 @@ Also available on npm https://www.npmjs.com/package/vanilla-tilt
npm install vanilla-tilt
```

#### Typings

Typings were out of date in the previous version, so I've rolled a copy directly into the application for you would be Typescript junkies!

### Credits

Original library: [Tilt.js](http://gijsroge.github.io/tilt.js/)
Expand Down
44 changes: 36 additions & 8 deletions dist/vanilla-tilt.babel.js
View file
Expand Up @@ -11,7 +11,7 @@ var classCallCheck = function (instance, Constructor) {
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
* Original idea: https://github.com/gijsroge/tilt.js
* MIT License.
* Version 1.6.1
* Version 1.6.2
*/

var VanillaTilt = function () {
Expand All @@ -27,6 +27,12 @@ var VanillaTilt = function () {
this.height = null;
this.left = null;
this.top = null;

this.gammazero = null;
this.betazero = null;
this.lastgammazero = null;
this.lastbetazero = null;

this.transitionTimeout = null;
this.updateCall = null;

Expand All @@ -43,6 +49,7 @@ var VanillaTilt = function () {
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
this.fullPageListening = this.isSettingTrue(this.settings["full-page-listening"]);
this.gyroscope = this.isSettingTrue(this.settings.gyroscope);
this.gyroscopeSamples = this.settings.gyroscopeSamples;

if (this.glare) {
this.prepareGlare();
Expand Down Expand Up @@ -156,14 +163,29 @@ var VanillaTilt = function () {

this.updateElementPosition();

if (this.gyroscopeSamples > 0) {
this.lastgammazero = this.gammazero;
this.lastbetazero = this.betazero;

if (this.gammazero === null) {
this.gammazero = event.gamma;
this.betazero = event.beta;
} else {
this.gammazero = (event.gamma + this.lastgammazero) / 2;
this.betazero = (event.beta + this.lastbetazero) / 2;
}

this.gyroscopeSamples -= 1;
}

var totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX;
var totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;

var degreesPerPixelX = totalAngleX / this.width;
var degreesPerPixelY = totalAngleY / this.height;

var angleX = event.gamma - this.settings.gyroscopeMinAngleX;
var angleY = event.beta - this.settings.gyroscopeMinAngleY;
var angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero);
var angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero);

var posX = angleX / degreesPerPixelX;
var posY = angleY / degreesPerPixelY;
Expand Down Expand Up @@ -224,12 +246,15 @@ var VanillaTilt = function () {
};

VanillaTilt.prototype.getValues = function getValues() {
var x = void 0,
y = void 0;

if (this.fullPageListening) {
var x = this.event.clientX / document.body.clientWidth;
var y = this.event.clientY / document.body.clientHeight;
x = this.event.clientX / document.body.clientWidth;
y = this.event.clientY / document.body.clientHeight;
} else {
var x = (this.event.clientX - this.left) / this.width;
var y = (this.event.clientY - this.top) / this.height;
x = (this.event.clientX - this.left) / this.width;
y = (this.event.clientY - this.top) / this.height;
}

x = Math.min(Math.max(x, 0), 1);
Expand Down Expand Up @@ -364,10 +389,12 @@ var VanillaTilt = function () {
* @param {boolean} settings.glare - What axis should be disabled. Can be X or Y
* @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
* @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise
* @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 {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.
*/


Expand All @@ -391,7 +418,8 @@ var VanillaTilt = function () {
gyroscopeMinAngleX: -45,
gyroscopeMaxAngleX: 45,
gyroscopeMinAngleY: -45,
gyroscopeMaxAngleY: 45
gyroscopeMaxAngleY: 45,
gyroscopeSamples: 10
};

var newSettings = {};
Expand Down
2 changes: 1 addition & 1 deletion dist/vanilla-tilt.babel.min.js
View file

Large diffs are not rendered by default.

53 changes: 41 additions & 12 deletions dist/vanilla-tilt.js
View file
Expand Up @@ -5,7 +5,7 @@ var VanillaTilt = (function () {
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
* Original idea: https://github.com/gijsroge/tilt.js
* MIT License.
* Version 1.6.1
* Version 1.6.2
*/

class VanillaTilt {
Expand All @@ -18,6 +18,12 @@ class VanillaTilt {
this.height = null;
this.left = null;
this.top = null;

this.gammazero = null;
this.betazero = null;
this.lastgammazero = null;
this.lastbetazero = null;

this.transitionTimeout = null;
this.updateCall = null;

Expand All @@ -34,6 +40,7 @@ class VanillaTilt {
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
this.fullPageListening = this.isSettingTrue(this.settings["full-page-listening"]);
this.gyroscope = this.isSettingTrue(this.settings.gyroscope);
this.gyroscopeSamples = this.settings.gyroscopeSamples;

if (this.glare) {
this.prepareGlare();
Expand Down Expand Up @@ -83,9 +90,9 @@ class VanillaTilt {
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);

if (this.fullPageListening) {
window.document.addEventListener("mousemove", this.onMouseMoveBind);
window.document.addEventListener("mousemove", this.onMouseMoveBind);
} else {
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
}

if (this.glare) {
Expand All @@ -105,9 +112,9 @@ class VanillaTilt {
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);

if (this.fullPageListening) {
window.document.removeEventListener("mousemove", this.onMouseMoveBind);
window.document.removeEventListener("mousemove", this.onMouseMoveBind);
} else {
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
}

if (this.gyroscope) {
Expand Down Expand Up @@ -141,14 +148,29 @@ class VanillaTilt {

this.updateElementPosition();

if (this.gyroscopeSamples > 0) {
this.lastgammazero = this.gammazero;
this.lastbetazero = this.betazero;

if (this.gammazero === null) {
this.gammazero = event.gamma;
this.betazero = event.beta;
} else {
this.gammazero = (event.gamma + this.lastgammazero) / 2;
this.betazero = (event.beta + this.lastbetazero) / 2;
}

this.gyroscopeSamples -= 1;
}

const totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX;
const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;

const degreesPerPixelX = totalAngleX / this.width;
const degreesPerPixelY = totalAngleY / this.height;

const angleX = event.gamma - this.settings.gyroscopeMinAngleX;
const angleY = event.beta - this.settings.gyroscopeMinAngleY;
const angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero);
const angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero);

const posX = angleX / degreesPerPixelX;
const posY = angleY / degreesPerPixelY;
Expand Down Expand Up @@ -181,7 +203,9 @@ class VanillaTilt {
}

onMouseLeave() {
if (this.fullPageListening) { return; }
if (this.fullPageListening) {
return;
}

this.setTransition();

Expand Down Expand Up @@ -210,12 +234,14 @@ class VanillaTilt {
}

getValues() {
let x, y;

if (this.fullPageListening) {
var x = this.event.clientX / document.body.clientWidth;
var y = this.event.clientY / document.body.clientHeight;
x = this.event.clientX / document.body.clientWidth;
y = this.event.clientY / document.body.clientHeight;
} else {
var x = (this.event.clientX - this.left) / this.width;
var y = (this.event.clientY - this.top) / this.height;
x = (this.event.clientX - this.left) / this.width;
y = (this.event.clientY - this.top) / this.height;
}

x = Math.min(Math.max(x, 0), 1);
Expand Down Expand Up @@ -350,10 +376,12 @@ class VanillaTilt {
* @param {boolean} settings.glare - What axis should be disabled. Can be X or Y
* @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
* @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise
* @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 {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.
*/
extendSettings(settings) {
let defaultSettings = {
Expand All @@ -376,6 +404,7 @@ class VanillaTilt {
gyroscopeMaxAngleX: 45,
gyroscopeMinAngleY: -45,
gyroscopeMaxAngleY: 45,
gyroscopeSamples: 10
};

let newSettings = {};
Expand Down

0 comments on commit 30a8ec0

Please sign in to comment.