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

Merge branch 'master' into master

Browse source
This commit is contained in:
Șandor Sergiu 2019-04-13 10:12:10 +03:00 committed by GitHub
parent 2a55c3e373 581bfc6add
commit 55c313ff7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 1012 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CONTRIBUTORS.md
View file

@ -3,3 +3,5 @@
- [Livio Brunner](https://github.com/BrunnerLivio) <<a href="mailto:contact@brunnerliv.io">contact@brunnerliv.io</a>> (Typings & Glare Effect)
- [Oleg Postoev](https://github.com/Dok11)
- [Matteo Rigon](https://github.com/matteo-rigon) (Device orientation support)
- [Corey Austin](https://github.com/lazyhummingbird) (Initial gyroscope position)
- [rrroyal](https://github.com/rrroyal) (Whole document mouse events listening)

29
README.md
View file

@ -18,6 +18,7 @@ A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https
</body>
```
If you want to use this library in IE, you need to include a CustomEvent polyfill: https://github.com/micku7zu/vanilla-tilt.js/issues/49#issuecomment-482711876 or maybe consider the [jQuery version](https://github.com/gijsroge/tilt.js).
### Options
```js
{
@ -28,18 +29,20 @@ A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https
speed: 300, // Speed of the enter/exit transition
transition: true, // Set a transition on enter/exit.
axis: null, // What axis should be disabled. Can be X or Y.
reset: true // If the tilt effect has to be reset on exit.
reset: true, // If the tilt effect has to be reset on exit.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
glare: false // if it should have a "glare" effect
glare: false, // if it should have a "glare" effect
"max-glare": 1, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
"glare-prerender": false, // false = VanillaTilt creates the glare elements for you, otherwise
// you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
"mouse-event-element": null // css-selector or link to HTML-element what will be listen mouse events
gyroscope: true // Boolean to enable/disable device orientation detection,
gyroscopeMinAngleX: -45 // This is the bottom 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 left border of the element;
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;
"mouse-event-element": null, // css-selector or link to HTML-element what will be listen mouse events
"full-page-listening": false, // If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
gyroscope: true, // Boolean to enable/disable device orientation detection,
gyroscopeMinAngleX: -45, // This is the bottom 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 left border of the element;
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.
}
```
@ -85,13 +88,6 @@ Also available on npm https://www.npmjs.com/package/vanilla-tilt
npm install vanilla-tilt
```
#### Typings
Installing typings using npm
```
npm install @types/vanilla-tilt
```
### Credits
Original library: [Tilt.js](http://gijsroge.github.io/tilt.js/)
@ -103,6 +99,9 @@ Original library author: [Gijs Rogé](https://twitter.com/GijsRoge)
- [Livio Brunner](https://github.com/BrunnerLivio) <<a href="mailto:contact@brunnerliv.io">contact@brunnerliv.io</a>> (Typings & Glare Effect)
- [Oleg Postoev](https://github.com/Dok11)
- [Matteo Rigon](https://github.com/matteo-rigon) (Device orientation support)
- [Corey Austin](https://github.com/lazyhummingbird) (Initial gyroscope position)
- [Sander Moolin](https://github.com/SaFrMo)
- [rrroyal](https://github.com/rrroyal) (Whole document mouse events listening)
### License

65
dist/vanilla-tilt.babel.js vendored
View file

@ -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 () {
@ -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;
@ -41,7 +47,9 @@ var VanillaTilt = function () {
this.glare = this.isSettingTrue(this.settings.glare);
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();
@ -92,9 +100,14 @@ var VanillaTilt = function () {
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
if (this.fullPageListening) {
window.document.addEventListener("mousemove", this.onMouseMoveBind);
} else {
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
}
if (this.glare) {
window.addEventListener("resize", this.onWindowResizeBind);
}
@ -111,9 +124,14 @@ var VanillaTilt = function () {
VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
if (this.fullPageListening) {
window.document.removeEventListener("mousemove", this.onMouseMoveBind);
} else {
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
}
if (this.gyroscope) {
window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
}
@ -145,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;
@ -185,6 +218,10 @@ var VanillaTilt = function () {
};
VanillaTilt.prototype.onMouseLeave = function onMouseLeave() {
if (this.fullPageListening) {
return;
}
this.setTransition();
if (this.settings.reset) {
@ -209,8 +246,16 @@ var VanillaTilt = function () {
};
VanillaTilt.prototype.getValues = function getValues() {
var x = (this.event.clientX - this.left) / this.width;
var y = (this.event.clientY - this.top) / this.height;
var x = void 0,
y = void 0;
if (this.fullPageListening) {
x = this.event.clientX / document.body.clientWidth;
y = this.event.clientY / document.body.clientHeight;
} else {
x = (this.event.clientX - this.left) / this.width;
y = (this.event.clientY - this.top) / this.height;
}
x = Math.min(Math.max(x, 0), 1);
y = Math.min(Math.max(y, 0), 1);
@ -344,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.
*/
@ -364,13 +411,15 @@ var VanillaTilt = function () {
glare: false,
"max-glare": 1,
"glare-prerender": false,
"full-page-listening": false,
"mouse-event-element": null,
reset: true,
gyroscope: true,
gyroscopeMinAngleX: -45,
gyroscopeMaxAngleX: 45,
gyroscopeMinAngleY: -45,
gyroscopeMaxAngleY: 45
gyroscopeMaxAngleY: 45,
gyroscopeSamples: 10
};
var newSettings = {};

2
dist/vanilla-tilt.babel.min.js vendored
View file

File diff suppressed because one or more lines are too long

66
dist/vanilla-tilt.js vendored
View file

@ -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 {
@ -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;
@ -32,7 +38,9 @@ class VanillaTilt {
this.glare = this.isSettingTrue(this.settings.glare);
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();
@ -79,9 +87,14 @@ class VanillaTilt {
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
if (this.fullPageListening) {
window.document.addEventListener("mousemove", this.onMouseMoveBind);
} else {
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
}
if (this.glare) {
window.addEventListener("resize", this.onWindowResizeBind);
}
@ -96,10 +109,15 @@ class VanillaTilt {
*/
removeEventListeners() {
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
if(this.gyroscope) {
if (this.fullPageListening) {
window.document.removeEventListener("mousemove", this.onMouseMoveBind);
} else {
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
}
if (this.gyroscope) {
window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
}
@ -130,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;
@ -170,6 +203,10 @@ class VanillaTilt {
}
onMouseLeave() {
if (this.fullPageListening) {
return;
}
this.setTransition();
if (this.settings.reset) {
@ -197,8 +234,15 @@ class VanillaTilt {
}
getValues() {
let x = (this.event.clientX - this.left) / this.width;
let y = (this.event.clientY - this.top) / this.height;
let x, y;
if (this.fullPageListening) {
x = this.event.clientX / document.body.clientWidth;
y = this.event.clientY / document.body.clientHeight;
} else {
x = (this.event.clientX - this.left) / this.width;
y = (this.event.clientY - this.top) / this.height;
}
x = Math.min(Math.max(x, 0), 1);
y = Math.min(Math.max(y, 0), 1);
@ -332,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 = {
@ -350,6 +396,7 @@ class VanillaTilt {
glare: false,
"max-glare": 1,
"glare-prerender": false,
"full-page-listening": false,
"mouse-event-element": null,
reset: true,
gyroscope: true,
@ -357,6 +404,7 @@ class VanillaTilt {
gyroscopeMaxAngleX: 45,
gyroscopeMinAngleY: -45,
gyroscopeMaxAngleY: 45,
gyroscopeSamples: 10
};
let newSettings = {};

2
dist/vanilla-tilt.min.js vendored
View file

File diff suppressed because one or more lines are too long

26
lib/README.md
View file

@ -18,6 +18,7 @@ A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https
</body>
```
If you want to use this library in IE, you need to include a CustomEvent polyfill: https://github.com/micku7zu/vanilla-tilt.js/issues/49#issuecomment-482711876 or maybe consider the [jQuery version](https://github.com/gijsroge/tilt.js).
### Options
```js
{
@ -28,18 +29,20 @@ A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https
speed: 300, // Speed of the enter/exit transition
transition: true, // Set a transition on enter/exit.
axis: null, // What axis should be disabled. Can be X or Y.
reset: true // If the tilt effect has to be reset on exit.
reset: true, // If the tilt effect has to be reset on exit.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
glare: false // if it should have a "glare" effect
glare: false, // if it should have a "glare" effect
"max-glare": 1, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
"glare-prerender": false, // false = VanillaTilt creates the glare elements for you, otherwise
// you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
"mouse-event-element": null // css-selector or link to HTML-element what will be listen mouse events
gyroscope: true // Boolean to enable/disable device orientation detection,
gyroscopeMinAngleX: -45 // This is the bottom 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 left border of the element;
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;
"mouse-event-element": null, // css-selector or link to HTML-element what will be listen mouse events
"full-page-listening": false, // If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
gyroscope: true, // Boolean to enable/disable device orientation detection,
gyroscopeMinAngleX: -45, // This is the bottom 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 left border of the element;
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.
}
```
@ -87,10 +90,7 @@ npm install vanilla-tilt
#### Typings
Installing typings using npm
```
npm install @types/vanilla-tilt
```
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
@ -103,6 +103,8 @@ Original library author: [Gijs Rogé](https://twitter.com/GijsRoge)
- [Livio Brunner](https://github.com/BrunnerLivio) <<a href="mailto:contact@brunnerliv.io">contact@brunnerliv.io</a>> (Typings & Glare Effect)
- [Oleg Postoev](https://github.com/Dok11)
- [Matteo Rigon](https://github.com/matteo-rigon) (Device orientation support)
- [Corey Austin](https://github.com/lazyhummingbird) (Initial gyroscope position)
- [rrroyal](https://github.com/rrroyal) (Whole document mouse events listening)
### License

66
lib/vanilla-tilt.es2015.js
View file

@ -2,7 +2,7 @@
* 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 {
@ -15,6 +15,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;
@ -29,7 +35,9 @@ class VanillaTilt {
this.glare = this.isSettingTrue(this.settings.glare);
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();
@ -76,9 +84,14 @@ class VanillaTilt {
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
if (this.fullPageListening) {
window.document.addEventListener("mousemove", this.onMouseMoveBind);
} else {
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
}
if (this.glare) {
window.addEventListener("resize", this.onWindowResizeBind);
}
@ -93,10 +106,15 @@ class VanillaTilt {
*/
removeEventListeners() {
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
if(this.gyroscope) {
if (this.fullPageListening) {
window.document.removeEventListener("mousemove", this.onMouseMoveBind);
} else {
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
}
if (this.gyroscope) {
window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
}
@ -127,14 +145,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;
@ -167,6 +200,10 @@ class VanillaTilt {
}
onMouseLeave() {
if (this.fullPageListening) {
return;
}
this.setTransition();
if (this.settings.reset) {
@ -194,8 +231,15 @@ class VanillaTilt {
}
getValues() {
let x = (this.event.clientX - this.left) / this.width;
let y = (this.event.clientY - this.top) / this.height;
let x, y;
if (this.fullPageListening) {
x = this.event.clientX / document.body.clientWidth;
y = this.event.clientY / document.body.clientHeight;
} else {
x = (this.event.clientX - this.left) / this.width;
y = (this.event.clientY - this.top) / this.height;
}
x = Math.min(Math.max(x, 0), 1);
y = Math.min(Math.max(y, 0), 1);
@ -329,10 +373,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 = {
@ -347,6 +393,7 @@ class VanillaTilt {
glare: false,
"max-glare": 1,
"glare-prerender": false,
"full-page-listening": false,
"mouse-event-element": null,
reset: true,
gyroscope: true,
@ -354,6 +401,7 @@ class VanillaTilt {
gyroscopeMaxAngleX: 45,
gyroscopeMinAngleY: -45,
gyroscopeMaxAngleY: 45,
gyroscopeSamples: 10
};
let newSettings = {};

65
lib/vanilla-tilt.js
View file

@ -10,7 +10,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 () {
@ -26,6 +26,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;
@ -40,7 +46,9 @@ var VanillaTilt = function () {
this.glare = this.isSettingTrue(this.settings.glare);
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();
@ -91,9 +99,14 @@ var VanillaTilt = function () {
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
if (this.fullPageListening) {
window.document.addEventListener("mousemove", this.onMouseMoveBind);
} else {
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
}
if (this.glare) {
window.addEventListener("resize", this.onWindowResizeBind);
}
@ -110,9 +123,14 @@ var VanillaTilt = function () {
VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
if (this.fullPageListening) {
window.document.removeEventListener("mousemove", this.onMouseMoveBind);
} else {
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
}
if (this.gyroscope) {
window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
}
@ -144,14 +162,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;
@ -184,6 +217,10 @@ var VanillaTilt = function () {
};
VanillaTilt.prototype.onMouseLeave = function onMouseLeave() {
if (this.fullPageListening) {
return;
}
this.setTransition();
if (this.settings.reset) {
@ -208,8 +245,16 @@ var VanillaTilt = function () {
};
VanillaTilt.prototype.getValues = function getValues() {
var x = (this.event.clientX - this.left) / this.width;
var y = (this.event.clientY - this.top) / this.height;
var x = void 0,
y = void 0;
if (this.fullPageListening) {
x = this.event.clientX / document.body.clientWidth;
y = this.event.clientY / document.body.clientHeight;
} else {
x = (this.event.clientX - this.left) / this.width;
y = (this.event.clientY - this.top) / this.height;
}
x = Math.min(Math.max(x, 0), 1);
y = Math.min(Math.max(y, 0), 1);
@ -343,10 +388,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.
*/
@ -363,13 +410,15 @@ var VanillaTilt = function () {
glare: false,
"max-glare": 1,
"glare-prerender": false,
"full-page-listening": false,
"mouse-event-element": null,
reset: true,
gyroscope: true,
gyroscopeMinAngleX: -45,
gyroscopeMaxAngleX: 45,
gyroscopeMinAngleY: -45,
gyroscopeMaxAngleY: 45
gyroscopeMaxAngleY: 45,
gyroscopeSamples: 10
};
var newSettings = {};

517
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

3
package.json
View file

@ -1,11 +1,12 @@
{
"name": "vanilla-tilt",
"version": "1.6.1",
"version": "1.6.2",
"description": "A smooth 3D tilt javascript library forked from Tilt.js",
"main": "lib/vanilla-tilt.js",
"module_es2015": "lib/vanilla-tilt.es2015.js",
"jsnext:main": "lib/vanilla-tilt.es2015.js",
"distrib": "dist/vanilla-tilt.js",
"types": "vanilla-tilt.d.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npm run build:lib && cp ./README.md ./lib",

55
src/vanilla-tilt.js
View file

@ -2,7 +2,7 @@
* 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
*/
export default class VanillaTilt {
@ -15,6 +15,12 @@ export default 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;
@ -29,7 +35,9 @@ export default class VanillaTilt {
this.glare = this.isSettingTrue(this.settings.glare);
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();
@ -77,9 +85,14 @@ export default class VanillaTilt {
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
if (this.fullPageListening) {
window.document.addEventListener("mousemove", this.onMouseMoveBind);
} else {
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
}
if (this.glare) {
window.addEventListener("resize", this.onWindowResizeBind);
}
@ -94,10 +107,15 @@ export default class VanillaTilt {
*/
removeEventListeners() {
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
if(this.gyroscope) {
if (this.fullPageListening) {
window.document.removeEventListener("mousemove", this.onMouseMoveBind)
} else {
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
}
if (this.gyroscope) {
window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
}
@ -128,14 +146,29 @@ export default 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;
@ -168,6 +201,10 @@ export default class VanillaTilt {
}
onMouseLeave() {
if (this.fullPageListening) {
return;
}
this.setTransition();
if (this.settings.reset) {
@ -341,12 +378,14 @@ export default 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 {tiltX} settings.tiltX - the starting tilt on the X axis, in degrees
* @param {tiltY} settings.tiltY - the starting tilt on the Y axis, in degrees
* @param {gyroscopeSamples} settings.gyroscopeSamples - How many gyroscope moves to decide the starting position.
*/
extendSettings(settings) {
let defaultSettings = {
@ -361,6 +400,7 @@ export default class VanillaTilt {
glare: false,
"max-glare": 1,
"glare-prerender": false,
"full-page-listening": false,
"mouse-event-element": null,
reset: true,
gyroscope: true,
@ -369,7 +409,8 @@ export default class VanillaTilt {
gyroscopeMinAngleY: -45,
gyroscopeMaxAngleY: 45,
startX: 0,
startY: 0
startY: 0,
gyroscopeSamples: 10
};
let newSettings = {};

128
test/index.html Normal file
View file

@ -0,0 +1,128 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vanilla-tilt.js</title>
<style>
html, body {
width: 100%;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
.logo {
display: block;
width: 100%;
max-width: 200px;
height: 200px;
margin: 0px auto;
margin-top: 50px;
line-height: 200px;
text-align: center;
color: white;
font-size: 2em;
background: #0099F7; /* fallback for old browsers */
background: -webkit-linear-gradient(135deg, #0099F7, #F11712); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(135deg, #0099F7, #F11712); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: perspective(500px);
transform: perspective(500px);
margin-bottom: 75px;
}
.logo > span {
position: relative;
display: block;
-webkit-transform: translateZ(50px) scale(0.7);
transform: translateZ(50px) scale(0.7);
}
.logo > span:after {
content: "GitHub";
position: absolute;
color: white;
font-size: 18px;
top: 36px;
left: 50%;
transform: translateX(-50%);
opacity: 0.8;
transition: 0.3s ease all;
}
.logo > span:before {
content: "View source";
position: absolute;
color: white;
font-size: 18px;
top: 36px;
left: 50%;
transform: translateX(-50%) translateY(-10px);
opacity: 0;
display: inline-block;
width: 100%;
transition: 0.3s ease all;
}
.logo:hover > span:after {
opacity: 0;
transform: translateX(-50%) translateY(10px);
}
.logo:hover > span:before {
opacity: 0.8;
transform: translateX(-50%);
}
.logo > span > span {
display: block;
font-size: 12px;
}
.logo:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #333;
box-shadow: 0 20px 70px -10px rgba(51, 51, 51, 0.7), 0 50px 100px 0 rgba(51, 51, 51, 0.2);
z-index: -1;
-webkit-transform: translateZ(-50px);
transform: translateZ(-50px);
-webkit-transition: .3s;
transition: .3s;
}
</style>
</head>
<body>
<a href="https://github.com/micku7zu/vanilla-tilt.js" class="logo" id="logo" data-tilt data-tilt-glare="true"
data-tilt-max-glare="0.5" data-tilt-speed="400"
data-tilt-scale="1.1" data-tilt-max="20" data-tilt-perspective="500">
<span>vanilla-tilt.js</span>
</a>
<script type="text/javascript" src="../dist/vanilla-tilt.js"></script>
</body>
</html>

153
vanilla-tilt.d.ts vendored Normal file
View file

@ -0,0 +1,153 @@
// Extended Type definitions for vanilla-tilt 1.6.2
// Project: https://github.com/micku7zu/vanilla-tilt.js
// Definitions by: Livio Brunner <https://github.com/BrunnerLivio>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
/**
* Options which configures the tilting
*/
export interface TiltOptions {
/**
* Reverse the tilt direction
*/
reverse?: boolean;
/**
* Max tilt rotation (degrees)
*/
max?: number;
/**
* Transform perspective, the lower the more extreme the tilt gets.
*/
perspective?: number;
/**
* 2 = 200%, 1.5 = 150%, etc..
*/
scale?: number;
/**
* Speed of the enter/exit transition
*/
speed?: number;
/**
* Set a transition on enter/exit.
*/
transition?: boolean;
/**
* What axis should be disabled. Can be X or Y.
*/
axis?: null | "x" | "y";
/**
* If the tilt effect has to be reset on exit.
*/
reset?: boolean;
/**
* Easing on enter/exit.
*/
easing?: string;
/**
* if it should have a "glare" effect
*/
glare?: boolean;
/**
* the maximum "glare" opacity
*/
"max-glare"?: number;
/**
* false = VanillaTilt creates the glare elements for you, otherwise
* you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
*/
"glare-prerender"?: boolean;
// If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
"full-page-listening"?: boolean;
// Boolean to enable/disable device orientation detection,
gyroscope?: boolean;
// css-selector or link to HTML-element what will be listen mouse events
"mouse-event-element"?: string;
// This is the bottom 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 left border of the element;
gyroscopeMinAngleX?: number
// 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;
gyroscopeMaxAngleX?: number
// 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;
gyroscopeMinAngleY?: number
// 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;
gyroscopeMaxAngleY?: number
//How many gyroscope moves to decide the starting position.
gyroscopeSamples?: number
}
export interface TiltValues {
/**
* The current tilt on the X axis
*/
tiltX: number;
/**
* The current tilt on the Y axis
*/
tiltY: number;
/**
* The current percentage on the X axis
*/
percentageX: number;
/**
* The current percentage on the Y axis
*/
percentageY: number;
}
export interface HTMLVanillaTiltElement extends HTMLElement {
vanillaTilt: VanillaTilt;
}
/**
* A smooth 3D tilt javascript library forked from Tilt.js (jQuery version).
*/
export default class VanillaTilt {
/**
* Creates a new instance of a VanillaTilt element.
* @param element The element, which should be a VanillaTilt element
* @param settings Settings which configures the element
*/
constructor(element: HTMLElement, settings?: TiltOptions);
/**
* Initializes one or multiple elements
* @param elements The element, which should tilt
* @param settings Settings, which configures the elements
*/
static init(elements: HTMLElement | HTMLElement[], settings?: TiltOptions): void;
/**
* Resets the styling
*/
reset(): void;
/**
* Get values of instance
*/
getValues(): TiltValues;
/**
* Destroys the instance and removes the listeners.
*/
destroy(): void;
/**
* Start listening to events
*/
addEventListeners(): void;
/**
* Stop listening to events
*/
removeEventListener(): void;
}