Skip to content

Commit

Permalink
Update version to 1.5.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@micku7zu
micku7zu committed Oct 17, 2018
1 parent 66daa37 commit cb39058
Show file tree
Hide file tree
Showing 11 changed files with 211 additions and 204 deletions.
1 change: 1 addition & 0 deletions CONTRIBUTORS.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
# Contributors

- [Livio Brunner](https://github.com/BrunnerLivio) <<a href="mailto:[email protected]">[email protected]</a>> (Typings & Glare Effect)
- [Oleg Postoev](https://github.com/Dok11)
26 changes: 13 additions & 13 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,20 @@ A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https
### Options
```js
{
reverse: false, // reverse the tilt direction
max: 35, // max tilt rotation (degrees)
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
scale: 1, // 2 = 200%, 1.5 = 150%, etc..
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.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
glare: false // if it should have a "glare" effect
"max-glare": 1, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
"glare-prerender": false, // false = VanillaTilt creates the glare elements for you, otherwise
reverse: false, // reverse the tilt direction
max: 35, // max tilt rotation (degrees)
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
scale: 1, // 2 = 200%, 1.5 = 150%, etc..
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.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
glare: false // if it should have a "glare" effect
"max-glare": 1, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
"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
mouseEventElement: 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
}
```

Expand Down
70 changes: 35 additions & 35 deletions dist/vanilla-tilt.babel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ var classCallCheck = function (instance, Constructor) {
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
* Original idea: https://github.com/gijsroge/tilt.js
* MIT License.
* Version 1.4.1
* Version 1.5.0
*/

var VanillaTilt = function () {
Expand Down Expand Up @@ -40,7 +40,7 @@ var VanillaTilt = function () {
this.reverse = this.settings.reverse ? -1 : 1;

this.glare = this.isSettingTrue(this.settings.glare);
this.glarePrerender = this.isSettingTrue(this.settings['glare-prerender']);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);

if (this.glare) {
this.prepareGlare();
Expand All @@ -60,20 +60,20 @@ var VanillaTilt = function () {


VanillaTilt.prototype.getElementListener = function getElementListener() {
if (!this.settings || !this.settings.mouseEventElement) {
if (!this.settings || !this.settings["mouse-event-element"]) {
return this.element;
}

if (typeof this.settings.mouseEventElement === 'string') {
var mouseEventElement = document.querySelector(this.settings.mouseEventElement);
if (typeof this.settings["mouse-event-element"] === "string") {
var mouseEventElement = document.querySelector(this.settings["mouse-event-element"]);

if (mouseEventElement) {
return mouseEventElement;
}
}

if (this.settings.mouseEventElement instanceof Node && this.settings.mouseEventElement) {
return this.settings.mouseEventElement;
if (this.settings["mouse-event-element"] instanceof Node) {
return this.settings["mouse-event-element"];
}
};

Expand All @@ -89,12 +89,12 @@ var VanillaTilt = function () {
this.onMouseLeaveBind = this.onMouseLeave.bind(this);
this.onWindowResizeBind = this.onWindowResizeBind.bind(this);

this.elementListener.addEventListener('mouseenter', this.onMouseEnterBind);
this.elementListener.addEventListener('mousemove', this.onMouseMoveBind);
this.elementListener.addEventListener('mouseleave', this.onMouseLeaveBind);
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);

if (this.glare) {
window.addEventListener('resize', this.onWindowResizeBind);
window.addEventListener("resize", this.onWindowResizeBind);
}
};

Expand All @@ -104,12 +104,12 @@ 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);
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);

if (this.glare) {
window.removeEventListener('resize', this.onWindowResizeBind);
window.removeEventListener("resize", this.onWindowResizeBind);
}
};

Expand All @@ -130,7 +130,7 @@ var VanillaTilt = function () {

VanillaTilt.prototype.onMouseEnter = function onMouseEnter() {
this.updateElementPosition();
this.element.style.willChange = 'transform';
this.element.style.willChange = "transform";
this.setTransition();
};

Expand Down Expand Up @@ -162,8 +162,8 @@ var VanillaTilt = function () {
}

if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)";
this.glareElement.style.opacity = "0";
}
};

Expand Down Expand Up @@ -250,23 +250,23 @@ var VanillaTilt = function () {
});

Object.assign(this.glareElement.style, {
'position': 'absolute',
'top': '50%',
'left': '50%',
'pointer-events': 'none',
'background-image': "linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",
'width': this.element.offsetWidth * 2 + "px",
'height': this.element.offsetWidth * 2 + "px",
'transform': 'rotate(180deg) translate(-50%, -50%)',
'transform-origin': '0% 0%',
'opacity': '0'
"position": "absolute",
"top": "50%",
"left": "50%",
"pointer-events": "none",
"background-image": "linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",
"width": this.element.offsetWidth * 2 + "px",
"height": this.element.offsetWidth * 2 + "px",
"transform": "rotate(180deg) translate(-50%, -50%)",
"transform-origin": "0% 0%",
"opacity": "0"
});
};

VanillaTilt.prototype.updateGlareSize = function updateGlareSize() {
Object.assign(this.glareElement.style, {
'width': "" + this.element.offsetWidth * 2,
'height': "" + this.element.offsetWidth * 2
"width": "" + this.element.offsetWidth * 2,
"height": "" + this.element.offsetWidth * 2
});
};

Expand Down Expand Up @@ -302,8 +302,8 @@ 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 {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 {string|object} settings.mouseEventElement - String selector or link to HTML-element what will be listen mouse events
*/


Expand All @@ -312,16 +312,16 @@ var VanillaTilt = function () {
reverse: false,
max: 35,
perspective: 1000,
easing: 'cubic-bezier(.03,.98,.52,.99)',
easing: "cubic-bezier(.03,.98,.52,.99)",
scale: 1,
speed: 300,
transition: true,
axis: null,
glare: false,
'max-glare': 1,
"max-glare": 1,
"glare-prerender": false,
reset: true,
mouseEventElement: null
"mouse-event-element": null,
reset: true
};

var newSettings = {};
Expand Down
Loading

0 comments on commit cb39058

Please sign in to comment.