Socket
Socket
Sign inDemoInstall

vue-rellax

Package Overview
Dependencies
2
Maintainers
2
Versions
2
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.1.0 to 0.2.0

236

dist/vue-rellax.cjs.js
/*!
* Vue Rellax v0.1.0
* https://github.com/yutahaga/vue-rellax
* Vue Rellax v0.2.0
* https://github.com/croutonn/vue-rellax
*
* @license
* Copyright (c) 2018 undefined
* Copyright (c) 2016 Moe Amaya (@moeamaya)
* Copyright (c) 2018 @croutonn
* Released under the MIT license
* https://github.com/yutahaga/vue-rellax/blob/master/LICENSE
* https://github.com/croutonn/vue-rellax/blob/master/LICENSE
*/
'use strict';
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

@@ -30,3 +31,3 @@ function createCommonjsModule(fn, module) {

(function (root, factory) {
if (module.exports) {
if ( module.exports) {
// Node. Does not work with strict CommonJS, but

@@ -40,3 +41,3 @@ // only CommonJS-like environments that support module.exports,

}
}(commonjsGlobal, function () {
}(typeof window !== "undefined" ? window : commonjsGlobal, function () {
var Rellax = function(el, options){

@@ -65,2 +66,14 @@

// Test via a getter in the options object to see if the passive property is accessed
var supportsPassive = false;
try {
var opts = Object.defineProperty({}, 'passive', {
get: function() {
supportsPassive = true;
}
});
window.addEventListener("testPassive", null, opts);
window.removeEventListener("testPassive", null, opts);
} catch (e) {}
// check what cancelAnimation method to use

@@ -86,2 +99,5 @@ var clearLoop = window.cancelAnimationFrame || window.mozCancelAnimationFrame || clearTimeout;

speed: -2,
verticalSpeed: null,
horizontalSpeed: null,
breakpoints: [576, 768, 1201],
center: false,

@@ -93,2 +109,4 @@ wrapper: null,

horizontal: false,
verticalScrollAxis: "y",
horizontalScrollAxis: "x",
callback: function() {},

@@ -104,2 +122,25 @@ };

function validateCustomBreakpoints () {
if (self.options.breakpoints.length === 3 && Array.isArray(self.options.breakpoints)) {
var isAscending = true;
var isNumerical = true;
var lastVal;
self.options.breakpoints.forEach(function (i) {
if (typeof i !== 'number') isNumerical = false;
if (lastVal !== null) {
if (i < lastVal) isAscending = false;
}
lastVal = i;
});
if (isAscending && isNumerical) return;
}
// revert defaults if set incorrectly
self.options.breakpoints = [576, 768, 1201];
console.warn("Rellax: You must pass an array of 3 numbers in ascending order to the breakpoints option. Defaults reverted");
}
if (options && options.breakpoints) {
validateCustomBreakpoints();
}
// By default, rellax class

@@ -120,3 +161,4 @@ if (!el) {

else {
throw new Error("The elements you're trying to select don't exist.");
console.warn("Rellax: The elements you're trying to select don't exist.");
return;
}

@@ -132,3 +174,4 @@

} else {
throw new Error("The wrapper you're trying to use don't exist.");
console.warn("Rellax: The wrapper you're trying to use doesn't exist.");
return;
}

@@ -138,3 +181,14 @@ }

// set a placeholder for the current breakpoint
var currentBreakpoint;
// helper to determine current breakpoint
var getCurrentBreakpoint = function (w) {
var bp = self.options.breakpoints;
if (w < bp[0]) return 'xs';
if (w >= bp[0] && w < bp[1]) return 'sm';
if (w >= bp[1] && w < bp[2]) return 'md';
return 'lg';
};
// Get and cache initial position of all elements

@@ -160,2 +214,4 @@ var cacheBlocks = function() {

screenX = window.innerWidth;
currentBreakpoint = getCurrentBreakpoint(screenX);
setPosition();

@@ -165,2 +221,4 @@

animate();
// If paused, unpause and set listener for window resizing events

@@ -170,4 +228,5 @@ if (pause) {

pause = false;
// Start the loop
update();
}
animate();
};

@@ -181,4 +240,31 @@

var dataSpeed = el.getAttribute( 'data-rellax-speed' );
var dataXsSpeed = el.getAttribute( 'data-rellax-xs-speed' );
var dataMobileSpeed = el.getAttribute( 'data-rellax-mobile-speed' );
var dataTabletSpeed = el.getAttribute( 'data-rellax-tablet-speed' );
var dataDesktopSpeed = el.getAttribute( 'data-rellax-desktop-speed' );
var dataVerticalSpeed = el.getAttribute('data-rellax-vertical-speed');
var dataHorizontalSpeed = el.getAttribute('data-rellax-horizontal-speed');
var dataVericalScrollAxis = el.getAttribute('data-rellax-vertical-scroll-axis');
var dataHorizontalScrollAxis = el.getAttribute('data-rellax-horizontal-scroll-axis');
var dataZindex = el.getAttribute( 'data-rellax-zindex' ) || 0;
var dataMin = el.getAttribute( 'data-rellax-min' );
var dataMax = el.getAttribute( 'data-rellax-max' );
var dataMinX = el.getAttribute('data-rellax-min-x');
var dataMaxX = el.getAttribute('data-rellax-max-x');
var dataMinY = el.getAttribute('data-rellax-min-y');
var dataMaxY = el.getAttribute('data-rellax-max-y');
var mapBreakpoints;
var breakpoints = true;
if (!dataXsSpeed && !dataMobileSpeed && !dataTabletSpeed && !dataDesktopSpeed) {
breakpoints = false;
} else {
mapBreakpoints = {
'xs': dataXsSpeed,
'sm': dataMobileSpeed,
'md': dataTabletSpeed,
'lg': dataDesktopSpeed
};
}
// initializing at scrollY = 0 (top of browser), scrollX = 0 (left of browser)

@@ -196,3 +282,3 @@ // ensures elements are positioned based on HTML layout.

var posY = self.options.vertical ? ( dataPercentage || self.options.center ? wrapperPosY : 0 ) : 0;
var posX = self.options.horizontal ? ( dataPercentage || self.options.center ? (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0 ) : 0;
var posX = self.options.horizontal ? ( dataPercentage || self.options.center ? self.options.wrapper ? self.options.wrapper.scrollLeft : (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0 ) : 0;

@@ -211,6 +297,12 @@ var blockTop = posY + el.getBoundingClientRect().top;

// Optional individual block speed as data attr, otherwise global speed
var speed = dataSpeed ? dataSpeed : self.options.speed;
var speed = (breakpoints && mapBreakpoints[currentBreakpoint] !== null) ? Number(mapBreakpoints[currentBreakpoint]) : (dataSpeed ? dataSpeed : self.options.speed);
var verticalSpeed = dataVerticalSpeed ? dataVerticalSpeed : self.options.verticalSpeed;
var horizontalSpeed = dataHorizontalSpeed ? dataHorizontalSpeed : self.options.horizontalSpeed;
var bases = updatePosition(percentageX, percentageY, speed);
// Optional individual block movement axis direction as data attr, otherwise gobal movement direction
var verticalScrollAxis = dataVericalScrollAxis ? dataVericalScrollAxis : self.options.verticalScrollAxis;
var horizontalScrollAxis = dataHorizontalScrollAxis ? dataHorizontalScrollAxis : self.options.horizontalScrollAxis;
var bases = updatePosition(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed);
// ~~Store non-translate3d transforms~~

@@ -222,5 +314,6 @@ // Store inline styles and extract transforms

// Check if there's an inline styled transform
if (style.indexOf('transform') >= 0) {
var searchResult = /transform\s*:/i.exec(style);
if (searchResult) {
// Get the index of the transform
var index = style.indexOf('transform');
var index = searchResult.index;

@@ -247,5 +340,15 @@ // Trim the style to the transform point and get the following semi-colon index

speed: speed,
verticalSpeed: verticalSpeed,
horizontalSpeed: horizontalSpeed,
verticalScrollAxis: verticalScrollAxis,
horizontalScrollAxis: horizontalScrollAxis,
style: style,
transform: transform,
zindex: dataZindex
zindex: dataZindex,
min: dataMin,
max: dataMax,
minX: dataMinX,
maxX: dataMaxX,
minY: dataMinY,
maxY: dataMaxY
};

@@ -287,6 +390,6 @@ };

// Allow for decimal pixel values
var updatePosition = function(percentageX, percentageY, speed) {
var updatePosition = function(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed) {
var result = {};
var valueX = (speed * (100 * (1 - percentageX)));
var valueY = (speed * (100 * (1 - percentageY)));
var valueX = ((horizontalSpeed ? horizontalSpeed : speed) * (100 * (1 - percentageX)));
var valueY = ((verticalSpeed ? verticalSpeed : speed) * (100 * (1 - percentageY)));

@@ -299,2 +402,13 @@ result.x = self.options.round ? Math.round(valueX) : Math.round(valueX * 100) / 100;

// Remove event listeners and loop again
var deferredUpdate = function() {
window.removeEventListener('resize', deferredUpdate);
window.removeEventListener('orientationchange', deferredUpdate);
(self.options.wrapper ? self.options.wrapper : window).removeEventListener('scroll', deferredUpdate);
(self.options.wrapper ? self.options.wrapper : document).removeEventListener('touchmove', deferredUpdate);
// loop again
loopId = loop(update);
};
// Loop

@@ -304,6 +418,14 @@ var update = function() {

animate();
// loop again
loopId = loop(update);
} else {
loopId = null;
// Don't animate until we get a position updating event
window.addEventListener('resize', deferredUpdate);
window.addEventListener('orientationchange', deferredUpdate);
(self.options.wrapper ? self.options.wrapper : window).addEventListener('scroll', deferredUpdate, supportsPassive ? { passive: true } : false);
(self.options.wrapper ? self.options.wrapper : document).addEventListener('touchmove', deferredUpdate, supportsPassive ? { passive: true } : false);
}
// loop again
loopId = loop(update);
};

@@ -315,10 +437,61 @@

for (var i = 0; i < self.elems.length; i++){
var percentageY = ((posY - blocks[i].top + screenY) / (blocks[i].height + screenY));
var percentageX = ((posX - blocks[i].left + screenX) / (blocks[i].width + screenX));
// Determine relevant movement directions
var verticalScrollAxis = blocks[i].verticalScrollAxis.toLowerCase();
var horizontalScrollAxis = blocks[i].horizontalScrollAxis.toLowerCase();
var verticalScrollX = verticalScrollAxis.indexOf("x") != -1 ? posY : 0;
var verticalScrollY = verticalScrollAxis.indexOf("y") != -1 ? posY : 0;
var horizontalScrollX = horizontalScrollAxis.indexOf("x") != -1 ? posX : 0;
var horizontalScrollY = horizontalScrollAxis.indexOf("y") != -1 ? posX : 0;
var percentageY = ((verticalScrollY + horizontalScrollY - blocks[i].top + screenY) / (blocks[i].height + screenY));
var percentageX = ((verticalScrollX + horizontalScrollX - blocks[i].left + screenX) / (blocks[i].width + screenX));
// Subtracting initialize value, so element stays in same spot as HTML
positions = updatePosition(percentageX, percentageY, blocks[i].speed);// - blocks[i].baseX;
positions = updatePosition(percentageX, percentageY, blocks[i].speed, blocks[i].verticalSpeed, blocks[i].horizontalSpeed);
var positionY = positions.y - blocks[i].baseY;
var positionX = positions.x - blocks[i].baseX;
// The next two "if" blocks go like this:
// Check if a limit is defined (first "min", then "max");
// Check if we need to change the Y or the X
// (Currently working only if just one of the axes is enabled)
// Then, check if the new position is inside the allowed limit
// If so, use new position. If not, set position to limit.
// Check if a min limit is defined
if (blocks[i].min !== null) {
if (self.options.vertical && !self.options.horizontal) {
positionY = positionY <= blocks[i].min ? blocks[i].min : positionY;
}
if (self.options.horizontal && !self.options.vertical) {
positionX = positionX <= blocks[i].min ? blocks[i].min : positionX;
}
}
// Check if directional min limits are defined
if (blocks[i].minY != null) {
positionY = positionY <= blocks[i].minY ? blocks[i].minY : positionY;
}
if (blocks[i].minX != null) {
positionX = positionX <= blocks[i].minX ? blocks[i].minX : positionX;
}
// Check if a max limit is defined
if (blocks[i].max !== null) {
if (self.options.vertical && !self.options.horizontal) {
positionY = positionY >= blocks[i].max ? blocks[i].max : positionY;
}
if (self.options.horizontal && !self.options.vertical) {
positionX = positionX >= blocks[i].max ? blocks[i].max : positionX;
}
}
// Check if directional max limits are defined
if (blocks[i].maxY != null) {
positionY = positionY >= blocks[i].maxY ? blocks[i].maxY : positionY;
}
if (blocks[i].maxX != null) {
positionX = positionX >= blocks[i].maxX ? blocks[i].maxX : positionX;
}
var zindex = blocks[i].zindex;

@@ -353,5 +526,2 @@

// Start the loop
update();
// Allow to recalculate the initial values whenever we want

@@ -370,2 +540,5 @@ self.refresh = init;

var value = _a.value;
if (value === false) {
return;
}
instanceMap.set(el, new rellax(el, value));

@@ -386,2 +559,5 @@ };

destroy(el);
if (value === false) {
return;
}
instanceMap.set(el, new rellax(el, value));

@@ -397,9 +573,9 @@ };

update: update,
unbind: unbind
unbind: unbind,
});
};
var plugin = {
install: install
install: install,
};
module.exports = plugin;

236

dist/vue-rellax.esm.js
/*!
* Vue Rellax v0.1.0
* https://github.com/yutahaga/vue-rellax
* Vue Rellax v0.2.0
* https://github.com/croutonn/vue-rellax
*
* @license
* Copyright (c) 2018 undefined
* Copyright (c) 2016 Moe Amaya (@moeamaya)
* Copyright (c) 2018 @croutonn
* Released under the MIT license
* https://github.com/yutahaga/vue-rellax/blob/master/LICENSE
* https://github.com/croutonn/vue-rellax/blob/master/LICENSE
*/
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

@@ -28,3 +29,3 @@ function createCommonjsModule(fn, module) {

(function (root, factory) {
if (module.exports) {
if ( module.exports) {
// Node. Does not work with strict CommonJS, but

@@ -38,3 +39,3 @@ // only CommonJS-like environments that support module.exports,

}
}(commonjsGlobal, function () {
}(typeof window !== "undefined" ? window : commonjsGlobal, function () {
var Rellax = function(el, options){

@@ -63,2 +64,14 @@

// Test via a getter in the options object to see if the passive property is accessed
var supportsPassive = false;
try {
var opts = Object.defineProperty({}, 'passive', {
get: function() {
supportsPassive = true;
}
});
window.addEventListener("testPassive", null, opts);
window.removeEventListener("testPassive", null, opts);
} catch (e) {}
// check what cancelAnimation method to use

@@ -84,2 +97,5 @@ var clearLoop = window.cancelAnimationFrame || window.mozCancelAnimationFrame || clearTimeout;

speed: -2,
verticalSpeed: null,
horizontalSpeed: null,
breakpoints: [576, 768, 1201],
center: false,

@@ -91,2 +107,4 @@ wrapper: null,

horizontal: false,
verticalScrollAxis: "y",
horizontalScrollAxis: "x",
callback: function() {},

@@ -102,2 +120,25 @@ };

function validateCustomBreakpoints () {
if (self.options.breakpoints.length === 3 && Array.isArray(self.options.breakpoints)) {
var isAscending = true;
var isNumerical = true;
var lastVal;
self.options.breakpoints.forEach(function (i) {
if (typeof i !== 'number') isNumerical = false;
if (lastVal !== null) {
if (i < lastVal) isAscending = false;
}
lastVal = i;
});
if (isAscending && isNumerical) return;
}
// revert defaults if set incorrectly
self.options.breakpoints = [576, 768, 1201];
console.warn("Rellax: You must pass an array of 3 numbers in ascending order to the breakpoints option. Defaults reverted");
}
if (options && options.breakpoints) {
validateCustomBreakpoints();
}
// By default, rellax class

@@ -118,3 +159,4 @@ if (!el) {

else {
throw new Error("The elements you're trying to select don't exist.");
console.warn("Rellax: The elements you're trying to select don't exist.");
return;
}

@@ -130,3 +172,4 @@

} else {
throw new Error("The wrapper you're trying to use don't exist.");
console.warn("Rellax: The wrapper you're trying to use doesn't exist.");
return;
}

@@ -136,3 +179,14 @@ }

// set a placeholder for the current breakpoint
var currentBreakpoint;
// helper to determine current breakpoint
var getCurrentBreakpoint = function (w) {
var bp = self.options.breakpoints;
if (w < bp[0]) return 'xs';
if (w >= bp[0] && w < bp[1]) return 'sm';
if (w >= bp[1] && w < bp[2]) return 'md';
return 'lg';
};
// Get and cache initial position of all elements

@@ -158,2 +212,4 @@ var cacheBlocks = function() {

screenX = window.innerWidth;
currentBreakpoint = getCurrentBreakpoint(screenX);
setPosition();

@@ -163,2 +219,4 @@

animate();
// If paused, unpause and set listener for window resizing events

@@ -168,4 +226,5 @@ if (pause) {

pause = false;
// Start the loop
update();
}
animate();
};

@@ -179,4 +238,31 @@

var dataSpeed = el.getAttribute( 'data-rellax-speed' );
var dataXsSpeed = el.getAttribute( 'data-rellax-xs-speed' );
var dataMobileSpeed = el.getAttribute( 'data-rellax-mobile-speed' );
var dataTabletSpeed = el.getAttribute( 'data-rellax-tablet-speed' );
var dataDesktopSpeed = el.getAttribute( 'data-rellax-desktop-speed' );
var dataVerticalSpeed = el.getAttribute('data-rellax-vertical-speed');
var dataHorizontalSpeed = el.getAttribute('data-rellax-horizontal-speed');
var dataVericalScrollAxis = el.getAttribute('data-rellax-vertical-scroll-axis');
var dataHorizontalScrollAxis = el.getAttribute('data-rellax-horizontal-scroll-axis');
var dataZindex = el.getAttribute( 'data-rellax-zindex' ) || 0;
var dataMin = el.getAttribute( 'data-rellax-min' );
var dataMax = el.getAttribute( 'data-rellax-max' );
var dataMinX = el.getAttribute('data-rellax-min-x');
var dataMaxX = el.getAttribute('data-rellax-max-x');
var dataMinY = el.getAttribute('data-rellax-min-y');
var dataMaxY = el.getAttribute('data-rellax-max-y');
var mapBreakpoints;
var breakpoints = true;
if (!dataXsSpeed && !dataMobileSpeed && !dataTabletSpeed && !dataDesktopSpeed) {
breakpoints = false;
} else {
mapBreakpoints = {
'xs': dataXsSpeed,
'sm': dataMobileSpeed,
'md': dataTabletSpeed,
'lg': dataDesktopSpeed
};
}
// initializing at scrollY = 0 (top of browser), scrollX = 0 (left of browser)

@@ -194,3 +280,3 @@ // ensures elements are positioned based on HTML layout.

var posY = self.options.vertical ? ( dataPercentage || self.options.center ? wrapperPosY : 0 ) : 0;
var posX = self.options.horizontal ? ( dataPercentage || self.options.center ? (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0 ) : 0;
var posX = self.options.horizontal ? ( dataPercentage || self.options.center ? self.options.wrapper ? self.options.wrapper.scrollLeft : (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0 ) : 0;

@@ -209,6 +295,12 @@ var blockTop = posY + el.getBoundingClientRect().top;

// Optional individual block speed as data attr, otherwise global speed
var speed = dataSpeed ? dataSpeed : self.options.speed;
var speed = (breakpoints && mapBreakpoints[currentBreakpoint] !== null) ? Number(mapBreakpoints[currentBreakpoint]) : (dataSpeed ? dataSpeed : self.options.speed);
var verticalSpeed = dataVerticalSpeed ? dataVerticalSpeed : self.options.verticalSpeed;
var horizontalSpeed = dataHorizontalSpeed ? dataHorizontalSpeed : self.options.horizontalSpeed;
var bases = updatePosition(percentageX, percentageY, speed);
// Optional individual block movement axis direction as data attr, otherwise gobal movement direction
var verticalScrollAxis = dataVericalScrollAxis ? dataVericalScrollAxis : self.options.verticalScrollAxis;
var horizontalScrollAxis = dataHorizontalScrollAxis ? dataHorizontalScrollAxis : self.options.horizontalScrollAxis;
var bases = updatePosition(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed);
// ~~Store non-translate3d transforms~~

@@ -220,5 +312,6 @@ // Store inline styles and extract transforms

// Check if there's an inline styled transform
if (style.indexOf('transform') >= 0) {
var searchResult = /transform\s*:/i.exec(style);
if (searchResult) {
// Get the index of the transform
var index = style.indexOf('transform');
var index = searchResult.index;

@@ -245,5 +338,15 @@ // Trim the style to the transform point and get the following semi-colon index

speed: speed,
verticalSpeed: verticalSpeed,
horizontalSpeed: horizontalSpeed,
verticalScrollAxis: verticalScrollAxis,
horizontalScrollAxis: horizontalScrollAxis,
style: style,
transform: transform,
zindex: dataZindex
zindex: dataZindex,
min: dataMin,
max: dataMax,
minX: dataMinX,
maxX: dataMaxX,
minY: dataMinY,
maxY: dataMaxY
};

@@ -285,6 +388,6 @@ };

// Allow for decimal pixel values
var updatePosition = function(percentageX, percentageY, speed) {
var updatePosition = function(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed) {
var result = {};
var valueX = (speed * (100 * (1 - percentageX)));
var valueY = (speed * (100 * (1 - percentageY)));
var valueX = ((horizontalSpeed ? horizontalSpeed : speed) * (100 * (1 - percentageX)));
var valueY = ((verticalSpeed ? verticalSpeed : speed) * (100 * (1 - percentageY)));

@@ -297,2 +400,13 @@ result.x = self.options.round ? Math.round(valueX) : Math.round(valueX * 100) / 100;

// Remove event listeners and loop again
var deferredUpdate = function() {
window.removeEventListener('resize', deferredUpdate);
window.removeEventListener('orientationchange', deferredUpdate);
(self.options.wrapper ? self.options.wrapper : window).removeEventListener('scroll', deferredUpdate);
(self.options.wrapper ? self.options.wrapper : document).removeEventListener('touchmove', deferredUpdate);
// loop again
loopId = loop(update);
};
// Loop

@@ -302,6 +416,14 @@ var update = function() {

animate();
// loop again
loopId = loop(update);
} else {
loopId = null;
// Don't animate until we get a position updating event
window.addEventListener('resize', deferredUpdate);
window.addEventListener('orientationchange', deferredUpdate);
(self.options.wrapper ? self.options.wrapper : window).addEventListener('scroll', deferredUpdate, supportsPassive ? { passive: true } : false);
(self.options.wrapper ? self.options.wrapper : document).addEventListener('touchmove', deferredUpdate, supportsPassive ? { passive: true } : false);
}
// loop again
loopId = loop(update);
};

@@ -313,10 +435,61 @@

for (var i = 0; i < self.elems.length; i++){
var percentageY = ((posY - blocks[i].top + screenY) / (blocks[i].height + screenY));
var percentageX = ((posX - blocks[i].left + screenX) / (blocks[i].width + screenX));
// Determine relevant movement directions
var verticalScrollAxis = blocks[i].verticalScrollAxis.toLowerCase();
var horizontalScrollAxis = blocks[i].horizontalScrollAxis.toLowerCase();
var verticalScrollX = verticalScrollAxis.indexOf("x") != -1 ? posY : 0;
var verticalScrollY = verticalScrollAxis.indexOf("y") != -1 ? posY : 0;
var horizontalScrollX = horizontalScrollAxis.indexOf("x") != -1 ? posX : 0;
var horizontalScrollY = horizontalScrollAxis.indexOf("y") != -1 ? posX : 0;
var percentageY = ((verticalScrollY + horizontalScrollY - blocks[i].top + screenY) / (blocks[i].height + screenY));
var percentageX = ((verticalScrollX + horizontalScrollX - blocks[i].left + screenX) / (blocks[i].width + screenX));
// Subtracting initialize value, so element stays in same spot as HTML
positions = updatePosition(percentageX, percentageY, blocks[i].speed);// - blocks[i].baseX;
positions = updatePosition(percentageX, percentageY, blocks[i].speed, blocks[i].verticalSpeed, blocks[i].horizontalSpeed);
var positionY = positions.y - blocks[i].baseY;
var positionX = positions.x - blocks[i].baseX;
// The next two "if" blocks go like this:
// Check if a limit is defined (first "min", then "max");
// Check if we need to change the Y or the X
// (Currently working only if just one of the axes is enabled)
// Then, check if the new position is inside the allowed limit
// If so, use new position. If not, set position to limit.
// Check if a min limit is defined
if (blocks[i].min !== null) {
if (self.options.vertical && !self.options.horizontal) {
positionY = positionY <= blocks[i].min ? blocks[i].min : positionY;
}
if (self.options.horizontal && !self.options.vertical) {
positionX = positionX <= blocks[i].min ? blocks[i].min : positionX;
}
}
// Check if directional min limits are defined
if (blocks[i].minY != null) {
positionY = positionY <= blocks[i].minY ? blocks[i].minY : positionY;
}
if (blocks[i].minX != null) {
positionX = positionX <= blocks[i].minX ? blocks[i].minX : positionX;
}
// Check if a max limit is defined
if (blocks[i].max !== null) {
if (self.options.vertical && !self.options.horizontal) {
positionY = positionY >= blocks[i].max ? blocks[i].max : positionY;
}
if (self.options.horizontal && !self.options.vertical) {
positionX = positionX >= blocks[i].max ? blocks[i].max : positionX;
}
}
// Check if directional max limits are defined
if (blocks[i].maxY != null) {
positionY = positionY >= blocks[i].maxY ? blocks[i].maxY : positionY;
}
if (blocks[i].maxX != null) {
positionX = positionX >= blocks[i].maxX ? blocks[i].maxX : positionX;
}
var zindex = blocks[i].zindex;

@@ -351,5 +524,2 @@

// Start the loop
update();
// Allow to recalculate the initial values whenever we want

@@ -368,2 +538,5 @@ self.refresh = init;

var value = _a.value;
if (value === false) {
return;
}
instanceMap.set(el, new rellax(el, value));

@@ -384,2 +557,5 @@ };

destroy(el);
if (value === false) {
return;
}
instanceMap.set(el, new rellax(el, value));

@@ -395,9 +571,9 @@ };

update: update,
unbind: unbind
unbind: unbind,
});
};
var plugin = {
install: install
install: install,
};
export default plugin;

240

dist/vue-rellax.js
/*!
* Vue Rellax v0.1.0
* https://github.com/yutahaga/vue-rellax
* Vue Rellax v0.2.0
* https://github.com/croutonn/vue-rellax
*
* @license
* Copyright (c) 2018 undefined
* Copyright (c) 2016 Moe Amaya (@moeamaya)
* Copyright (c) 2018 @croutonn
* Released under the MIT license
* https://github.com/yutahaga/vue-rellax/blob/master/LICENSE
* https://github.com/croutonn/vue-rellax/blob/master/LICENSE
*/

@@ -13,6 +14,6 @@ (function (global, factory) {

typeof define === 'function' && define.amd ? define(factory) :
(global['Vue Rellax'] = factory());
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global['Vue Rellax'] = factory());
}(this, (function () { 'use strict';
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

@@ -35,3 +36,3 @@ function createCommonjsModule(fn, module) {

(function (root, factory) {
if (module.exports) {
if ( module.exports) {
// Node. Does not work with strict CommonJS, but

@@ -45,3 +46,3 @@ // only CommonJS-like environments that support module.exports,

}
}(commonjsGlobal, function () {
}(typeof window !== "undefined" ? window : commonjsGlobal, function () {
var Rellax = function(el, options){

@@ -70,2 +71,14 @@

// Test via a getter in the options object to see if the passive property is accessed
var supportsPassive = false;
try {
var opts = Object.defineProperty({}, 'passive', {
get: function() {
supportsPassive = true;
}
});
window.addEventListener("testPassive", null, opts);
window.removeEventListener("testPassive", null, opts);
} catch (e) {}
// check what cancelAnimation method to use

@@ -91,2 +104,5 @@ var clearLoop = window.cancelAnimationFrame || window.mozCancelAnimationFrame || clearTimeout;

speed: -2,
verticalSpeed: null,
horizontalSpeed: null,
breakpoints: [576, 768, 1201],
center: false,

@@ -98,2 +114,4 @@ wrapper: null,

horizontal: false,
verticalScrollAxis: "y",
horizontalScrollAxis: "x",
callback: function() {},

@@ -109,2 +127,25 @@ };

function validateCustomBreakpoints () {
if (self.options.breakpoints.length === 3 && Array.isArray(self.options.breakpoints)) {
var isAscending = true;
var isNumerical = true;
var lastVal;
self.options.breakpoints.forEach(function (i) {
if (typeof i !== 'number') isNumerical = false;
if (lastVal !== null) {
if (i < lastVal) isAscending = false;
}
lastVal = i;
});
if (isAscending && isNumerical) return;
}
// revert defaults if set incorrectly
self.options.breakpoints = [576, 768, 1201];
console.warn("Rellax: You must pass an array of 3 numbers in ascending order to the breakpoints option. Defaults reverted");
}
if (options && options.breakpoints) {
validateCustomBreakpoints();
}
// By default, rellax class

@@ -125,3 +166,4 @@ if (!el) {

else {
throw new Error("The elements you're trying to select don't exist.");
console.warn("Rellax: The elements you're trying to select don't exist.");
return;
}

@@ -137,3 +179,4 @@

} else {
throw new Error("The wrapper you're trying to use don't exist.");
console.warn("Rellax: The wrapper you're trying to use doesn't exist.");
return;
}

@@ -143,3 +186,14 @@ }

// set a placeholder for the current breakpoint
var currentBreakpoint;
// helper to determine current breakpoint
var getCurrentBreakpoint = function (w) {
var bp = self.options.breakpoints;
if (w < bp[0]) return 'xs';
if (w >= bp[0] && w < bp[1]) return 'sm';
if (w >= bp[1] && w < bp[2]) return 'md';
return 'lg';
};
// Get and cache initial position of all elements

@@ -165,2 +219,4 @@ var cacheBlocks = function() {

screenX = window.innerWidth;
currentBreakpoint = getCurrentBreakpoint(screenX);
setPosition();

@@ -170,2 +226,4 @@

animate();
// If paused, unpause and set listener for window resizing events

@@ -175,4 +233,5 @@ if (pause) {

pause = false;
// Start the loop
update();
}
animate();
};

@@ -186,4 +245,31 @@

var dataSpeed = el.getAttribute( 'data-rellax-speed' );
var dataXsSpeed = el.getAttribute( 'data-rellax-xs-speed' );
var dataMobileSpeed = el.getAttribute( 'data-rellax-mobile-speed' );
var dataTabletSpeed = el.getAttribute( 'data-rellax-tablet-speed' );
var dataDesktopSpeed = el.getAttribute( 'data-rellax-desktop-speed' );
var dataVerticalSpeed = el.getAttribute('data-rellax-vertical-speed');
var dataHorizontalSpeed = el.getAttribute('data-rellax-horizontal-speed');
var dataVericalScrollAxis = el.getAttribute('data-rellax-vertical-scroll-axis');
var dataHorizontalScrollAxis = el.getAttribute('data-rellax-horizontal-scroll-axis');
var dataZindex = el.getAttribute( 'data-rellax-zindex' ) || 0;
var dataMin = el.getAttribute( 'data-rellax-min' );
var dataMax = el.getAttribute( 'data-rellax-max' );
var dataMinX = el.getAttribute('data-rellax-min-x');
var dataMaxX = el.getAttribute('data-rellax-max-x');
var dataMinY = el.getAttribute('data-rellax-min-y');
var dataMaxY = el.getAttribute('data-rellax-max-y');
var mapBreakpoints;
var breakpoints = true;
if (!dataXsSpeed && !dataMobileSpeed && !dataTabletSpeed && !dataDesktopSpeed) {
breakpoints = false;
} else {
mapBreakpoints = {
'xs': dataXsSpeed,
'sm': dataMobileSpeed,
'md': dataTabletSpeed,
'lg': dataDesktopSpeed
};
}
// initializing at scrollY = 0 (top of browser), scrollX = 0 (left of browser)

@@ -201,3 +287,3 @@ // ensures elements are positioned based on HTML layout.

var posY = self.options.vertical ? ( dataPercentage || self.options.center ? wrapperPosY : 0 ) : 0;
var posX = self.options.horizontal ? ( dataPercentage || self.options.center ? (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0 ) : 0;
var posX = self.options.horizontal ? ( dataPercentage || self.options.center ? self.options.wrapper ? self.options.wrapper.scrollLeft : (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0 ) : 0;

@@ -216,6 +302,12 @@ var blockTop = posY + el.getBoundingClientRect().top;

// Optional individual block speed as data attr, otherwise global speed
var speed = dataSpeed ? dataSpeed : self.options.speed;
var speed = (breakpoints && mapBreakpoints[currentBreakpoint] !== null) ? Number(mapBreakpoints[currentBreakpoint]) : (dataSpeed ? dataSpeed : self.options.speed);
var verticalSpeed = dataVerticalSpeed ? dataVerticalSpeed : self.options.verticalSpeed;
var horizontalSpeed = dataHorizontalSpeed ? dataHorizontalSpeed : self.options.horizontalSpeed;
var bases = updatePosition(percentageX, percentageY, speed);
// Optional individual block movement axis direction as data attr, otherwise gobal movement direction
var verticalScrollAxis = dataVericalScrollAxis ? dataVericalScrollAxis : self.options.verticalScrollAxis;
var horizontalScrollAxis = dataHorizontalScrollAxis ? dataHorizontalScrollAxis : self.options.horizontalScrollAxis;
var bases = updatePosition(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed);
// ~~Store non-translate3d transforms~~

@@ -227,5 +319,6 @@ // Store inline styles and extract transforms

// Check if there's an inline styled transform
if (style.indexOf('transform') >= 0) {
var searchResult = /transform\s*:/i.exec(style);
if (searchResult) {
// Get the index of the transform
var index = style.indexOf('transform');
var index = searchResult.index;

@@ -252,5 +345,15 @@ // Trim the style to the transform point and get the following semi-colon index

speed: speed,
verticalSpeed: verticalSpeed,
horizontalSpeed: horizontalSpeed,
verticalScrollAxis: verticalScrollAxis,
horizontalScrollAxis: horizontalScrollAxis,
style: style,
transform: transform,
zindex: dataZindex
zindex: dataZindex,
min: dataMin,
max: dataMax,
minX: dataMinX,
maxX: dataMaxX,
minY: dataMinY,
maxY: dataMaxY
};

@@ -292,6 +395,6 @@ };

// Allow for decimal pixel values
var updatePosition = function(percentageX, percentageY, speed) {
var updatePosition = function(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed) {
var result = {};
var valueX = (speed * (100 * (1 - percentageX)));
var valueY = (speed * (100 * (1 - percentageY)));
var valueX = ((horizontalSpeed ? horizontalSpeed : speed) * (100 * (1 - percentageX)));
var valueY = ((verticalSpeed ? verticalSpeed : speed) * (100 * (1 - percentageY)));

@@ -304,2 +407,13 @@ result.x = self.options.round ? Math.round(valueX) : Math.round(valueX * 100) / 100;

// Remove event listeners and loop again
var deferredUpdate = function() {
window.removeEventListener('resize', deferredUpdate);
window.removeEventListener('orientationchange', deferredUpdate);
(self.options.wrapper ? self.options.wrapper : window).removeEventListener('scroll', deferredUpdate);
(self.options.wrapper ? self.options.wrapper : document).removeEventListener('touchmove', deferredUpdate);
// loop again
loopId = loop(update);
};
// Loop

@@ -309,6 +423,14 @@ var update = function() {

animate();
// loop again
loopId = loop(update);
} else {
loopId = null;
// Don't animate until we get a position updating event
window.addEventListener('resize', deferredUpdate);
window.addEventListener('orientationchange', deferredUpdate);
(self.options.wrapper ? self.options.wrapper : window).addEventListener('scroll', deferredUpdate, supportsPassive ? { passive: true } : false);
(self.options.wrapper ? self.options.wrapper : document).addEventListener('touchmove', deferredUpdate, supportsPassive ? { passive: true } : false);
}
// loop again
loopId = loop(update);
};

@@ -320,10 +442,61 @@

for (var i = 0; i < self.elems.length; i++){
var percentageY = ((posY - blocks[i].top + screenY) / (blocks[i].height + screenY));
var percentageX = ((posX - blocks[i].left + screenX) / (blocks[i].width + screenX));
// Determine relevant movement directions
var verticalScrollAxis = blocks[i].verticalScrollAxis.toLowerCase();
var horizontalScrollAxis = blocks[i].horizontalScrollAxis.toLowerCase();
var verticalScrollX = verticalScrollAxis.indexOf("x") != -1 ? posY : 0;
var verticalScrollY = verticalScrollAxis.indexOf("y") != -1 ? posY : 0;
var horizontalScrollX = horizontalScrollAxis.indexOf("x") != -1 ? posX : 0;
var horizontalScrollY = horizontalScrollAxis.indexOf("y") != -1 ? posX : 0;
var percentageY = ((verticalScrollY + horizontalScrollY - blocks[i].top + screenY) / (blocks[i].height + screenY));
var percentageX = ((verticalScrollX + horizontalScrollX - blocks[i].left + screenX) / (blocks[i].width + screenX));
// Subtracting initialize value, so element stays in same spot as HTML
positions = updatePosition(percentageX, percentageY, blocks[i].speed);// - blocks[i].baseX;
positions = updatePosition(percentageX, percentageY, blocks[i].speed, blocks[i].verticalSpeed, blocks[i].horizontalSpeed);
var positionY = positions.y - blocks[i].baseY;
var positionX = positions.x - blocks[i].baseX;
// The next two "if" blocks go like this:
// Check if a limit is defined (first "min", then "max");
// Check if we need to change the Y or the X
// (Currently working only if just one of the axes is enabled)
// Then, check if the new position is inside the allowed limit
// If so, use new position. If not, set position to limit.
// Check if a min limit is defined
if (blocks[i].min !== null) {
if (self.options.vertical && !self.options.horizontal) {
positionY = positionY <= blocks[i].min ? blocks[i].min : positionY;
}
if (self.options.horizontal && !self.options.vertical) {
positionX = positionX <= blocks[i].min ? blocks[i].min : positionX;
}
}
// Check if directional min limits are defined
if (blocks[i].minY != null) {
positionY = positionY <= blocks[i].minY ? blocks[i].minY : positionY;
}
if (blocks[i].minX != null) {
positionX = positionX <= blocks[i].minX ? blocks[i].minX : positionX;
}
// Check if a max limit is defined
if (blocks[i].max !== null) {
if (self.options.vertical && !self.options.horizontal) {
positionY = positionY >= blocks[i].max ? blocks[i].max : positionY;
}
if (self.options.horizontal && !self.options.vertical) {
positionX = positionX >= blocks[i].max ? blocks[i].max : positionX;
}
}
// Check if directional max limits are defined
if (blocks[i].maxY != null) {
positionY = positionY >= blocks[i].maxY ? blocks[i].maxY : positionY;
}
if (blocks[i].maxX != null) {
positionX = positionX >= blocks[i].maxX ? blocks[i].maxX : positionX;
}
var zindex = blocks[i].zindex;

@@ -358,5 +531,2 @@

// Start the loop
update();
// Allow to recalculate the initial values whenever we want

@@ -375,2 +545,5 @@ self.refresh = init;

var value = _a.value;
if (value === false) {
return;
}
instanceMap.set(el, new rellax(el, value));

@@ -391,6 +564,9 @@ };

destroy(el);
if (value === false) {
return;
}
instanceMap.set(el, new rellax(el, value));
};
var install = function (InjectedVue) {
if (_Vue) {
if ( _Vue) {
throw new Error('[vue-rellax] Vue Rellax is already installed');

@@ -402,7 +578,7 @@ }

update: update,
unbind: unbind
unbind: unbind,
});
};
var plugin = {
install: install
install: install,
};

@@ -409,0 +585,0 @@

11

dist/vue-rellax.min.js
/*!
* Vue Rellax v0.1.0
* https://github.com/yutahaga/vue-rellax
* Vue Rellax v0.2.0
* https://github.com/croutonn/vue-rellax
*
* @license
* Copyright (c) 2018 undefined
* Copyright (c) 2016 Moe Amaya (@moeamaya)
* Copyright (c) 2018 @croutonn
* Released under the MIT license
* https://github.com/yutahaga/vue-rellax/blob/master/LICENSE
* https://github.com/croutonn/vue-rellax/blob/master/LICENSE
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e["Vue Rellax"]=t()}(this,function(){"use strict";var n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};var e,r=(function(e){var t,o;t=n,o=function(){var y=function(e,t){var x=Object.create(y.prototype),l=0,b=0,p=0,T=0,d=[],o=!0,n=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(e){return setTimeout(e,1e3/60)},r=null,i=window.cancelAnimationFrame||window.mozCancelAnimationFrame||clearTimeout,c=window.transformProp||function(){var e=document.createElement("div");if(null===e.style.transform){var t=["Webkit","Moz","ms"];for(var o in t)if(void 0!==e.style[t[o]+"Transform"])return t[o]+"Transform"}return"transform"}();x.options={speed:-2,center:!1,wrapper:null,relativeToWrapper:!1,round:!0,vertical:!0,horizontal:!1,callback:function(){}},t&&Object.keys(t).forEach(function(e){x.options[e]=t[e]}),e||(e=".rellax");var s="string"==typeof e?document.querySelectorAll(e):[e];if(!(0<s.length))throw new Error("The elements you're trying to select don't exist.");if(x.elems=s,x.options.wrapper&&!x.options.wrapper.nodeType){var a=document.querySelector(x.options.wrapper);if(!a)throw new Error("The wrapper you're trying to use don't exist.");x.options.wrapper=a}var u=function(){for(var e=0;e<d.length;e++)x.elems[e].style.cssText=d[e].style;d=[],b=window.innerHeight,T=window.innerWidth,m(),function(){for(var e=0;e<x.elems.length;e++){var t=f(x.elems[e]);d.push(t)}}(),o&&(window.addEventListener("resize",u),o=!1),v()},f=function(e){var t=e.getAttribute("data-rellax-percentage"),o=e.getAttribute("data-rellax-speed"),n=e.getAttribute("data-rellax-zindex")||0,r=x.options.wrapper?x.options.wrapper.scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;x.options.relativeToWrapper&&(r=(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop)-x.options.wrapper.offsetTop);var i=x.options.vertical&&(t||x.options.center)?r:0,s=x.options.horizontal&&(t||x.options.center)?window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft:0,a=i+e.getBoundingClientRect().top,l=e.clientHeight||e.offsetHeight||e.scrollHeight,p=s+e.getBoundingClientRect().left,d=e.clientWidth||e.offsetWidth||e.scrollWidth,c=t||(i-a+b)/(l+b),u=t||(s-p+T)/(d+T);x.options.center&&(c=u=.5);var f=o||x.options.speed,m=z(u,c,f),w=e.style.cssText,v="";if(0<=w.indexOf("transform")){var y=w.indexOf("transform"),h=w.slice(y),g=h.indexOf(";");v=g?" "+h.slice(11,g).replace(/\s/g,""):" "+h.slice(11).replace(/\s/g,"")}return{baseX:m.x,baseY:m.y,top:a,left:p,height:l,width:d,speed:f,style:w,transform:v,zindex:n}},m=function(){var e=l,t=p;if(l=x.options.wrapper?x.options.wrapper.scrollTop:(document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset,p=x.options.wrapper?x.options.wrapper.scrollLeft:(document.documentElement||document.body.parentNode||document.body).scrollLeft||window.pageXOffset,x.options.relativeToWrapper){var o=(document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset;l=o-x.options.wrapper.offsetTop}return!(e==l||!x.options.vertical)||!(t==p||!x.options.horizontal)},z=function(e,t,o){var n={},r=o*(100*(1-e)),i=o*(100*(1-t));return n.x=x.options.round?Math.round(r):Math.round(100*r)/100,n.y=x.options.round?Math.round(i):Math.round(100*i)/100,n},w=function(){m()&&!1===o&&v(),r=n(w)},v=function(){for(var e,t=0;t<x.elems.length;t++){var o=(l-d[t].top+b)/(d[t].height+b),n=(p-d[t].left+T)/(d[t].width+T),r=(e=z(n,o,d[t].speed)).y-d[t].baseY,i=e.x-d[t].baseX,s=d[t].zindex,a="translate3d("+(x.options.horizontal?i:"0")+"px,"+(x.options.vertical?r:"0")+"px,"+s+"px) "+d[t].transform;x.elems[t].style[c]=a}x.options.callback(e)};return x.destroy=function(){for(var e=0;e<x.elems.length;e++)x.elems[e].style.cssText=d[e].style;o||(window.removeEventListener("resize",u),o=!0),i(r),r=null},u(),w(),x.refresh=u,x};return y},e.exports?e.exports=o():t.Rellax=o()}(e={exports:{}},e.exports),e.exports),i=new WeakMap,t=function(e,t,o){var n=t.value;i.set(e,new r(e,n))},s=function(e){var t=i.get(e);t&&t.destroy()},o=function(e){s(e)},a=function(e,t,o){var n=t.value;s(e),i.set(e,new r(e,n))};return{install:function(e){e.directive("rellax",{inserted:t,update:a,unbind:o})}}});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self)["Vue Rellax"]=t()}(this,(function(){"use strict";var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};var t=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(t){var o,n;o="undefined"!=typeof window?window:e,n=function(){var e=function(t,o){var n=Object.create(e.prototype),r=0,i=0,a=0,l=0,s=[],p=!0,d=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(e){return setTimeout(e,1e3/60)},c=null,u=!1;try{var m=Object.defineProperty({},"passive",{get:function(){u=!0}});window.addEventListener("testPassive",null,m),window.removeEventListener("testPassive",null,m)}catch(e){}var f=window.cancelAnimationFrame||window.mozCancelAnimationFrame||clearTimeout,w=window.transformProp||function(){var e=document.createElement("div");if(null===e.style.transform){var t=["Webkit","Moz","ms"];for(var o in t)if(void 0!==e.style[t[o]+"Transform"])return t[o]+"Transform"}return"transform"}();n.options={speed:-2,verticalSpeed:null,horizontalSpeed:null,breakpoints:[576,768,1201],center:!1,wrapper:null,relativeToWrapper:!1,round:!0,vertical:!0,horizontal:!1,verticalScrollAxis:"y",horizontalScrollAxis:"x",callback:function(){}},o&&Object.keys(o).forEach((function(e){n.options[e]=o[e]})),o&&o.breakpoints&&function(){if(3===n.options.breakpoints.length&&Array.isArray(n.options.breakpoints)){var e,t=!0,o=!0;if(n.options.breakpoints.forEach((function(n){"number"!=typeof n&&(o=!1),null!==e&&n<e&&(t=!1),e=n})),t&&o)return}n.options.breakpoints=[576,768,1201],console.warn("Rellax: You must pass an array of 3 numbers in ascending order to the breakpoints option. Defaults reverted")}(),t||(t=".rellax");var x="string"==typeof t?document.querySelectorAll(t):[t];if(x.length>0){if(n.elems=x,n.options.wrapper&&!n.options.wrapper.nodeType){var v=document.querySelector(n.options.wrapper);if(!v)return void console.warn("Rellax: The wrapper you're trying to use doesn't exist.");n.options.wrapper=v}var h,b=function(){for(var e=0;e<s.length;e++)n.elems[e].style.cssText=s[e].style;var t,o;s=[],i=window.innerHeight,l=window.innerWidth,t=l,o=n.options.breakpoints,h=t<o[0]?"xs":t>=o[0]&&t<o[1]?"sm":t>=o[1]&&t<o[2]?"md":"lg",y(),function(){for(var e=0;e<n.elems.length;e++){var t=g(n.elems[e]);s.push(t)}}(),E(),p&&(window.addEventListener("resize",b),p=!1,T())},g=function(e){var t,o=e.getAttribute("data-rellax-percentage"),r=e.getAttribute("data-rellax-speed"),a=e.getAttribute("data-rellax-xs-speed"),s=e.getAttribute("data-rellax-mobile-speed"),p=e.getAttribute("data-rellax-tablet-speed"),d=e.getAttribute("data-rellax-desktop-speed"),c=e.getAttribute("data-rellax-vertical-speed"),u=e.getAttribute("data-rellax-horizontal-speed"),m=e.getAttribute("data-rellax-vertical-scroll-axis"),f=e.getAttribute("data-rellax-horizontal-scroll-axis"),w=e.getAttribute("data-rellax-zindex")||0,x=e.getAttribute("data-rellax-min"),v=e.getAttribute("data-rellax-max"),b=e.getAttribute("data-rellax-min-x"),g=e.getAttribute("data-rellax-max-x"),y=e.getAttribute("data-rellax-min-y"),z=e.getAttribute("data-rellax-max-y"),T=!0;a||s||p||d?t={xs:a,sm:s,md:p,lg:d}:T=!1;var E=n.options.wrapper?n.options.wrapper.scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;n.options.relativeToWrapper&&(E=(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop)-n.options.wrapper.offsetTop);var L=n.options.vertical&&(o||n.options.center)?E:0,S=n.options.horizontal&&(o||n.options.center)?n.options.wrapper?n.options.wrapper.scrollLeft:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft:0,k=L+e.getBoundingClientRect().top,Y=e.clientHeight||e.offsetHeight||e.scrollHeight,O=S+e.getBoundingClientRect().left,X=e.clientWidth||e.offsetWidth||e.scrollWidth,R=o||(L-k+i)/(Y+i),W=o||(S-O+l)/(X+l);n.options.center&&(W=.5,R=.5);var q=T&&null!==t[h]?Number(t[h]):r||n.options.speed,F=c||n.options.verticalSpeed,M=u||n.options.horizontalSpeed,C=m||n.options.verticalScrollAxis,j=f||n.options.horizontalScrollAxis,H=A(W,R,q,F,M),N=e.style.cssText,P="",B=/transform\s*:/i.exec(N);if(B){var D=B.index,V=N.slice(D),G=V.indexOf(";");P=G?" "+V.slice(11,G).replace(/\s/g,""):" "+V.slice(11).replace(/\s/g,"")}return{baseX:H.x,baseY:H.y,top:k,left:O,height:Y,width:X,speed:q,verticalSpeed:F,horizontalSpeed:M,verticalScrollAxis:C,horizontalScrollAxis:j,style:N,transform:P,zindex:w,min:x,max:v,minX:b,maxX:g,minY:y,maxY:z}},y=function(){var e=r,t=a;if(r=n.options.wrapper?n.options.wrapper.scrollTop:(document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset,a=n.options.wrapper?n.options.wrapper.scrollLeft:(document.documentElement||document.body.parentNode||document.body).scrollLeft||window.pageXOffset,n.options.relativeToWrapper){var o=(document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset;r=o-n.options.wrapper.offsetTop}return!(e==r||!n.options.vertical)||!(t==a||!n.options.horizontal)},A=function(e,t,o,r,i){var a={},l=(i||o)*(100*(1-e)),s=(r||o)*(100*(1-t));return a.x=n.options.round?Math.round(l):Math.round(100*l)/100,a.y=n.options.round?Math.round(s):Math.round(100*s)/100,a},z=function(){window.removeEventListener("resize",z),window.removeEventListener("orientationchange",z),(n.options.wrapper?n.options.wrapper:window).removeEventListener("scroll",z),(n.options.wrapper?n.options.wrapper:document).removeEventListener("touchmove",z),c=d(T)},T=function(){y()&&!1===p?(E(),c=d(T)):(c=null,window.addEventListener("resize",z),window.addEventListener("orientationchange",z),(n.options.wrapper?n.options.wrapper:window).addEventListener("scroll",z,!!u&&{passive:!0}),(n.options.wrapper?n.options.wrapper:document).addEventListener("touchmove",z,!!u&&{passive:!0}))},E=function(){for(var e,t=0;t<n.elems.length;t++){var o=s[t].verticalScrollAxis.toLowerCase(),p=s[t].horizontalScrollAxis.toLowerCase(),d=-1!=o.indexOf("x")?r:0,c=-1!=o.indexOf("y")?r:0,u=-1!=p.indexOf("x")?a:0,m=(c+(-1!=p.indexOf("y")?a:0)-s[t].top+i)/(s[t].height+i),f=(d+u-s[t].left+l)/(s[t].width+l),x=(e=A(f,m,s[t].speed,s[t].verticalSpeed,s[t].horizontalSpeed)).y-s[t].baseY,v=e.x-s[t].baseX;null!==s[t].min&&(n.options.vertical&&!n.options.horizontal&&(x=x<=s[t].min?s[t].min:x),n.options.horizontal&&!n.options.vertical&&(v=v<=s[t].min?s[t].min:v)),null!=s[t].minY&&(x=x<=s[t].minY?s[t].minY:x),null!=s[t].minX&&(v=v<=s[t].minX?s[t].minX:v),null!==s[t].max&&(n.options.vertical&&!n.options.horizontal&&(x=x>=s[t].max?s[t].max:x),n.options.horizontal&&!n.options.vertical&&(v=v>=s[t].max?s[t].max:v)),null!=s[t].maxY&&(x=x>=s[t].maxY?s[t].maxY:x),null!=s[t].maxX&&(v=v>=s[t].maxX?s[t].maxX:v);var h=s[t].zindex,b="translate3d("+(n.options.horizontal?v:"0")+"px,"+(n.options.vertical?x:"0")+"px,"+h+"px) "+s[t].transform;n.elems[t].style[w]=b}n.options.callback(e)};return n.destroy=function(){for(var e=0;e<n.elems.length;e++)n.elems[e].style.cssText=s[e].style;p||(window.removeEventListener("resize",b),p=!0),f(c),c=null},b(),n.refresh=b,n}console.warn("Rellax: The elements you're trying to select don't exist.")};return e},t.exports?t.exports=n():o.Rellax=n()})),o=new WeakMap,n=function(e,n,r){var i=n.value;!1!==i&&o.set(e,new t(e,i))},r=function(e){var t=o.get(e);t&&t.destroy()},i=function(e){r(e)},a=function(e,n,i){var a=n.value;r(e),!1!==a&&o.set(e,new t(e,a))};return{install:function(e){e.directive("rellax",{inserted:n,update:a,unbind:i})}}}));

10

lib/index.js

@@ -6,2 +6,5 @@ import Rellax from 'rellax';

var value = _a.value;
if (value === false) {
return;
}
instanceMap.set(el, new Rellax(el, value));

@@ -22,2 +25,5 @@ };

destroy(el);
if (value === false) {
return;
}
instanceMap.set(el, new Rellax(el, value));

@@ -33,8 +39,8 @@ };

update: update,
unbind: unbind
unbind: unbind,
});
};
var plugin = {
install: install
install: install,
};
export default plugin;

68

package.json
{
"name": "vue-rellax",
"version": "0.1.0",
"version": "0.2.0",
"description": "A plugin of Vue that adds a directive for parallax effect by rellax.js.",
"license": "MIT",
"author": "@croutonn",
"main": "dist/vue-rellax.cjs.js",

@@ -14,4 +15,4 @@ "module": "dist/vue-rellax.esm.js",

],
"homepage": "https://github.com/yutahaga/vue-rellax",
"bugs": "https://github.com/yutahaga/vue-rellax/issues",
"homepage": "https://github.com/croutonn/vue-rellax",
"bugs": "https://github.com/croutonn/vue-rellax/issues",
"repository": {

@@ -36,39 +37,40 @@ "type": "git",

"test": "npm run lint && npm run test:unit",
"test:unit": "cross-env BABEL_ENV=test karma start --single-run"
"test:unit": "cross-env BABEL_ENV=test karma start --single-run",
"version": "npm run build"
},
"dependencies": {
"rellax": "^1.7.1",
"tslib": "^1.9.3"
"rellax": "^1.12.1",
"tslib": "^2.0.1"
},
"devDependencies": {
"@types/chai": "^4.1.7",
"@types/mocha": "^5.2.5",
"@types/node": "^10.12.12",
"@types/rellax": "^1.7.0",
"@vue/test-utils": "^1.0.0-beta.27",
"@types/chai": "^4.2.12",
"@types/mocha": "^8.0.3",
"@types/node": "^14.11.2",
"@types/rellax": "^1.7.3",
"@vue/test-utils": "^1.1.0",
"chai": "^4.2.0",
"cross-env": "^5.2.0",
"es6-promise": "^4.2.5",
"karma": "^3.1.3",
"cross-env": "^7.0.2",
"es6-promise": "^4.2.8",
"karma": "^5.2.3",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-mocha": "^1.3.0",
"karma-chrome-launcher": "^3.1.0",
"karma-mocha": "^2.0.1",
"karma-spec-reporter": "^0.0.32",
"karma-typescript": "^3.0.13",
"lint-staged": "^8.1.0",
"mocha": "^5.2.0",
"prettier": "^1.15.3",
"puppeteer": "^1.11.0",
"rimraf": "^2.6.2",
"rollup": "^0.67.4",
"rollup-plugin-commonjs": "^9.2.0",
"rollup-plugin-node-resolve": "^4.0.0",
"rollup-plugin-replace": "^2.1.0",
"rollup-plugin-uglify": "^6.0.0",
"ts-node": "^7.0.1",
"tslint": "^5.11.0",
"tslint-config-prettier": "^1.17.0",
"typescript": "^3.2.2",
"vue": "^2.5.20",
"vue-template-compiler": "^2.5.20"
"karma-typescript": "^5.2.0",
"lint-staged": "^10.4.0",
"mocha": "^8.1.3",
"prettier": "^2.1.2",
"puppeteer": "^5.3.1",
"rimraf": "^3.0.2",
"rollup": "^2.28.2",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-terser": "^7.0.2",
"ts-node": "^9.0.0",
"tslint": "^6.1.3",
"tslint-config-prettier": "^1.18.0",
"typescript": "^4.0.3",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12"
},

@@ -75,0 +77,0 @@ "gitHooks": {

40

README.md

@@ -19,2 +19,10 @@ # vue-rellax

#### Browser Support
Since this plugin uses WeakMap, old browsers need to load pollyfill.
```html
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=WeakMap"></script>
```
### Usage

@@ -42,2 +50,32 @@

#### Destroy
To `destroy`, assign `false` to `v-relax`.
```js
const vm = new Vue({
el: '#app',
template: `
<div>
<p v-rellax="rellax">
I’m slow and smooth
</p>
<button type="button" @click="destroyRellax">Destroy Rellax</button>
</div>
`,
data() {
return {
rellax: {
speed: -2
}
}
},
methods: {
destroyRellax() {
this.rellax = false
}
}
})
```
#### For Nuxt.js

@@ -50,5 +88,5 @@

plugins: [
{ src: 'node_modules/vue-rellax/lib/nuxt-plugin', ssr: false }
{ src: '~~/node_modules/vue-rellax/lib/nuxt-plugin', ssr: false }
]
}
```
LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc