mirror of
https://github.com/micku7zu/vanilla-tilt.js
synced 2024-06-29 10:30:03 +02:00
Merge branch 'master' into master
This commit is contained in:
commit
55c313ff7d
|
@ -3,3 +3,5 @@
|
||||||
- [Livio Brunner](https://github.com/BrunnerLivio) <<a href="mailto:contact@brunnerliv.io">contact@brunnerliv.io</a>> (Typings & Glare Effect)
|
- [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)
|
- [Oleg Postoev](https://github.com/Dok11)
|
||||||
- [Matteo Rigon](https://github.com/matteo-rigon) (Device orientation support)
|
- [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
29
README.md
|
@ -18,6 +18,7 @@ A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https
|
||||||
</body>
|
</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
|
### Options
|
||||||
```js
|
```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
|
speed: 300, // Speed of the enter/exit transition
|
||||||
transition: true, // Set a transition on enter/exit.
|
transition: true, // Set a transition on enter/exit.
|
||||||
axis: null, // What axis should be disabled. Can be X or Y.
|
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.
|
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%)
|
"max-glare": 1, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
|
||||||
"glare-prerender": false, // false = VanillaTilt creates the glare elements for you, otherwise
|
"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
|
// 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
|
"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,
|
"full-page-listening": false, // If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
|
||||||
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;
|
gyroscope: true, // Boolean to enable/disable device orientation detection,
|
||||||
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;
|
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;
|
||||||
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;
|
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;
|
||||||
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;
|
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
|
npm install vanilla-tilt
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Typings
|
|
||||||
|
|
||||||
Installing typings using npm
|
|
||||||
```
|
|
||||||
npm install @types/vanilla-tilt
|
|
||||||
```
|
|
||||||
|
|
||||||
### Credits
|
### Credits
|
||||||
|
|
||||||
Original library: [Tilt.js](http://gijsroge.github.io/tilt.js/)
|
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)
|
- [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)
|
- [Oleg Postoev](https://github.com/Dok11)
|
||||||
- [Matteo Rigon](https://github.com/matteo-rigon) (Device orientation support)
|
- [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
|
### License
|
||||||
|
|
||||||
|
|
65
dist/vanilla-tilt.babel.js
vendored
65
dist/vanilla-tilt.babel.js
vendored
|
@ -11,7 +11,7 @@ var classCallCheck = function (instance, Constructor) {
|
||||||
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
|
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
|
||||||
* Original idea: https://github.com/gijsroge/tilt.js
|
* Original idea: https://github.com/gijsroge/tilt.js
|
||||||
* MIT License.
|
* MIT License.
|
||||||
* Version 1.6.1
|
* Version 1.6.2
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var VanillaTilt = function () {
|
var VanillaTilt = function () {
|
||||||
|
@ -27,6 +27,12 @@ var VanillaTilt = function () {
|
||||||
this.height = null;
|
this.height = null;
|
||||||
this.left = null;
|
this.left = null;
|
||||||
this.top = null;
|
this.top = null;
|
||||||
|
|
||||||
|
this.gammazero = null;
|
||||||
|
this.betazero = null;
|
||||||
|
this.lastgammazero = null;
|
||||||
|
this.lastbetazero = null;
|
||||||
|
|
||||||
this.transitionTimeout = null;
|
this.transitionTimeout = null;
|
||||||
this.updateCall = null;
|
this.updateCall = null;
|
||||||
|
|
||||||
|
@ -41,7 +47,9 @@ var VanillaTilt = function () {
|
||||||
|
|
||||||
this.glare = this.isSettingTrue(this.settings.glare);
|
this.glare = this.isSettingTrue(this.settings.glare);
|
||||||
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
|
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.gyroscope = this.isSettingTrue(this.settings.gyroscope);
|
||||||
|
this.gyroscopeSamples = this.settings.gyroscopeSamples;
|
||||||
|
|
||||||
if (this.glare) {
|
if (this.glare) {
|
||||||
this.prepareGlare();
|
this.prepareGlare();
|
||||||
|
@ -92,9 +100,14 @@ var VanillaTilt = function () {
|
||||||
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
|
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
|
||||||
|
|
||||||
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
|
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
|
||||||
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
|
|
||||||
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
|
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) {
|
if (this.glare) {
|
||||||
window.addEventListener("resize", this.onWindowResizeBind);
|
window.addEventListener("resize", this.onWindowResizeBind);
|
||||||
}
|
}
|
||||||
|
@ -111,9 +124,14 @@ var VanillaTilt = function () {
|
||||||
|
|
||||||
VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
|
VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
|
||||||
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
|
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
|
||||||
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
|
|
||||||
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
|
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) {
|
if (this.gyroscope) {
|
||||||
window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
|
window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
|
||||||
}
|
}
|
||||||
|
@ -145,14 +163,29 @@ var VanillaTilt = function () {
|
||||||
|
|
||||||
this.updateElementPosition();
|
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 totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX;
|
||||||
var totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
|
var totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
|
||||||
|
|
||||||
var degreesPerPixelX = totalAngleX / this.width;
|
var degreesPerPixelX = totalAngleX / this.width;
|
||||||
var degreesPerPixelY = totalAngleY / this.height;
|
var degreesPerPixelY = totalAngleY / this.height;
|
||||||
|
|
||||||
var angleX = event.gamma - this.settings.gyroscopeMinAngleX;
|
var angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero);
|
||||||
var angleY = event.beta - this.settings.gyroscopeMinAngleY;
|
var angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero);
|
||||||
|
|
||||||
var posX = angleX / degreesPerPixelX;
|
var posX = angleX / degreesPerPixelX;
|
||||||
var posY = angleY / degreesPerPixelY;
|
var posY = angleY / degreesPerPixelY;
|
||||||
|
@ -185,6 +218,10 @@ var VanillaTilt = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
VanillaTilt.prototype.onMouseLeave = function onMouseLeave() {
|
VanillaTilt.prototype.onMouseLeave = function onMouseLeave() {
|
||||||
|
if (this.fullPageListening) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.setTransition();
|
this.setTransition();
|
||||||
|
|
||||||
if (this.settings.reset) {
|
if (this.settings.reset) {
|
||||||
|
@ -209,8 +246,16 @@ var VanillaTilt = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
VanillaTilt.prototype.getValues = function getValues() {
|
VanillaTilt.prototype.getValues = function getValues() {
|
||||||
var x = (this.event.clientX - this.left) / this.width;
|
var x = void 0,
|
||||||
var y = (this.event.clientY - this.top) / this.height;
|
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);
|
x = Math.min(Math.max(x, 0), 1);
|
||||||
y = Math.min(Math.max(y, 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 {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 {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.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 {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 - false = If the tilt effect has to be reset on exit
|
||||||
* @param {gyroscope} settings.gyroscope - Enable tilting by deviceorientation events
|
* @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 {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,
|
glare: false,
|
||||||
"max-glare": 1,
|
"max-glare": 1,
|
||||||
"glare-prerender": false,
|
"glare-prerender": false,
|
||||||
|
"full-page-listening": false,
|
||||||
"mouse-event-element": null,
|
"mouse-event-element": null,
|
||||||
reset: true,
|
reset: true,
|
||||||
gyroscope: true,
|
gyroscope: true,
|
||||||
gyroscopeMinAngleX: -45,
|
gyroscopeMinAngleX: -45,
|
||||||
gyroscopeMaxAngleX: 45,
|
gyroscopeMaxAngleX: 45,
|
||||||
gyroscopeMinAngleY: -45,
|
gyroscopeMinAngleY: -45,
|
||||||
gyroscopeMaxAngleY: 45
|
gyroscopeMaxAngleY: 45,
|
||||||
|
gyroscopeSamples: 10
|
||||||
};
|
};
|
||||||
|
|
||||||
var newSettings = {};
|
var newSettings = {};
|
||||||
|
|
2
dist/vanilla-tilt.babel.min.js
vendored
2
dist/vanilla-tilt.babel.min.js
vendored
File diff suppressed because one or more lines are too long
64
dist/vanilla-tilt.js
vendored
64
dist/vanilla-tilt.js
vendored
|
@ -5,7 +5,7 @@ var VanillaTilt = (function () {
|
||||||
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
|
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
|
||||||
* Original idea: https://github.com/gijsroge/tilt.js
|
* Original idea: https://github.com/gijsroge/tilt.js
|
||||||
* MIT License.
|
* MIT License.
|
||||||
* Version 1.6.1
|
* Version 1.6.2
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class VanillaTilt {
|
class VanillaTilt {
|
||||||
|
@ -18,6 +18,12 @@ class VanillaTilt {
|
||||||
this.height = null;
|
this.height = null;
|
||||||
this.left = null;
|
this.left = null;
|
||||||
this.top = null;
|
this.top = null;
|
||||||
|
|
||||||
|
this.gammazero = null;
|
||||||
|
this.betazero = null;
|
||||||
|
this.lastgammazero = null;
|
||||||
|
this.lastbetazero = null;
|
||||||
|
|
||||||
this.transitionTimeout = null;
|
this.transitionTimeout = null;
|
||||||
this.updateCall = null;
|
this.updateCall = null;
|
||||||
|
|
||||||
|
@ -32,7 +38,9 @@ class VanillaTilt {
|
||||||
|
|
||||||
this.glare = this.isSettingTrue(this.settings.glare);
|
this.glare = this.isSettingTrue(this.settings.glare);
|
||||||
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
|
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.gyroscope = this.isSettingTrue(this.settings.gyroscope);
|
||||||
|
this.gyroscopeSamples = this.settings.gyroscopeSamples;
|
||||||
|
|
||||||
if (this.glare) {
|
if (this.glare) {
|
||||||
this.prepareGlare();
|
this.prepareGlare();
|
||||||
|
@ -79,9 +87,14 @@ class VanillaTilt {
|
||||||
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
|
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
|
||||||
|
|
||||||
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
|
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
|
||||||
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
|
|
||||||
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
|
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) {
|
if (this.glare) {
|
||||||
window.addEventListener("resize", this.onWindowResizeBind);
|
window.addEventListener("resize", this.onWindowResizeBind);
|
||||||
}
|
}
|
||||||
|
@ -96,10 +109,15 @@ class VanillaTilt {
|
||||||
*/
|
*/
|
||||||
removeEventListeners() {
|
removeEventListeners() {
|
||||||
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
|
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
|
||||||
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
|
|
||||||
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
|
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);
|
window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -130,14 +148,29 @@ class VanillaTilt {
|
||||||
|
|
||||||
this.updateElementPosition();
|
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 totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX;
|
||||||
const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
|
const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
|
||||||
|
|
||||||
const degreesPerPixelX = totalAngleX / this.width;
|
const degreesPerPixelX = totalAngleX / this.width;
|
||||||
const degreesPerPixelY = totalAngleY / this.height;
|
const degreesPerPixelY = totalAngleY / this.height;
|
||||||
|
|
||||||
const angleX = event.gamma - this.settings.gyroscopeMinAngleX;
|
const angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero);
|
||||||
const angleY = event.beta - this.settings.gyroscopeMinAngleY;
|
const angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero);
|
||||||
|
|
||||||
const posX = angleX / degreesPerPixelX;
|
const posX = angleX / degreesPerPixelX;
|
||||||
const posY = angleY / degreesPerPixelY;
|
const posY = angleY / degreesPerPixelY;
|
||||||
|
@ -170,6 +203,10 @@ class VanillaTilt {
|
||||||
}
|
}
|
||||||
|
|
||||||
onMouseLeave() {
|
onMouseLeave() {
|
||||||
|
if (this.fullPageListening) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.setTransition();
|
this.setTransition();
|
||||||
|
|
||||||
if (this.settings.reset) {
|
if (this.settings.reset) {
|
||||||
|
@ -197,8 +234,15 @@ class VanillaTilt {
|
||||||
}
|
}
|
||||||
|
|
||||||
getValues() {
|
getValues() {
|
||||||
let x = (this.event.clientX - this.left) / this.width;
|
let x, y;
|
||||||
let y = (this.event.clientY - this.top) / this.height;
|
|
||||||
|
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);
|
x = Math.min(Math.max(x, 0), 1);
|
||||||
y = Math.min(Math.max(y, 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 {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 {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.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 {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 - false = If the tilt effect has to be reset on exit
|
||||||
* @param {gyroscope} settings.gyroscope - Enable tilting by deviceorientation events
|
* @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 {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) {
|
extendSettings(settings) {
|
||||||
let defaultSettings = {
|
let defaultSettings = {
|
||||||
|
@ -350,6 +396,7 @@ class VanillaTilt {
|
||||||
glare: false,
|
glare: false,
|
||||||
"max-glare": 1,
|
"max-glare": 1,
|
||||||
"glare-prerender": false,
|
"glare-prerender": false,
|
||||||
|
"full-page-listening": false,
|
||||||
"mouse-event-element": null,
|
"mouse-event-element": null,
|
||||||
reset: true,
|
reset: true,
|
||||||
gyroscope: true,
|
gyroscope: true,
|
||||||
|
@ -357,6 +404,7 @@ class VanillaTilt {
|
||||||
gyroscopeMaxAngleX: 45,
|
gyroscopeMaxAngleX: 45,
|
||||||
gyroscopeMinAngleY: -45,
|
gyroscopeMinAngleY: -45,
|
||||||
gyroscopeMaxAngleY: 45,
|
gyroscopeMaxAngleY: 45,
|
||||||
|
gyroscopeSamples: 10
|
||||||
};
|
};
|
||||||
|
|
||||||
let newSettings = {};
|
let newSettings = {};
|
||||||
|
|
2
dist/vanilla-tilt.min.js
vendored
2
dist/vanilla-tilt.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -18,6 +18,7 @@ A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https
|
||||||
</body>
|
</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
|
### Options
|
||||||
```js
|
```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
|
speed: 300, // Speed of the enter/exit transition
|
||||||
transition: true, // Set a transition on enter/exit.
|
transition: true, // Set a transition on enter/exit.
|
||||||
axis: null, // What axis should be disabled. Can be X or Y.
|
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.
|
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%)
|
"max-glare": 1, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
|
||||||
"glare-prerender": false, // false = VanillaTilt creates the glare elements for you, otherwise
|
"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
|
// 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
|
"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,
|
"full-page-listening": false, // If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
|
||||||
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;
|
gyroscope: true, // Boolean to enable/disable device orientation detection,
|
||||||
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;
|
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;
|
||||||
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;
|
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;
|
||||||
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;
|
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
|
#### Typings
|
||||||
|
|
||||||
Installing typings using npm
|
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!
|
||||||
```
|
|
||||||
npm install @types/vanilla-tilt
|
|
||||||
```
|
|
||||||
|
|
||||||
### Credits
|
### 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)
|
- [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)
|
- [Oleg Postoev](https://github.com/Dok11)
|
||||||
- [Matteo Rigon](https://github.com/matteo-rigon) (Device orientation support)
|
- [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
|
### License
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
|
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
|
||||||
* Original idea: https://github.com/gijsroge/tilt.js
|
* Original idea: https://github.com/gijsroge/tilt.js
|
||||||
* MIT License.
|
* MIT License.
|
||||||
* Version 1.6.1
|
* Version 1.6.2
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class VanillaTilt {
|
class VanillaTilt {
|
||||||
|
@ -15,6 +15,12 @@ class VanillaTilt {
|
||||||
this.height = null;
|
this.height = null;
|
||||||
this.left = null;
|
this.left = null;
|
||||||
this.top = null;
|
this.top = null;
|
||||||
|
|
||||||
|
this.gammazero = null;
|
||||||
|
this.betazero = null;
|
||||||
|
this.lastgammazero = null;
|
||||||
|
this.lastbetazero = null;
|
||||||
|
|
||||||
this.transitionTimeout = null;
|
this.transitionTimeout = null;
|
||||||
this.updateCall = null;
|
this.updateCall = null;
|
||||||
|
|
||||||
|
@ -29,7 +35,9 @@ class VanillaTilt {
|
||||||
|
|
||||||
this.glare = this.isSettingTrue(this.settings.glare);
|
this.glare = this.isSettingTrue(this.settings.glare);
|
||||||
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
|
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.gyroscope = this.isSettingTrue(this.settings.gyroscope);
|
||||||
|
this.gyroscopeSamples = this.settings.gyroscopeSamples;
|
||||||
|
|
||||||
if (this.glare) {
|
if (this.glare) {
|
||||||
this.prepareGlare();
|
this.prepareGlare();
|
||||||
|
@ -76,9 +84,14 @@ class VanillaTilt {
|
||||||
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
|
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
|
||||||
|
|
||||||
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
|
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
|
||||||
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
|
|
||||||
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
|
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) {
|
if (this.glare) {
|
||||||
window.addEventListener("resize", this.onWindowResizeBind);
|
window.addEventListener("resize", this.onWindowResizeBind);
|
||||||
}
|
}
|
||||||
|
@ -93,10 +106,15 @@ class VanillaTilt {
|
||||||
*/
|
*/
|
||||||
removeEventListeners() {
|
removeEventListeners() {
|
||||||
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
|
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
|
||||||
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
|
|
||||||
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
|
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);
|
window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -127,14 +145,29 @@ class VanillaTilt {
|
||||||
|
|
||||||
this.updateElementPosition();
|
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 totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX;
|
||||||
const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
|
const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
|
||||||
|
|
||||||
const degreesPerPixelX = totalAngleX / this.width;
|
const degreesPerPixelX = totalAngleX / this.width;
|
||||||
const degreesPerPixelY = totalAngleY / this.height;
|
const degreesPerPixelY = totalAngleY / this.height;
|
||||||
|
|
||||||
const angleX = event.gamma - this.settings.gyroscopeMinAngleX;
|
const angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero);
|
||||||
const angleY = event.beta - this.settings.gyroscopeMinAngleY;
|
const angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero);
|
||||||
|
|
||||||
const posX = angleX / degreesPerPixelX;
|
const posX = angleX / degreesPerPixelX;
|
||||||
const posY = angleY / degreesPerPixelY;
|
const posY = angleY / degreesPerPixelY;
|
||||||
|
@ -167,6 +200,10 @@ class VanillaTilt {
|
||||||
}
|
}
|
||||||
|
|
||||||
onMouseLeave() {
|
onMouseLeave() {
|
||||||
|
if (this.fullPageListening) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.setTransition();
|
this.setTransition();
|
||||||
|
|
||||||
if (this.settings.reset) {
|
if (this.settings.reset) {
|
||||||
|
@ -194,8 +231,15 @@ class VanillaTilt {
|
||||||
}
|
}
|
||||||
|
|
||||||
getValues() {
|
getValues() {
|
||||||
let x = (this.event.clientX - this.left) / this.width;
|
let x, y;
|
||||||
let y = (this.event.clientY - this.top) / this.height;
|
|
||||||
|
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);
|
x = Math.min(Math.max(x, 0), 1);
|
||||||
y = Math.min(Math.max(y, 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 {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 {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.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 {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 - false = If the tilt effect has to be reset on exit
|
||||||
* @param {gyroscope} settings.gyroscope - Enable tilting by deviceorientation events
|
* @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 {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) {
|
extendSettings(settings) {
|
||||||
let defaultSettings = {
|
let defaultSettings = {
|
||||||
|
@ -347,6 +393,7 @@ class VanillaTilt {
|
||||||
glare: false,
|
glare: false,
|
||||||
"max-glare": 1,
|
"max-glare": 1,
|
||||||
"glare-prerender": false,
|
"glare-prerender": false,
|
||||||
|
"full-page-listening": false,
|
||||||
"mouse-event-element": null,
|
"mouse-event-element": null,
|
||||||
reset: true,
|
reset: true,
|
||||||
gyroscope: true,
|
gyroscope: true,
|
||||||
|
@ -354,6 +401,7 @@ class VanillaTilt {
|
||||||
gyroscopeMaxAngleX: 45,
|
gyroscopeMaxAngleX: 45,
|
||||||
gyroscopeMinAngleY: -45,
|
gyroscopeMinAngleY: -45,
|
||||||
gyroscopeMaxAngleY: 45,
|
gyroscopeMaxAngleY: 45,
|
||||||
|
gyroscopeSamples: 10
|
||||||
};
|
};
|
||||||
|
|
||||||
let newSettings = {};
|
let newSettings = {};
|
||||||
|
|
|
@ -10,7 +10,7 @@ var classCallCheck = function (instance, Constructor) {
|
||||||
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
|
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
|
||||||
* Original idea: https://github.com/gijsroge/tilt.js
|
* Original idea: https://github.com/gijsroge/tilt.js
|
||||||
* MIT License.
|
* MIT License.
|
||||||
* Version 1.6.1
|
* Version 1.6.2
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var VanillaTilt = function () {
|
var VanillaTilt = function () {
|
||||||
|
@ -26,6 +26,12 @@ var VanillaTilt = function () {
|
||||||
this.height = null;
|
this.height = null;
|
||||||
this.left = null;
|
this.left = null;
|
||||||
this.top = null;
|
this.top = null;
|
||||||
|
|
||||||
|
this.gammazero = null;
|
||||||
|
this.betazero = null;
|
||||||
|
this.lastgammazero = null;
|
||||||
|
this.lastbetazero = null;
|
||||||
|
|
||||||
this.transitionTimeout = null;
|
this.transitionTimeout = null;
|
||||||
this.updateCall = null;
|
this.updateCall = null;
|
||||||
|
|
||||||
|
@ -40,7 +46,9 @@ var VanillaTilt = function () {
|
||||||
|
|
||||||
this.glare = this.isSettingTrue(this.settings.glare);
|
this.glare = this.isSettingTrue(this.settings.glare);
|
||||||
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
|
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.gyroscope = this.isSettingTrue(this.settings.gyroscope);
|
||||||
|
this.gyroscopeSamples = this.settings.gyroscopeSamples;
|
||||||
|
|
||||||
if (this.glare) {
|
if (this.glare) {
|
||||||
this.prepareGlare();
|
this.prepareGlare();
|
||||||
|
@ -91,9 +99,14 @@ var VanillaTilt = function () {
|
||||||
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
|
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
|
||||||
|
|
||||||
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
|
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
|
||||||
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
|
|
||||||
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
|
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) {
|
if (this.glare) {
|
||||||
window.addEventListener("resize", this.onWindowResizeBind);
|
window.addEventListener("resize", this.onWindowResizeBind);
|
||||||
}
|
}
|
||||||
|
@ -110,9 +123,14 @@ var VanillaTilt = function () {
|
||||||
|
|
||||||
VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
|
VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
|
||||||
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
|
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
|
||||||
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
|
|
||||||
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
|
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) {
|
if (this.gyroscope) {
|
||||||
window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
|
window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
|
||||||
}
|
}
|
||||||
|
@ -144,14 +162,29 @@ var VanillaTilt = function () {
|
||||||
|
|
||||||
this.updateElementPosition();
|
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 totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX;
|
||||||
var totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
|
var totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
|
||||||
|
|
||||||
var degreesPerPixelX = totalAngleX / this.width;
|
var degreesPerPixelX = totalAngleX / this.width;
|
||||||
var degreesPerPixelY = totalAngleY / this.height;
|
var degreesPerPixelY = totalAngleY / this.height;
|
||||||
|
|
||||||
var angleX = event.gamma - this.settings.gyroscopeMinAngleX;
|
var angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero);
|
||||||
var angleY = event.beta - this.settings.gyroscopeMinAngleY;
|
var angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero);
|
||||||
|
|
||||||
var posX = angleX / degreesPerPixelX;
|
var posX = angleX / degreesPerPixelX;
|
||||||
var posY = angleY / degreesPerPixelY;
|
var posY = angleY / degreesPerPixelY;
|
||||||
|
@ -184,6 +217,10 @@ var VanillaTilt = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
VanillaTilt.prototype.onMouseLeave = function onMouseLeave() {
|
VanillaTilt.prototype.onMouseLeave = function onMouseLeave() {
|
||||||
|
if (this.fullPageListening) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.setTransition();
|
this.setTransition();
|
||||||
|
|
||||||
if (this.settings.reset) {
|
if (this.settings.reset) {
|
||||||
|
@ -208,8 +245,16 @@ var VanillaTilt = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
VanillaTilt.prototype.getValues = function getValues() {
|
VanillaTilt.prototype.getValues = function getValues() {
|
||||||
var x = (this.event.clientX - this.left) / this.width;
|
var x = void 0,
|
||||||
var y = (this.event.clientY - this.top) / this.height;
|
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);
|
x = Math.min(Math.max(x, 0), 1);
|
||||||
y = Math.min(Math.max(y, 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 {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 {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.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 {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 - false = If the tilt effect has to be reset on exit
|
||||||
* @param {gyroscope} settings.gyroscope - Enable tilting by deviceorientation events
|
* @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 {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,
|
glare: false,
|
||||||
"max-glare": 1,
|
"max-glare": 1,
|
||||||
"glare-prerender": false,
|
"glare-prerender": false,
|
||||||
|
"full-page-listening": false,
|
||||||
"mouse-event-element": null,
|
"mouse-event-element": null,
|
||||||
reset: true,
|
reset: true,
|
||||||
gyroscope: true,
|
gyroscope: true,
|
||||||
gyroscopeMinAngleX: -45,
|
gyroscopeMinAngleX: -45,
|
||||||
gyroscopeMaxAngleX: 45,
|
gyroscopeMaxAngleX: 45,
|
||||||
gyroscopeMinAngleY: -45,
|
gyroscopeMinAngleY: -45,
|
||||||
gyroscopeMaxAngleY: 45
|
gyroscopeMaxAngleY: 45,
|
||||||
|
gyroscopeSamples: 10
|
||||||
};
|
};
|
||||||
|
|
||||||
var newSettings = {};
|
var newSettings = {};
|
||||||
|
|
517
package-lock.json
generated
517
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -1,11 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "vanilla-tilt",
|
"name": "vanilla-tilt",
|
||||||
"version": "1.6.1",
|
"version": "1.6.2",
|
||||||
"description": "A smooth 3D tilt javascript library forked from Tilt.js",
|
"description": "A smooth 3D tilt javascript library forked from Tilt.js",
|
||||||
"main": "lib/vanilla-tilt.js",
|
"main": "lib/vanilla-tilt.js",
|
||||||
"module_es2015": "lib/vanilla-tilt.es2015.js",
|
"module_es2015": "lib/vanilla-tilt.es2015.js",
|
||||||
"jsnext:main": "lib/vanilla-tilt.es2015.js",
|
"jsnext:main": "lib/vanilla-tilt.es2015.js",
|
||||||
"distrib": "dist/vanilla-tilt.js",
|
"distrib": "dist/vanilla-tilt.js",
|
||||||
|
"types": "vanilla-tilt.d.ts",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
"build": "npm run build:lib && cp ./README.md ./lib",
|
"build": "npm run build:lib && cp ./README.md ./lib",
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
|
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
|
||||||
* Original idea: https://github.com/gijsroge/tilt.js
|
* Original idea: https://github.com/gijsroge/tilt.js
|
||||||
* MIT License.
|
* MIT License.
|
||||||
* Version 1.6.1
|
* Version 1.6.2
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export default class VanillaTilt {
|
export default class VanillaTilt {
|
||||||
|
@ -15,6 +15,12 @@ export default class VanillaTilt {
|
||||||
this.height = null;
|
this.height = null;
|
||||||
this.left = null;
|
this.left = null;
|
||||||
this.top = null;
|
this.top = null;
|
||||||
|
|
||||||
|
this.gammazero = null;
|
||||||
|
this.betazero = null;
|
||||||
|
this.lastgammazero = null;
|
||||||
|
this.lastbetazero = null;
|
||||||
|
|
||||||
this.transitionTimeout = null;
|
this.transitionTimeout = null;
|
||||||
this.updateCall = null;
|
this.updateCall = null;
|
||||||
|
|
||||||
|
@ -29,7 +35,9 @@ export default class VanillaTilt {
|
||||||
|
|
||||||
this.glare = this.isSettingTrue(this.settings.glare);
|
this.glare = this.isSettingTrue(this.settings.glare);
|
||||||
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
|
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.gyroscope = this.isSettingTrue(this.settings.gyroscope);
|
||||||
|
this.gyroscopeSamples = this.settings.gyroscopeSamples;
|
||||||
|
|
||||||
if (this.glare) {
|
if (this.glare) {
|
||||||
this.prepareGlare();
|
this.prepareGlare();
|
||||||
|
@ -77,9 +85,14 @@ export default class VanillaTilt {
|
||||||
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
|
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
|
||||||
|
|
||||||
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
|
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
|
||||||
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
|
|
||||||
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
|
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) {
|
if (this.glare) {
|
||||||
window.addEventListener("resize", this.onWindowResizeBind);
|
window.addEventListener("resize", this.onWindowResizeBind);
|
||||||
}
|
}
|
||||||
|
@ -94,10 +107,15 @@ export default class VanillaTilt {
|
||||||
*/
|
*/
|
||||||
removeEventListeners() {
|
removeEventListeners() {
|
||||||
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
|
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
|
||||||
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
|
|
||||||
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
|
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);
|
window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -128,14 +146,29 @@ export default class VanillaTilt {
|
||||||
|
|
||||||
this.updateElementPosition();
|
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 totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX;
|
||||||
const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
|
const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
|
||||||
|
|
||||||
const degreesPerPixelX = totalAngleX / this.width;
|
const degreesPerPixelX = totalAngleX / this.width;
|
||||||
const degreesPerPixelY = totalAngleY / this.height;
|
const degreesPerPixelY = totalAngleY / this.height;
|
||||||
|
|
||||||
const angleX = event.gamma - this.settings.gyroscopeMinAngleX;
|
const angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero);
|
||||||
const angleY = event.beta - this.settings.gyroscopeMinAngleY;
|
const angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero);
|
||||||
|
|
||||||
const posX = angleX / degreesPerPixelX;
|
const posX = angleX / degreesPerPixelX;
|
||||||
const posY = angleY / degreesPerPixelY;
|
const posY = angleY / degreesPerPixelY;
|
||||||
|
@ -168,6 +201,10 @@ export default class VanillaTilt {
|
||||||
}
|
}
|
||||||
|
|
||||||
onMouseLeave() {
|
onMouseLeave() {
|
||||||
|
if (this.fullPageListening) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.setTransition();
|
this.setTransition();
|
||||||
|
|
||||||
if (this.settings.reset) {
|
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 {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 {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.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 {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 - false = If the tilt effect has to be reset on exit
|
||||||
* @param {gyroscope} settings.gyroscope - Enable tilting by deviceorientation events
|
* @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 {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 {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 {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) {
|
extendSettings(settings) {
|
||||||
let defaultSettings = {
|
let defaultSettings = {
|
||||||
|
@ -361,6 +400,7 @@ export default class VanillaTilt {
|
||||||
glare: false,
|
glare: false,
|
||||||
"max-glare": 1,
|
"max-glare": 1,
|
||||||
"glare-prerender": false,
|
"glare-prerender": false,
|
||||||
|
"full-page-listening": false,
|
||||||
"mouse-event-element": null,
|
"mouse-event-element": null,
|
||||||
reset: true,
|
reset: true,
|
||||||
gyroscope: true,
|
gyroscope: true,
|
||||||
|
@ -369,7 +409,8 @@ export default class VanillaTilt {
|
||||||
gyroscopeMinAngleY: -45,
|
gyroscopeMinAngleY: -45,
|
||||||
gyroscopeMaxAngleY: 45,
|
gyroscopeMaxAngleY: 45,
|
||||||
startX: 0,
|
startX: 0,
|
||||||
startY: 0
|
startY: 0,
|
||||||
|
gyroscopeSamples: 10
|
||||||
};
|
};
|
||||||
|
|
||||||
let newSettings = {};
|
let newSettings = {};
|
||||||
|
|
128
test/index.html
Normal file
128
test/index.html
Normal 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
153
vanilla-tilt.d.ts
vendored
Normal 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;
|
||||||
|
}
|
Loading…
Reference in a new issue