New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@apatheticwes/scrollify

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@apatheticwes/scrollify - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

rollup.config.js
rollup.shim.config.js

21

build.js

@@ -12,10 +12,2 @@

const bundles = [
// {
// format: 'cjs', ext: '.cjs.js', plugins: [],
// babelPresets: ['stage-1'], babelPlugins: [
// 'transform-es2015-destructuring',
// 'transform-es2015-function-name',
// 'transform-es2015-parameters'
// ]
// },
{

@@ -32,8 +24,8 @@ format: 'cjs', ext: '.cjs.js', plugins: [],

]
},
{
format: 'iife', ext: '.min.js', plugins: [uglify()],
babelPresets: ['es2015-rollup', 'stage-1'], babelPlugins: [],
moduleName: 'scrollify', minify: true
}
// {
// format: 'iife', ext: '.min.js', plugins: [uglify()],
// babelPresets: ['es2015-rollup', 'stage-1'], babelPlugins: [],
// moduleName: 'Scrollify', minify: true
// }

@@ -71,3 +63,4 @@ // {

}).then(bundle => bundle.write({
dest: `dist/${config.moduleName || 'scrollify'}${config.ext}`,
// dest: `dist/${config.moduleName || 'scrollify'}${config.ext}`,
dest: `dist/scrollify${config.ext}`,
format: config.format,

@@ -74,0 +67,0 @@ sourceMap: !config.minify,

713

dist/scrollify.cjs.js

@@ -8,4 +8,6 @@ 'use strict';

var dummy = document.createElement('div');
var transform = ['transform', 'webkitTransform', 'MozTransform', 'OTransform', 'msTransform'].find(function (t) {
return document.body.style[t] !== undefined;
// return (document.body.style[t] !== undefined); // if DOM is not yet ready, let's do:
return (dummy.style[t] !== undefined);
});

@@ -76,3 +78,4 @@

var assignRotateY = function assignRotateY(matrix, rad) {
var assignRotateY = function(matrix, rad) {
matrix[0] = Math.cos(rad);

@@ -134,2 +137,3 @@ matrix[1] = 0;

function assignScale(matrix, x, y) {

@@ -193,67 +197,67 @@ matrix[0] = x;

function createMatrix() {
var data = new Float32Array(16);
var a = new Float32Array(16);
var b = new Float32Array(16);
assignIdentity(data);
var data = new Float32Array(16);
var a = new Float32Array(16);
var b = new Float32Array(16);
assignIdentity(data);
return {
data: data,
return {
data: data,
asCSS: function asCSS() {
var css = 'matrix3d(';
for (var i = 0; i < 15; ++i) {
if (Math.abs(data[i]) < 0.0001) {
css += '0,';
asCSS: function() {
var css = 'matrix3d(';
for (var i = 0; i < 15; ++i) {
if (Math.abs(data[i]) < 0.0001) {
css += '0,';
} else {
css += data[i].toFixed(10) + ',';
}
}
if (Math.abs(data[15]) < 0.0001) {
css += '0)';
} else {
css += data[i].toFixed(10) + ',';
css += data[15].toFixed(10) + ')';
}
}
if (Math.abs(data[15]) < 0.0001) {
css += '0)';
} else {
css += data[15].toFixed(10) + ')';
}
return css;
},
return css;
},
clear: function clear() {
assignIdentity(data);
},
clear: function() {
assignIdentity(data);
},
translate: function translate(x, y, z) {
copyArray(data, a);
assignTranslate(b, x, y, z);
assignedMatrixMultiplication(a, b, data);
return this;
},
translate: function(x, y, z) {
copyArray(data, a);
assignTranslate(b, x, y, z);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateX: function rotateX(radians) {
copyArray(data, a);
assignRotateX(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateX: function(radians) {
copyArray(data, a);
assignRotateX(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateY: function rotateY(radians) {
copyArray(data, a);
assignRotateY(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateY: function(radians) {
copyArray(data, a);
assignRotateY(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateZ: function rotateZ(radians) {
copyArray(data, a);
assignRotateZ(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateZ: function(radians) {
copyArray(data, a);
assignRotateZ(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
scale: function scale(x, y) {
copyArray(data, a);
assignScale(b, x, y);
assignedMatrixMultiplication(a, b, data);
return this;
},
scale: function(x, y) {
copyArray(data, a);
assignScale(b, x, y);
assignedMatrixMultiplication(a, b, data);
return this;
},
skew: function skew(ax, ay) {
skew: function(ax, ay) {
copyArray(data, a);

@@ -267,394 +271,311 @@ assignSkew(b, ax, ay);

var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
/**
* The Scrollify Class
*/
var Scrollify = function Scrollify(element) {
var this$1 = this;
var createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
if (element instanceof HTMLElement == false) { element = document.querySelector(element); }
if (!element || !transform) { return this.active = false; }
// if (!transform) { throw 'Scrollify [error]: transforms not supported'; }
// if (!element) { throw 'Scrollify [error]: could not find element'; }
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
this.element = element;
this.ticking = false;
this.scenes = [];
this.scroll = window.scrollY || window.pageYOffset;
this.active = true;
this.matrix = createMatrix();
this.transforms = {
scale: [1,1],
rotation: [0,0,0],
position: [0,0,0]
// transformOrigin: [],
// skew: [],
};
}();
window.addEventListener('scroll', function (e) { return this$1.onScroll(e); });
window.addEventListener('resize', function (e) { return this$1.onResize(e); });
};
/**
* The Scrollify Class
* Add a new Scene to the Scrollify object. Scene information includes when
* to start applying an effect and for how long.
* @param{Object} opts: Various options to apply to the new Scene:
*
* start: (required) When to start the effect. It is a 0 - 1 value
* representing the percentage of the viewport (eg. 0.5).
* Any effects in the Scene will begin when the trigger element
* crosses this threshold.
*
* duration: The length of the effect, in pixels. Scrollify will
* interpolate that into value into a "progress" variable, bounded
* by 0 - 1. If not supplied, the default value is the height of the
* viewport + element height, meaning the effect will last for as
* long as the element is visible.
*
* trigger: If supplied, Scrollify will use this element's position to
* start any Scene effects. If not supplied, the default is to use
* the element itself as a trigger.
*
* easing: Ease in/out of an effect. Any value from Robert Penner's easing
* functions is valid.
*
* @return {void}
*/
Scrollify.prototype.addScene = function addScene (opts) {
var this$1 = this;
var Scrollify = function () {
var triggerPos = opts.start || 0;
var duration = opts.duration || window.innerHeight + this.element.offsetHeight;
var easing = opts.easing || false;
var effects = opts.effects || [];
var trigger = opts.trigger ? opts.trigger instanceof HTMLElement ? opts.trigger : document.querySelector(opts.trigger) : this.element;
var applyTransform = opts.applyTransform !== undefined ? opts.applyTransform : true; // opt out rather than opt in
var scene = {
trigger: trigger,
triggerPos: 1 - triggerPos,
duration: duration,
easing: easing,
applyTransform: applyTransform,
effects: []
};
/**
* @constructor
* @param {HTMLElement|String} element: The element to Scrollify.
*/
function Scrollify(element) {
var _this = this;
// scene.active = this.scroll > this.calculateStart(scene); // calculate any transformations if the scene has already passed.
classCallCheck(this, Scrollify);
this.calculateStart(scene);
scene.state = (this.scroll > this.start) ? (this.scroll > this.start+duration) ? 'after' : 'active' : 'before';
if (element instanceof HTMLElement == false) {
element = document.querySelector(element);
}
if (!element || !transform) {
return this.active = false;
}
// if (!transform) { throw 'Scrollify [error]: transforms not supported'; }
// if (!element) { throw 'Scrollify [error]: could not find element'; }
effects.map(function (effect) {
this$1.addEffect(effect.name, effect.options, scene);
});
this.element = element;
this.ticking = false;
this.scenes = [];
this.scroll = window.scrollY || window.pageYOffset;
this.active = true;
this.matrix = createMatrix();
this.transforms = {
scale: [1, 1],
rotation: [0, 0, 0],
position: [0, 0, 0]
// transformOrigin: [],
// skew: [],
};
this.updateScene(scene);
this.scenes.push(scene);
window.addEventListener('scroll', function (e) {
return _this.onScroll(e);
});
window.addEventListener('resize', function (e) {
return _this.onResize(e);
});
}
return this;
};
/**
* Add a new Scene to the Scrollify object. Scene information includes when
* to start applying an effect and for how long.
* @param {Object} opts: Various options to apply to the new Scene:
*
* start: (required) When to start the effect. It is a 0 - 1 value
* representing the percentage of the viewport (eg. 0.5).
* Any effects in the Scene will begin when the trigger element
* crosses this threshold.
*
* duration: The length of the effect, in pixels. Scrollify will
* interpolate that into value into a "progress" variable, bounded
* by 0 - 1. If not supplied, the default value is the height of the
* viewport + element height, meaning the effect will last for as
* long as the element is visible.
*
* trigger: If supplied, Scrollify will use this element's position to
* start any Scene effects. If not supplied, the default is to use
* the element itself as a trigger.
*
* easing: Ease in/out of an effect. Any value from Robert Penner's easing
* functions is valid.
*
* @return {void}
*/
/**
* Update each scene.
* @param{Object} scene: The scene to update.
* @return {void}
*/
Scrollify.prototype.updateScene = function updateScene (scene) {
this.calculateStart(scene);
this.calculate(scene);
};
/**
* Add a particular transformation to a scene.
* @param{Function} effect: The transformation function to apply.
* @param{Object} options: Any transformation options.
* @param{Object} scene: Object containing start and duration information.
* @return {void}
*/
Scrollify.prototype.addEffect = function addEffect (effect, options, scene) {
if ( options === void 0 ) options = {};
createClass(Scrollify, [{
key: 'addScene',
value: function addScene(opts) {
var _this2 = this;
var element = this.element;
var transforms = this.transforms;
var triggerPos = opts.start || 0;
var duration = opts.duration || window.innerHeight + this.element.offsetHeight;
var easing = opts.easing || false;
var effects = opts.effects || [];
var trigger = opts.trigger ? opts.trigger instanceof HTMLElement ? opts.trigger : document.querySelector(opts.trigger) : this.element;
var applyTransform = opts.applyTransform !== undefined ? opts.applyTransform : true; // opt out rather than opt in
var scene = {
trigger: trigger,
triggerPos: 1 - triggerPos,
duration: duration,
easing: easing,
applyTransform: applyTransform,
effects: []
};
// scene.active = this.scroll > this.calculateStart(scene); // calculate any transformations if the scene has already passed.
this.calculateStart(scene);
scene.state = this.scroll > this.start ? this.scroll > this.start + duration ? 'after' : 'active' : 'before';
effects.map(function (effect) {
_this2.addEffect(effect.name, effect.options, scene);
if (!scene) {
if (this.scenes.length) {
// use the most recently added scene
scene = this.scenes[this.scenes.length - 1];
} else {
// or if no scene (ie "addEffect" was called directly on Scrollify), set up a default one
return this.addScene({
'effects': [{'name': effect, 'options': options}]
});
this.updateScene(scene);
this.scenes.push(scene);
return this;
}
}
/**
* Update each scene.
* @param {Object} scene: The scene to update.
* @return {void}
*/
var curry = function (fn, options) {
return function() { // NOTE: don't use => function here as we do NOT want to bind "this"
var context = {
'options': options,
'element': element,
'transforms': transforms
};
}, {
key: 'updateScene',
value: function updateScene(scene) {
this.calculateStart(scene);
this.calculate(scene);
}
fn.call(context, this); // eslint-disable-line
};
};
/**
* Add a particular transformation to a scene.
* @param {Function} effect: The transformation function to apply.
* @param {Object} options: Any transformation options.
* @param {Object} scene: Object containing start and duration information.
* @return {void}
*/
scene.effects.push(curry(effect, options));
}, {
key: 'addEffect',
value: function addEffect(effect) {
var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
var scene = arguments[2];
return this;
};
var element = this.element;
var transforms = this.transforms;
/**
* Calculate the start point of each scene.
* @param{[type]} scene A Scrollify Scene object.
* @return {Integer} The start position of the Scene, in pixels.
*/
Scrollify.prototype.calculateStart = function calculateStart (scene) {
var trigger = scene.trigger;
var triggerPos = scene.triggerPos;
var top = 0;
if (!scene) {
if (this.scenes.length) {
// use the most recently added scene
scene = this.scenes[this.scenes.length - 1];
} else {
// or if no scene (ie "addEffect" was called directly on Scrollify), set up a default one
return this.addScene({
'effects': [{ 'name': effect, 'options': options }]
});
}
}
do {
top += trigger.offsetTop || 0;
trigger = trigger.offsetParent;
} while(trigger);
// top = trigger.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
var curry = function curry(fn, options) {
return function () {
// NOTE: don't use => function here as we do NOT want to bind "this"
var context = {
'options': options,
'element': element,
'transforms': transforms
};
// return Math.max(0, top - triggerPos * window.innerHeight); // (can be negative...?)
scene.start = Math.max(0, top - triggerPos * window.innerHeight);
};
fn.call(context, this); // eslint-disable-line
};
};
/**
* onScroll Handler
* @return {void}
*/
Scrollify.prototype.onScroll = function onScroll () {
if (!this.active) { return; }
this.scroll = window.scrollY || window.pageYOffset;
scene.effects.push(curry(effect, options));
if (!this.ticking) {
window.requestAnimationFrame(this.update.bind(this));
this.ticking = true;
}
};
return this;
}
/**
* onResize Handler
* @return {void}
*/
Scrollify.prototype.onResize = function onResize () {
this.scenes.forEach(this.updateScene, this);
};
/**
* Calculate the start point of each scene.
* @param {[type]} scene A Scrollify Scene object.
* @return {Integer} The start position of the Scene, in pixels.
*/
/**
* Update the transformations for every scene.
* @return {void}
*/
Scrollify.prototype.update = function update () {
this.scenes.forEach(this.calculate, this);
this.ticking = false;
};
}, {
key: 'calculateStart',
value: function calculateStart(scene) {
var trigger = scene.trigger;
var triggerPos = scene.triggerPos;
var top = 0;
/**
* Calculate the transformations for each scene.
* @param{Object} scene: An Object containing start and duration
* information as well as an Array of
* transformations to apply.
* @return {void}
*/
Scrollify.prototype.calculate = function calculate (scene) {
var start = scene.start;
var duration = scene.duration;
var scroll = this.scroll;
var progress;
var matrix;
do {
top += trigger.offsetTop || 0;
trigger = trigger.offsetParent;
} while (trigger);
// top = trigger.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
// return Math.max(0, top - triggerPos * window.innerHeight); // (can be negative...?)
scene.start = Math.max(0, top - triggerPos * window.innerHeight);
// after end
if (scroll - start > duration) {
if (scene.state !== 'after') { // do one final iteration
scene.state = 'after';
progress = 1;
} else {
return;
}
/**
* onScroll Handler
* @return {void}
*/
}, {
key: 'onScroll',
value: function onScroll() {
if (!this.active) {
return;
}
this.scroll = window.scrollY || window.pageYOffset;
if (!this.ticking) {
window.requestAnimationFrame(this.update.bind(this));
this.ticking = true;
}
// before start
} else if (scroll - start < 0) {
if (scene.state !== 'before') { // do one final iteration
scene.state = 'before';
progress = 0;
} else {
return;
}
/**
* onResize Handler
* @return {void}
*/
}, {
key: 'onResize',
value: function onResize() {
this.scenes.forEach(this.updateScene, this);
// active
} else {
scene.state = 'active';
if (scene.easing) { // start, from, to, end
progress = scene.easing(scroll - start, 0, 1, duration);
} else {
progress = (scroll - start) / duration;
}
}
/**
* Update the transformations for every scene.
* @return {void}
*/
// cycle through any registered transformations
scene.effects.forEach(function (effect) {
effect.call(progress);
});
}, {
key: 'update',
value: function update() {
this.scenes.forEach(this.calculate, this);
this.ticking = false;
}
if (scene.applyTransform) {
// transmogrify all applied transformations into a single matrix, and apply
matrix = this.updateMatrix();
this.element.style[transform] = matrix.asCSS();
}
};
/**
* Calculate the transformations for each scene.
* @param {Object} scene: An Object containing start and duration
* information as well as an Array of
* transformations to apply.
* @return {void}
*/
/**
* Loop through all the element's transformation data and calculates a matrix representing it.
* @return {Matrix} Ye olde Matrix
*/
Scrollify.prototype.updateMatrix = function updateMatrix () {
var t = this.transforms;
var m = this.matrix;
}, {
key: 'calculate',
value: function calculate(scene) {
var start = scene.start;
var duration = scene.duration;
var scroll = this.scroll;
var progress = void 0;
var matrix = void 0;
m.clear();
// after end
if (scroll - start > duration) {
if (scene.state !== 'after') {
// do one final iteration
scene.state = 'after';
progress = 1;
} else {
return;
}
// here we adjust the transformOrigin ...
if (t.transformOrigin) {
m.translate(-t.transformOrigin[0], -t.transformOrigin[1], -t.transformOrigin[2]);
}
// before start
} else if (scroll - start < 0) {
if (scene.state !== 'before') {
// do one final iteration
scene.state = 'before';
progress = 0;
} else {
return;
}
if (t.scale) {
m.scale(t.scale[0], t.scale[1]);
}
// active
} else {
scene.state = 'active';
if (scene.easing) {
// start, from, to, end
progress = scene.easing(scroll - start, 0, 1, duration);
} else {
progress = (scroll - start) / duration;
}
}
if (t.skew) {
m.skew(t.skew[0], t.skew[1]);
}
// cycle through any registered transformations
scene.effects.forEach(function (effect) {
effect.call(progress);
});
if (t.rotation) {
m.rotateX(t.rotation[0]);
m.rotateY(t.rotation[1]);
m.rotateZ(t.rotation[2]);
}
if (scene.applyTransform) {
// transmogrify all applied transformations into a single matrix, and apply
matrix = this.updateMatrix();
this.element.style[transform] = matrix.asCSS();
}
}
if (t.position) {
m.translate(t.position[0], t.position[1], t.position[2]);
}
/**
* Loop through all the element's transformation data and calculates a matrix representing it.
* @return {Matrix} Ye olde Matrix
*/
// -----------------------------------------------------
// IF we wished to perform rotation AFTER skew / position / etc, we could do it here.
// The ordering is important, and has an effect.
}, {
key: 'updateMatrix',
value: function updateMatrix() {
var t = this.transforms;
var m = this.matrix;
// if (t.rotationPost) {
// m.rotateX(t.rotationPost[0]);
// m.rotateY(t.rotationPost[1]);
// m.rotateZ(t.rotationPost[2]);
// }
m.clear();
// if (t.scalePost) {
// m.scale(t.scalePost[0], t.scalePost[1]);
// }
// -----------------------------------------------------
// here we adjust the transformOrigin ...
if (t.transformOrigin) {
m.translate(-t.transformOrigin[0], -t.transformOrigin[1], -t.transformOrigin[2]);
}
if (t.scale) {
m.scale(t.scale[0], t.scale[1]);
}
// ... and here we put it back. (This duplication is not a mistake).
if (t.transformOrigin) {
m.translate(t.transformOrigin[0], t.transformOrigin[1], t.transformOrigin[2]);
}
if (t.skew) {
m.skew(t.skew[0], t.skew[1]);
}
return m;
};
if (t.rotation) {
m.rotateX(t.rotation[0]);
m.rotateY(t.rotation[1]);
m.rotateZ(t.rotation[2]);
}
/**
* Disable Scrollify-ing. Perhaps for performance reasons / mobile devices.
* @return {void}
*/
Scrollify.prototype.disable = function disable () {
this.active = false;
};
if (t.position) {
m.translate(t.position[0], t.position[1], t.position[2]);
}
// -----------------------------------------------------
// IF we wished to perform rotation AFTER skew / position / etc, we could do it here.
// The ordering is important, and has an effect.
// if (t.rotationPost) {
// m.rotateX(t.rotationPost[0]);
// m.rotateY(t.rotationPost[1]);
// m.rotateZ(t.rotationPost[2]);
// }
// if (t.scalePost) {
// m.scale(t.scalePost[0], t.scalePost[1]);
// }
// -----------------------------------------------------
// ... and here we put it back. (This duplication is not a mistake).
if (t.transformOrigin) {
m.translate(t.transformOrigin[0], t.transformOrigin[1], t.transformOrigin[2]);
}
return m;
}
/**
* Disable Scrollify-ing. Perhaps for performance reasons / mobile devices.
* @return {void}
*/
}, {
key: 'disable',
value: function disable() {
this.active = false;
}
}]);
return Scrollify;
}();
module.exports = Scrollify;
//# sourceMappingURL=scrollify.cjs.js.map
module.exports = Scrollify;

649

dist/scrollify.es6.js

@@ -6,4 +6,6 @@ /**

let transform = ['transform', 'webkitTransform', 'MozTransform', 'OTransform', 'msTransform'].find(t => {
return document.body.style[t] !== undefined;
var dummy = document.createElement('div');
var transform = ['transform', 'webkitTransform', 'MozTransform', 'OTransform', 'msTransform'].find(function (t) {
// return (document.body.style[t] !== undefined); // if DOM is not yet ready, let's do:
return (dummy.style[t] !== undefined);
});

@@ -74,3 +76,4 @@

var assignRotateY = function assignRotateY(matrix, rad) {
var assignRotateY = function(matrix, rad) {
matrix[0] = Math.cos(rad);

@@ -132,2 +135,3 @@ matrix[1] = 0;

function assignScale(matrix, x, y) {

@@ -191,67 +195,67 @@ matrix[0] = x;

function createMatrix() {
var data = new Float32Array(16);
var a = new Float32Array(16);
var b = new Float32Array(16);
assignIdentity(data);
var data = new Float32Array(16);
var a = new Float32Array(16);
var b = new Float32Array(16);
assignIdentity(data);
return {
data: data,
return {
data: data,
asCSS: function asCSS() {
var css = 'matrix3d(';
for (var i = 0; i < 15; ++i) {
if (Math.abs(data[i]) < 0.0001) {
css += '0,';
asCSS: function() {
var css = 'matrix3d(';
for (var i = 0; i < 15; ++i) {
if (Math.abs(data[i]) < 0.0001) {
css += '0,';
} else {
css += data[i].toFixed(10) + ',';
}
}
if (Math.abs(data[15]) < 0.0001) {
css += '0)';
} else {
css += data[i].toFixed(10) + ',';
css += data[15].toFixed(10) + ')';
}
}
if (Math.abs(data[15]) < 0.0001) {
css += '0)';
} else {
css += data[15].toFixed(10) + ')';
}
return css;
},
return css;
},
clear: function clear() {
assignIdentity(data);
},
clear: function() {
assignIdentity(data);
},
translate: function translate(x, y, z) {
copyArray(data, a);
assignTranslate(b, x, y, z);
assignedMatrixMultiplication(a, b, data);
return this;
},
translate: function(x, y, z) {
copyArray(data, a);
assignTranslate(b, x, y, z);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateX: function rotateX(radians) {
copyArray(data, a);
assignRotateX(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateX: function(radians) {
copyArray(data, a);
assignRotateX(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateY: function rotateY(radians) {
copyArray(data, a);
assignRotateY(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateY: function(radians) {
copyArray(data, a);
assignRotateY(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateZ: function rotateZ(radians) {
copyArray(data, a);
assignRotateZ(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateZ: function(radians) {
copyArray(data, a);
assignRotateZ(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
scale: function scale(x, y) {
copyArray(data, a);
assignScale(b, x, y);
assignedMatrixMultiplication(a, b, data);
return this;
},
scale: function(x, y) {
copyArray(data, a);
assignScale(b, x, y);
assignedMatrixMultiplication(a, b, data);
return this;
},
skew: function skew(ax, ay) {
skew: function(ax, ay) {
copyArray(data, a);

@@ -268,323 +272,308 @@ assignSkew(b, ax, ay);

*/
class Scrollify {
var Scrollify = function Scrollify(element) {
var this$1 = this;
/**
* @constructor
* @param {HTMLElement|String} element: The element to Scrollify.
*/
constructor(element) {
if (element instanceof HTMLElement == false) {
element = document.querySelector(element);
}
if (!element || !transform) {
return this.active = false;
}
// if (!transform) { throw 'Scrollify [error]: transforms not supported'; }
// if (!element) { throw 'Scrollify [error]: could not find element'; }
if (element instanceof HTMLElement == false) { element = document.querySelector(element); }
if (!element || !transform) { return this.active = false; }
// if (!transform) { throw 'Scrollify [error]: transforms not supported'; }
// if (!element) { throw 'Scrollify [error]: could not find element'; }
this.element = element;
this.ticking = false;
this.scenes = [];
this.scroll = window.scrollY || window.pageYOffset;
this.active = true;
this.matrix = createMatrix();
this.transforms = {
scale: [1, 1],
rotation: [0, 0, 0],
position: [0, 0, 0]
// transformOrigin: [],
// skew: [],
};
this.element = element;
this.ticking = false;
this.scenes = [];
this.scroll = window.scrollY || window.pageYOffset;
this.active = true;
this.matrix = createMatrix();
this.transforms = {
scale: [1,1],
rotation: [0,0,0],
position: [0,0,0]
// transformOrigin: [],
// skew: [],
};
window.addEventListener('scroll', e => this.onScroll(e));
window.addEventListener('resize', e => this.onResize(e));
}
window.addEventListener('scroll', function (e) { return this$1.onScroll(e); });
window.addEventListener('resize', function (e) { return this$1.onResize(e); });
};
/**
* Add a new Scene to the Scrollify object. Scene information includes when
* to start applying an effect and for how long.
* @param {Object} opts: Various options to apply to the new Scene:
*
* start: (required) When to start the effect. It is a 0 - 1 value
* representing the percentage of the viewport (eg. 0.5).
* Any effects in the Scene will begin when the trigger element
* crosses this threshold.
*
* duration: The length of the effect, in pixels. Scrollify will
* interpolate that into value into a "progress" variable, bounded
* by 0 - 1. If not supplied, the default value is the height of the
* viewport + element height, meaning the effect will last for as
* long as the element is visible.
*
* trigger: If supplied, Scrollify will use this element's position to
* start any Scene effects. If not supplied, the default is to use
* the element itself as a trigger.
*
* easing: Ease in/out of an effect. Any value from Robert Penner's easing
* functions is valid.
*
* @return {void}
*/
addScene(opts) {
let triggerPos = opts.start || 0;
let duration = opts.duration || window.innerHeight + this.element.offsetHeight;
let easing = opts.easing || false;
let effects = opts.effects || [];
let trigger = opts.trigger ? opts.trigger instanceof HTMLElement ? opts.trigger : document.querySelector(opts.trigger) : this.element;
let applyTransform = opts.applyTransform !== undefined ? opts.applyTransform : true; // opt out rather than opt in
let scene = {
trigger: trigger,
triggerPos: 1 - triggerPos,
duration: duration,
easing: easing,
applyTransform: applyTransform,
effects: []
};
/**
* Add a new Scene to the Scrollify object. Scene information includes when
* to start applying an effect and for how long.
* @param{Object} opts: Various options to apply to the new Scene:
*
* start: (required) When to start the effect. It is a 0 - 1 value
* representing the percentage of the viewport (eg. 0.5).
* Any effects in the Scene will begin when the trigger element
* crosses this threshold.
*
* duration: The length of the effect, in pixels. Scrollify will
* interpolate that into value into a "progress" variable, bounded
* by 0 - 1. If not supplied, the default value is the height of the
* viewport + element height, meaning the effect will last for as
* long as the element is visible.
*
* trigger: If supplied, Scrollify will use this element's position to
* start any Scene effects. If not supplied, the default is to use
* the element itself as a trigger.
*
* easing: Ease in/out of an effect. Any value from Robert Penner's easing
* functions is valid.
*
* @return {void}
*/
Scrollify.prototype.addScene = function addScene (opts) {
var this$1 = this;
// scene.active = this.scroll > this.calculateStart(scene); // calculate any transformations if the scene has already passed.
var triggerPos = opts.start || 0;
var duration = opts.duration || window.innerHeight + this.element.offsetHeight;
var easing = opts.easing || false;
var effects = opts.effects || [];
var trigger = opts.trigger ? opts.trigger instanceof HTMLElement ? opts.trigger : document.querySelector(opts.trigger) : this.element;
var applyTransform = opts.applyTransform !== undefined ? opts.applyTransform : true; // opt out rather than opt in
var scene = {
trigger: trigger,
triggerPos: 1 - triggerPos,
duration: duration,
easing: easing,
applyTransform: applyTransform,
effects: []
};
this.calculateStart(scene);
scene.state = this.scroll > this.start ? this.scroll > this.start + duration ? 'after' : 'active' : 'before';
// scene.active = this.scroll > this.calculateStart(scene); // calculate any transformations if the scene has already passed.
effects.map(effect => {
this.addEffect(effect.name, effect.options, scene);
});
this.calculateStart(scene);
scene.state = (this.scroll > this.start) ? (this.scroll > this.start+duration) ? 'after' : 'active' : 'before';
this.updateScene(scene);
this.scenes.push(scene);
effects.map(function (effect) {
this$1.addEffect(effect.name, effect.options, scene);
});
return this;
}
this.updateScene(scene);
this.scenes.push(scene);
/**
* Update each scene.
* @param {Object} scene: The scene to update.
* @return {void}
*/
updateScene(scene) {
this.calculateStart(scene);
this.calculate(scene);
}
return this;
};
/**
* Add a particular transformation to a scene.
* @param {Function} effect: The transformation function to apply.
* @param {Object} options: Any transformation options.
* @param {Object} scene: Object containing start and duration information.
* @return {void}
*/
addEffect(effect) {
let options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
let scene = arguments[2];
/**
* Update each scene.
* @param{Object} scene: The scene to update.
* @return {void}
*/
Scrollify.prototype.updateScene = function updateScene (scene) {
this.calculateStart(scene);
this.calculate(scene);
};
let element = this.element;
let transforms = this.transforms;
/**
* Add a particular transformation to a scene.
* @param{Function} effect: The transformation function to apply.
* @param{Object} options: Any transformation options.
* @param{Object} scene: Object containing start and duration information.
* @return {void}
*/
Scrollify.prototype.addEffect = function addEffect (effect, options, scene) {
if ( options === void 0 ) options = {};
if (!scene) {
if (this.scenes.length) {
// use the most recently added scene
scene = this.scenes[this.scenes.length - 1];
} else {
// or if no scene (ie "addEffect" was called directly on Scrollify), set up a default one
return this.addScene({
'effects': [{ 'name': effect, 'options': options }]
});
}
var element = this.element;
var transforms = this.transforms;
if (!scene) {
if (this.scenes.length) {
// use the most recently added scene
scene = this.scenes[this.scenes.length - 1];
} else {
// or if no scene (ie "addEffect" was called directly on Scrollify), set up a default one
return this.addScene({
'effects': [{'name': effect, 'options': options}]
});
}
}
let curry = (fn, options) => {
return function () {
// NOTE: don't use => function here as we do NOT want to bind "this"
let context = {
'options': options,
'element': element,
'transforms': transforms
};
var curry = function (fn, options) {
return function() { // NOTE: don't use => function here as we do NOT want to bind "this"
var context = {
'options': options,
'element': element,
'transforms': transforms
};
fn.call(context, this); // eslint-disable-line
};
fn.call(context, this); // eslint-disable-line
};
};
scene.effects.push(curry(effect, options));
scene.effects.push(curry(effect, options));
return this;
}
return this;
};
/**
* Calculate the start point of each scene.
* @param {[type]} scene A Scrollify Scene object.
* @return {Integer} The start position of the Scene, in pixels.
*/
calculateStart(scene) {
let trigger = scene.trigger;
let triggerPos = scene.triggerPos;
let top = 0;
/**
* Calculate the start point of each scene.
* @param{[type]} scene A Scrollify Scene object.
* @return {Integer} The start position of the Scene, in pixels.
*/
Scrollify.prototype.calculateStart = function calculateStart (scene) {
var trigger = scene.trigger;
var triggerPos = scene.triggerPos;
var top = 0;
do {
top += trigger.offsetTop || 0;
trigger = trigger.offsetParent;
} while (trigger);
// top = trigger.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
do {
top += trigger.offsetTop || 0;
trigger = trigger.offsetParent;
} while(trigger);
// top = trigger.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
// return Math.max(0, top - triggerPos * window.innerHeight); // (can be negative...?)
scene.start = Math.max(0, top - triggerPos * window.innerHeight);
}
// return Math.max(0, top - triggerPos * window.innerHeight); // (can be negative...?)
scene.start = Math.max(0, top - triggerPos * window.innerHeight);
};
/**
* onScroll Handler
* @return {void}
*/
onScroll() {
if (!this.active) {
return;
}
this.scroll = window.scrollY || window.pageYOffset;
/**
* onScroll Handler
* @return {void}
*/
Scrollify.prototype.onScroll = function onScroll () {
if (!this.active) { return; }
this.scroll = window.scrollY || window.pageYOffset;
if (!this.ticking) {
window.requestAnimationFrame(this.update.bind(this));
this.ticking = true;
}
if (!this.ticking) {
window.requestAnimationFrame(this.update.bind(this));
this.ticking = true;
}
};
/**
* onResize Handler
* @return {void}
*/
onResize() {
this.scenes.forEach(this.updateScene, this);
}
/**
* onResize Handler
* @return {void}
*/
Scrollify.prototype.onResize = function onResize () {
this.scenes.forEach(this.updateScene, this);
};
/**
* Update the transformations for every scene.
* @return {void}
*/
update() {
this.scenes.forEach(this.calculate, this);
this.ticking = false;
}
/**
* Update the transformations for every scene.
* @return {void}
*/
Scrollify.prototype.update = function update () {
this.scenes.forEach(this.calculate, this);
this.ticking = false;
};
/**
* Calculate the transformations for each scene.
* @param {Object} scene: An Object containing start and duration
* information as well as an Array of
* transformations to apply.
* @return {void}
*/
calculate(scene) {
let start = scene.start;
let duration = scene.duration;
let scroll = this.scroll;
let progress;
let matrix;
/**
* Calculate the transformations for each scene.
* @param{Object} scene: An Object containing start and duration
* information as well as an Array of
* transformations to apply.
* @return {void}
*/
Scrollify.prototype.calculate = function calculate (scene) {
var start = scene.start;
var duration = scene.duration;
var scroll = this.scroll;
var progress;
var matrix;
// after end
if (scroll - start > duration) {
if (scene.state !== 'after') {
// do one final iteration
scene.state = 'after';
progress = 1;
} else {
return;
}
// after end
if (scroll - start > duration) {
if (scene.state !== 'after') { // do one final iteration
scene.state = 'after';
progress = 1;
} else {
return;
}
// before start
} else if (scroll - start < 0) {
if (scene.state !== 'before') {
// do one final iteration
scene.state = 'before';
progress = 0;
} else {
return;
}
// before start
} else if (scroll - start < 0) {
if (scene.state !== 'before') { // do one final iteration
scene.state = 'before';
progress = 0;
} else {
return;
}
// active
} else {
scene.state = 'active';
if (scene.easing) {
// start, from, to, end
progress = scene.easing(scroll - start, 0, 1, duration);
} else {
progress = (scroll - start) / duration;
}
}
// cycle through any registered transformations
scene.effects.forEach(effect => {
effect.call(progress);
});
if (scene.applyTransform) {
// transmogrify all applied transformations into a single matrix, and apply
matrix = this.updateMatrix();
this.element.style[transform] = matrix.asCSS();
// active
} else {
scene.state = 'active';
if (scene.easing) { // start, from, to, end
progress = scene.easing(scroll - start, 0, 1, duration);
} else {
progress = (scroll - start) / duration;
}
}
/**
* Loop through all the element's transformation data and calculates a matrix representing it.
* @return {Matrix} Ye olde Matrix
*/
updateMatrix() {
let t = this.transforms;
let m = this.matrix;
// cycle through any registered transformations
scene.effects.forEach(function (effect) {
effect.call(progress);
});
m.clear();
if (scene.applyTransform) {
// transmogrify all applied transformations into a single matrix, and apply
matrix = this.updateMatrix();
this.element.style[transform] = matrix.asCSS();
}
};
// here we adjust the transformOrigin ...
if (t.transformOrigin) {
m.translate(-t.transformOrigin[0], -t.transformOrigin[1], -t.transformOrigin[2]);
}
/**
* Loop through all the element's transformation data and calculates a matrix representing it.
* @return {Matrix} Ye olde Matrix
*/
Scrollify.prototype.updateMatrix = function updateMatrix () {
var t = this.transforms;
var m = this.matrix;
if (t.scale) {
m.scale(t.scale[0], t.scale[1]);
}
m.clear();
if (t.skew) {
m.skew(t.skew[0], t.skew[1]);
}
// here we adjust the transformOrigin ...
if (t.transformOrigin) {
m.translate(-t.transformOrigin[0], -t.transformOrigin[1], -t.transformOrigin[2]);
}
if (t.rotation) {
m.rotateX(t.rotation[0]);
m.rotateY(t.rotation[1]);
m.rotateZ(t.rotation[2]);
}
if (t.scale) {
m.scale(t.scale[0], t.scale[1]);
}
if (t.position) {
m.translate(t.position[0], t.position[1], t.position[2]);
}
if (t.skew) {
m.skew(t.skew[0], t.skew[1]);
}
// -----------------------------------------------------
// IF we wished to perform rotation AFTER skew / position / etc, we could do it here.
// The ordering is important, and has an effect.
if (t.rotation) {
m.rotateX(t.rotation[0]);
m.rotateY(t.rotation[1]);
m.rotateZ(t.rotation[2]);
}
// if (t.rotationPost) {
// m.rotateX(t.rotationPost[0]);
// m.rotateY(t.rotationPost[1]);
// m.rotateZ(t.rotationPost[2]);
// }
if (t.position) {
m.translate(t.position[0], t.position[1], t.position[2]);
}
// if (t.scalePost) {
// m.scale(t.scalePost[0], t.scalePost[1]);
// }
// -----------------------------------------------------
// -----------------------------------------------------
// IF we wished to perform rotation AFTER skew / position / etc, we could do it here.
// The ordering is important, and has an effect.
// if (t.rotationPost) {
// m.rotateX(t.rotationPost[0]);
// m.rotateY(t.rotationPost[1]);
// m.rotateZ(t.rotationPost[2]);
// }
// ... and here we put it back. (This duplication is not a mistake).
if (t.transformOrigin) {
m.translate(t.transformOrigin[0], t.transformOrigin[1], t.transformOrigin[2]);
}
// if (t.scalePost) {
// m.scale(t.scalePost[0], t.scalePost[1]);
// }
// -----------------------------------------------------
return m;
}
/**
* Disable Scrollify-ing. Perhaps for performance reasons / mobile devices.
* @return {void}
*/
disable() {
this.active = false;
// ... and here we put it back. (This duplication is not a mistake).
if (t.transformOrigin) {
m.translate(t.transformOrigin[0], t.transformOrigin[1], t.transformOrigin[2]);
}
}
export default Scrollify;
//# sourceMappingURL=scrollify.es6.js.map
return m;
};
/**
* Disable Scrollify-ing. Perhaps for performance reasons / mobile devices.
* @return {void}
*/
Scrollify.prototype.disable = function disable () {
this.active = false;
};
export default Scrollify;

959

dist/scrollify.min.js

@@ -1,1 +0,958 @@

var scrollify=function(){"use strict";function t(t,e,n){return n[0]=t[0]*e[0]+t[1]*e[4]+t[2]*e[8]+t[3]*e[12],n[1]=t[0]*e[1]+t[1]*e[5]+t[2]*e[9]+t[3]*e[13],n[2]=t[0]*e[2]+t[1]*e[6]+t[2]*e[10]+t[3]*e[14],n[3]=t[0]*e[3]+t[1]*e[7]+t[2]*e[11]+t[3]*e[15],n[4]=t[4]*e[0]+t[5]*e[4]+t[6]*e[8]+t[7]*e[12],n[5]=t[4]*e[1]+t[5]*e[5]+t[6]*e[9]+t[7]*e[13],n[6]=t[4]*e[2]+t[5]*e[6]+t[6]*e[10]+t[7]*e[14],n[7]=t[4]*e[3]+t[5]*e[7]+t[6]*e[11]+t[7]*e[15],n[8]=t[8]*e[0]+t[9]*e[4]+t[10]*e[8]+t[11]*e[12],n[9]=t[8]*e[1]+t[9]*e[5]+t[10]*e[9]+t[11]*e[13],n[10]=t[8]*e[2]+t[9]*e[6]+t[10]*e[10]+t[11]*e[14],n[11]=t[8]*e[3]+t[9]*e[7]+t[10]*e[11]+t[11]*e[15],n[12]=t[12]*e[0]+t[13]*e[4]+t[14]*e[8]+t[15]*e[12],n[13]=t[12]*e[1]+t[13]*e[5]+t[14]*e[9]+t[15]*e[13],n[14]=t[12]*e[2]+t[13]*e[6]+t[14]*e[10]+t[15]*e[14],n[15]=t[12]*e[3]+t[13]*e[7]+t[14]*e[11]+t[15]*e[15],n}function e(t,e,n,i){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=e,t[13]=n,t[14]=i,t[15]=1}function n(t,e){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=Math.cos(e),t[6]=-Math.sin(e),t[7]=0,t[8]=0,t[9]=Math.sin(e),t[10]=Math.cos(e),t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}function i(t,e){t[0]=Math.cos(e),t[1]=-Math.sin(e),t[2]=0,t[3]=0,t[4]=Math.sin(e),t[5]=Math.cos(e),t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}function r(t,e,n){t[0]=1,t[1]=Math.tan(e),t[2]=0,t[3]=0,t[4]=Math.tan(n),t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}function a(t,e,n){t[0]=e,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=n,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}function s(t){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}function o(t,e){e[0]=t[0],e[1]=t[1],e[2]=t[2],e[3]=t[3],e[4]=t[4],e[5]=t[5],e[6]=t[6],e[7]=t[7],e[8]=t[8],e[9]=t[9],e[10]=t[10],e[11]=t[11],e[12]=t[12],e[13]=t[13],e[14]=t[14],e[15]=t[15]}function c(){var c=new Float32Array(16),f=new Float32Array(16),l=new Float32Array(16);return s(c),{data:c,asCSS:function(){for(var t="matrix3d(",e=0;e<15;++e)t+=Math.abs(c[e])<1e-4?"0,":c[e].toFixed(10)+",";return t+=Math.abs(c[15])<1e-4?"0)":c[15].toFixed(10)+")"},clear:function(){s(c)},translate:function(n,i,r){return o(c,f),e(l,n,i,r),t(f,l,c),this},rotateX:function(e){return o(c,f),n(l,e),t(f,l,c),this},rotateY:function(e){return o(c,f),u(l,e),t(f,l,c),this},rotateZ:function(e){return o(c,f),i(l,e),t(f,l,c),this},scale:function(e,n){return o(c,f),a(l,e,n),t(f,l,c),this},skew:function(e,n){return o(c,f),r(l,e,n),t(f,l,c),this}}}var f=["transform","webkitTransform","MozTransform","OTransform","msTransform"].find(function(t){return void 0!==document.body.style[t]}),u=function(t,e){t[0]=Math.cos(e),t[1]=0,t[2]=Math.sin(e),t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=-Math.sin(e),t[9]=0,t[10]=Math.cos(e),t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1},l=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},h=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),d=function(){function t(e){var n=this;return l(this,t),e instanceof HTMLElement==0&&(e=document.querySelector(e)),e&&f?(this.element=e,this.ticking=!1,this.scenes=[],this.scroll=window.scrollY||window.pageYOffset,this.active=!0,this.matrix=c(),this.transforms={scale:[1,1],rotation:[0,0,0],position:[0,0,0]},window.addEventListener("scroll",function(t){return n.onScroll(t)}),void window.addEventListener("resize",function(t){return n.onResize(t)})):this.active=!1}return h(t,[{key:"addScene",value:function(t){var e=this,n=t.start||0,i=t.duration||window.innerHeight+this.element.offsetHeight,r=t.easing||!1,a=t.effects||[],s=t.trigger?t.trigger instanceof HTMLElement?t.trigger:document.querySelector(t.trigger):this.element,o=void 0===t.applyTransform||t.applyTransform,c={trigger:s,triggerPos:1-n,duration:i,easing:r,applyTransform:o,effects:[]};return this.calculateStart(c),c.state=this.scroll>this.start?this.scroll>this.start+i?"after":"active":"before",a.map(function(t){e.addEffect(t.name,t.options,c)}),this.updateScene(c),this.scenes.push(c),this}},{key:"updateScene",value:function(t){this.calculateStart(t),this.calculate(t)}},{key:"addEffect",value:function(t){var e=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],n=arguments[2],i=this.element,r=this.transforms;if(!n){if(!this.scenes.length)return this.addScene({effects:[{name:t,options:e}]});n=this.scenes[this.scenes.length-1]}var a=function(t,e){return function(){var n={options:e,element:i,transforms:r};t.call(n,this)}};return n.effects.push(a(t,e)),this}},{key:"calculateStart",value:function(t){var e=t.trigger,n=t.triggerPos,i=0;do i+=e.offsetTop||0,e=e.offsetParent;while(e);t.start=Math.max(0,i-n*window.innerHeight)}},{key:"onScroll",value:function(){this.active&&(this.scroll=window.scrollY||window.pageYOffset,this.ticking||(window.requestAnimationFrame(this.update.bind(this)),this.ticking=!0))}},{key:"onResize",value:function(){this.scenes.forEach(this.updateScene,this)}},{key:"update",value:function(){this.scenes.forEach(this.calculate,this),this.ticking=!1}},{key:"calculate",value:function(t){var e=t.start,n=t.duration,i=this.scroll,r=void 0,a=void 0;if(i-e>n){if("after"===t.state)return;t.state="after",r=1}else if(i-e<0){if("before"===t.state)return;t.state="before",r=0}else t.state="active",r=t.easing?t.easing(i-e,0,1,n):(i-e)/n;t.effects.forEach(function(t){t.call(r)}),t.applyTransform&&(a=this.updateMatrix(),this.element.style[f]=a.asCSS())}},{key:"updateMatrix",value:function(){var t=this.transforms,e=this.matrix;return e.clear(),t.transformOrigin&&e.translate(-t.transformOrigin[0],-t.transformOrigin[1],-t.transformOrigin[2]),t.scale&&e.scale(t.scale[0],t.scale[1]),t.skew&&e.skew(t.skew[0],t.skew[1]),t.rotation&&(e.rotateX(t.rotation[0]),e.rotateY(t.rotation[1]),e.rotateZ(t.rotation[2])),t.position&&e.translate(t.position[0],t.position[1],t.position[2]),t.transformOrigin&&e.translate(t.transformOrigin[0],t.transformOrigin[1],t.transformOrigin[2]),e}},{key:"disable",value:function(){this.active=!1}}]),t}();return d}();
(function () {
'use strict';
/**
* Feature detection: CSS transforms
* @type {Boolean}
*/
var dummy = document.createElement('div');
var transform = ['transform', 'webkitTransform', 'MozTransform', 'OTransform', 'msTransform'].find(function (t) {
// return (document.body.style[t] !== undefined); // if DOM is not yet ready, let's do:
return (dummy.style[t] !== undefined);
});
function assignedMatrixMultiplication(a, b, res) {
// Unrolled loop
res[0] = a[0] * b[0] + a[1] * b[4] + a[2] * b[8] + a[3] * b[12];
res[1] = a[0] * b[1] + a[1] * b[5] + a[2] * b[9] + a[3] * b[13];
res[2] = a[0] * b[2] + a[1] * b[6] + a[2] * b[10] + a[3] * b[14];
res[3] = a[0] * b[3] + a[1] * b[7] + a[2] * b[11] + a[3] * b[15];
res[4] = a[4] * b[0] + a[5] * b[4] + a[6] * b[8] + a[7] * b[12];
res[5] = a[4] * b[1] + a[5] * b[5] + a[6] * b[9] + a[7] * b[13];
res[6] = a[4] * b[2] + a[5] * b[6] + a[6] * b[10] + a[7] * b[14];
res[7] = a[4] * b[3] + a[5] * b[7] + a[6] * b[11] + a[7] * b[15];
res[8] = a[8] * b[0] + a[9] * b[4] + a[10] * b[8] + a[11] * b[12];
res[9] = a[8] * b[1] + a[9] * b[5] + a[10] * b[9] + a[11] * b[13];
res[10] = a[8] * b[2] + a[9] * b[6] + a[10] * b[10] + a[11] * b[14];
res[11] = a[8] * b[3] + a[9] * b[7] + a[10] * b[11] + a[11] * b[15];
res[12] = a[12] * b[0] + a[13] * b[4] + a[14] * b[8] + a[15] * b[12];
res[13] = a[12] * b[1] + a[13] * b[5] + a[14] * b[9] + a[15] * b[13];
res[14] = a[12] * b[2] + a[13] * b[6] + a[14] * b[10] + a[15] * b[14];
res[15] = a[12] * b[3] + a[13] * b[7] + a[14] * b[11] + a[15] * b[15];
return res;
}
function assignTranslate(matrix, x, y, z) {
matrix[0] = 1;
matrix[1] = 0;
matrix[2] = 0;
matrix[3] = 0;
matrix[4] = 0;
matrix[5] = 1;
matrix[6] = 0;
matrix[7] = 0;
matrix[8] = 0;
matrix[9] = 0;
matrix[10] = 1;
matrix[11] = 0;
matrix[12] = x;
matrix[13] = y;
matrix[14] = z;
matrix[15] = 1;
}
function assignRotateX(matrix, rad) {
matrix[0] = 1;
matrix[1] = 0;
matrix[2] = 0;
matrix[3] = 0;
matrix[4] = 0;
matrix[5] = Math.cos(rad);
matrix[6] = -Math.sin(rad);
matrix[7] = 0;
matrix[8] = 0;
matrix[9] = Math.sin(rad);
matrix[10] = Math.cos(rad);
matrix[11] = 0;
matrix[12] = 0;
matrix[13] = 0;
matrix[14] = 0;
matrix[15] = 1;
}
var assignRotateY = function(matrix, rad) {
matrix[0] = Math.cos(rad);
matrix[1] = 0;
matrix[2] = Math.sin(rad);
matrix[3] = 0;
matrix[4] = 0;
matrix[5] = 1;
matrix[6] = 0;
matrix[7] = 0;
matrix[8] = -Math.sin(rad);
matrix[9] = 0;
matrix[10] = Math.cos(rad);
matrix[11] = 0;
matrix[12] = 0;
matrix[13] = 0;
matrix[14] = 0;
matrix[15] = 1;
};
function assignRotateZ(matrix, rad) {
matrix[0] = Math.cos(rad);
matrix[1] = -Math.sin(rad);
matrix[2] = 0;
matrix[3] = 0;
matrix[4] = Math.sin(rad);
matrix[5] = Math.cos(rad);
matrix[6] = 0;
matrix[7] = 0;
matrix[8] = 0;
matrix[9] = 0;
matrix[10] = 1;
matrix[11] = 0;
matrix[12] = 0;
matrix[13] = 0;
matrix[14] = 0;
matrix[15] = 1;
}
function assignSkew(matrix, ax, ay) {
matrix[0] = 1;
matrix[1] = Math.tan(ax);
matrix[2] = 0;
matrix[3] = 0;
matrix[4] = Math.tan(ay);
matrix[5] = 1;
matrix[6] = 0;
matrix[7] = 0;
matrix[8] = 0;
matrix[9] = 0;
matrix[10] = 1;
matrix[11] = 0;
matrix[12] = 0;
matrix[13] = 0;
matrix[14] = 0;
matrix[15] = 1;
}
function assignScale(matrix, x, y) {
matrix[0] = x;
matrix[1] = 0;
matrix[2] = 0;
matrix[3] = 0;
matrix[4] = 0;
matrix[5] = y;
matrix[6] = 0;
matrix[7] = 0;
matrix[8] = 0;
matrix[9] = 0;
matrix[10] = 1;
matrix[11] = 0;
matrix[12] = 0;
matrix[13] = 0;
matrix[14] = 0;
matrix[15] = 1;
}
function assignIdentity(matrix) {
matrix[0] = 1;
matrix[1] = 0;
matrix[2] = 0;
matrix[3] = 0;
matrix[4] = 0;
matrix[5] = 1;
matrix[6] = 0;
matrix[7] = 0;
matrix[8] = 0;
matrix[9] = 0;
matrix[10] = 1;
matrix[11] = 0;
matrix[12] = 0;
matrix[13] = 0;
matrix[14] = 0;
matrix[15] = 1;
}
function copyArray(a, b) {
b[0] = a[0];
b[1] = a[1];
b[2] = a[2];
b[3] = a[3];
b[4] = a[4];
b[5] = a[5];
b[6] = a[6];
b[7] = a[7];
b[8] = a[8];
b[9] = a[9];
b[10] = a[10];
b[11] = a[11];
b[12] = a[12];
b[13] = a[13];
b[14] = a[14];
b[15] = a[15];
}
function createMatrix() {
var data = new Float32Array(16);
var a = new Float32Array(16);
var b = new Float32Array(16);
assignIdentity(data);
return {
data: data,
asCSS: function() {
var css = 'matrix3d(';
for (var i = 0; i < 15; ++i) {
if (Math.abs(data[i]) < 0.0001) {
css += '0,';
} else {
css += data[i].toFixed(10) + ',';
}
}
if (Math.abs(data[15]) < 0.0001) {
css += '0)';
} else {
css += data[15].toFixed(10) + ')';
}
return css;
},
clear: function() {
assignIdentity(data);
},
translate: function(x, y, z) {
copyArray(data, a);
assignTranslate(b, x, y, z);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateX: function(radians) {
copyArray(data, a);
assignRotateX(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateY: function(radians) {
copyArray(data, a);
assignRotateY(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
rotateZ: function(radians) {
copyArray(data, a);
assignRotateZ(b, radians);
assignedMatrixMultiplication(a, b, data);
return this;
},
scale: function(x, y) {
copyArray(data, a);
assignScale(b, x, y);
assignedMatrixMultiplication(a, b, data);
return this;
},
skew: function(ax, ay) {
copyArray(data, a);
assignSkew(b, ax, ay);
assignedMatrixMultiplication(a, b, data);
return this;
}
};
}
/**
* The Scrollify Class
*/
var Scrollify = function Scrollify(element) {
var this$1 = this;
if (element instanceof HTMLElement == false) { element = document.querySelector(element); }
if (!element || !transform) { return this.active = false; }
// if (!transform) { throw 'Scrollify [error]: transforms not supported'; }
// if (!element) { throw 'Scrollify [error]: could not find element'; }
this.element = element;
this.ticking = false;
this.scenes = [];
this.scroll = window.scrollY || window.pageYOffset;
this.active = true;
this.matrix = createMatrix();
this.transforms = {
scale: [1,1],
rotation: [0,0,0],
position: [0,0,0]
// transformOrigin: [],
// skew: [],
};
window.addEventListener('scroll', function (e) { return this$1.onScroll(e); });
window.addEventListener('resize', function (e) { return this$1.onResize(e); });
};
/**
* Add a new Scene to the Scrollify object. Scene information includes when
* to start applying an effect and for how long.
* @param{Object} opts: Various options to apply to the new Scene:
*
* start: (required) When to start the effect. It is a 0 - 1 value
* representing the percentage of the viewport (eg. 0.5).
* Any effects in the Scene will begin when the trigger element
* crosses this threshold.
*
* duration: The length of the effect, in pixels. Scrollify will
* interpolate that into value into a "progress" variable, bounded
* by 0 - 1. If not supplied, the default value is the height of the
* viewport + element height, meaning the effect will last for as
* long as the element is visible.
*
* trigger: If supplied, Scrollify will use this element's position to
* start any Scene effects. If not supplied, the default is to use
* the element itself as a trigger.
*
* easing: Ease in/out of an effect. Any value from Robert Penner's easing
* functions is valid.
*
* @return {void}
*/
Scrollify.prototype.addScene = function addScene (opts) {
var this$1 = this;
var triggerPos = opts.start || 0;
var duration = opts.duration || window.innerHeight + this.element.offsetHeight;
var easing = opts.easing || false;
var effects = opts.effects || [];
var trigger = opts.trigger ? opts.trigger instanceof HTMLElement ? opts.trigger : document.querySelector(opts.trigger) : this.element;
var applyTransform = opts.applyTransform !== undefined ? opts.applyTransform : true; // opt out rather than opt in
var scene = {
trigger: trigger,
triggerPos: 1 - triggerPos,
duration: duration,
easing: easing,
applyTransform: applyTransform,
effects: []
};
// scene.active = this.scroll > this.calculateStart(scene); // calculate any transformations if the scene has already passed.
this.calculateStart(scene);
scene.state = (this.scroll > this.start) ? (this.scroll > this.start+duration) ? 'after' : 'active' : 'before';
effects.map(function (effect) {
this$1.addEffect(effect.name, effect.options, scene);
});
this.updateScene(scene);
this.scenes.push(scene);
return this;
};
/**
* Update each scene.
* @param{Object} scene: The scene to update.
* @return {void}
*/
Scrollify.prototype.updateScene = function updateScene (scene) {
this.calculateStart(scene);
this.calculate(scene);
};
/**
* Add a particular transformation to a scene.
* @param{Function} effect: The transformation function to apply.
* @param{Object} options: Any transformation options.
* @param{Object} scene: Object containing start and duration information.
* @return {void}
*/
Scrollify.prototype.addEffect = function addEffect (effect, options, scene) {
if ( options === void 0 ) options = {};
var element = this.element;
var transforms = this.transforms;
if (!scene) {
if (this.scenes.length) {
// use the most recently added scene
scene = this.scenes[this.scenes.length - 1];
} else {
// or if no scene (ie "addEffect" was called directly on Scrollify), set up a default one
return this.addScene({
'effects': [{'name': effect, 'options': options}]
});
}
}
var curry = function (fn, options) {
return function() { // NOTE: don't use => function here as we do NOT want to bind "this"
var context = {
'options': options,
'element': element,
'transforms': transforms
};
fn.call(context, this); // eslint-disable-line
};
};
scene.effects.push(curry(effect, options));
return this;
};
/**
* Calculate the start point of each scene.
* @param{[type]} scene A Scrollify Scene object.
* @return {Integer} The start position of the Scene, in pixels.
*/
Scrollify.prototype.calculateStart = function calculateStart (scene) {
var trigger = scene.trigger;
var triggerPos = scene.triggerPos;
var top = 0;
do {
top += trigger.offsetTop || 0;
trigger = trigger.offsetParent;
} while(trigger);
// top = trigger.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
// return Math.max(0, top - triggerPos * window.innerHeight); // (can be negative...?)
scene.start = Math.max(0, top - triggerPos * window.innerHeight);
};
/**
* onScroll Handler
* @return {void}
*/
Scrollify.prototype.onScroll = function onScroll () {
if (!this.active) { return; }
this.scroll = window.scrollY || window.pageYOffset;
if (!this.ticking) {
window.requestAnimationFrame(this.update.bind(this));
this.ticking = true;
}
};
/**
* onResize Handler
* @return {void}
*/
Scrollify.prototype.onResize = function onResize () {
this.scenes.forEach(this.updateScene, this);
};
/**
* Update the transformations for every scene.
* @return {void}
*/
Scrollify.prototype.update = function update () {
this.scenes.forEach(this.calculate, this);
this.ticking = false;
};
/**
* Calculate the transformations for each scene.
* @param{Object} scene: An Object containing start and duration
* information as well as an Array of
* transformations to apply.
* @return {void}
*/
Scrollify.prototype.calculate = function calculate (scene) {
var start = scene.start;
var duration = scene.duration;
var scroll = this.scroll;
var progress;
var matrix;
// after end
if (scroll - start > duration) {
if (scene.state !== 'after') { // do one final iteration
scene.state = 'after';
progress = 1;
} else {
return;
}
// before start
} else if (scroll - start < 0) {
if (scene.state !== 'before') { // do one final iteration
scene.state = 'before';
progress = 0;
} else {
return;
}
// active
} else {
scene.state = 'active';
if (scene.easing) { // start, from, to, end
progress = scene.easing(scroll - start, 0, 1, duration);
} else {
progress = (scroll - start) / duration;
}
}
// cycle through any registered transformations
scene.effects.forEach(function (effect) {
effect.call(progress);
});
if (scene.applyTransform) {
// transmogrify all applied transformations into a single matrix, and apply
matrix = this.updateMatrix();
this.element.style[transform] = matrix.asCSS();
}
};
/**
* Loop through all the element's transformation data and calculates a matrix representing it.
* @return {Matrix} Ye olde Matrix
*/
Scrollify.prototype.updateMatrix = function updateMatrix () {
var t = this.transforms;
var m = this.matrix;
m.clear();
// here we adjust the transformOrigin ...
if (t.transformOrigin) {
m.translate(-t.transformOrigin[0], -t.transformOrigin[1], -t.transformOrigin[2]);
}
if (t.scale) {
m.scale(t.scale[0], t.scale[1]);
}
if (t.skew) {
m.skew(t.skew[0], t.skew[1]);
}
if (t.rotation) {
m.rotateX(t.rotation[0]);
m.rotateY(t.rotation[1]);
m.rotateZ(t.rotation[2]);
}
if (t.position) {
m.translate(t.position[0], t.position[1], t.position[2]);
}
// -----------------------------------------------------
// IF we wished to perform rotation AFTER skew / position / etc, we could do it here.
// The ordering is important, and has an effect.
// if (t.rotationPost) {
// m.rotateX(t.rotationPost[0]);
// m.rotateY(t.rotationPost[1]);
// m.rotateZ(t.rotationPost[2]);
// }
// if (t.scalePost) {
// m.scale(t.scalePost[0], t.scalePost[1]);
// }
// -----------------------------------------------------
// ... and here we put it back. (This duplication is not a mistake).
if (t.transformOrigin) {
m.translate(t.transformOrigin[0], t.transformOrigin[1], t.transformOrigin[2]);
}
return m;
};
/**
* Disable Scrollify-ing. Perhaps for performance reasons / mobile devices.
* @return {void}
*/
Scrollify.prototype.disable = function disable () {
this.active = false;
};
/**
* Translate an element along the X-axis.
* @param {Float} progress: Current progress data of the scene, between 0 and 1.
* @this {Object}
* @return {void}
*/
function translateX(progress) {
var to = this.options.to || 0;
var from = this.options.from || 0;
var offset = (to - from) * progress + from;
this.transforms.position[0] = offset;
}
/**
* Translate an element vertically.
* @param {Float} progress: Current progress data of the scene, between 0 and 1.
* @this {Object}
* @return {void}
*/
function translateY(progress) {
var to = this.options.to || 0;
var from = this.options.from || 0; // this.transforms.position[1];
var offset = (to - from) * progress + from;
this.transforms.position[1] = offset;
}
/**
* Rotate an element, using radians. (note: rotates around Z-axis).
* @param {Float} progress: Current progress data of the scene, between 0 and 1.
* @this {Object}
* @return {void}
*/
function rotate(progress) {
var radians = this.options.rad * progress;
this.transforms.rotation[2] = radians;
};
/**
* Uniformly scale an element along both axis'.
* @param {Float} progress: Current progress data of the scene, between 0 and 1.
* @this {Object}
* @return {void}
*/
function scale(progress) {
var to = this.options.to || 1;
var from = this.options.from || this.transforms.scale[0];
var scale = (to - from) * progress + from;
this.transforms.scale[0] = scale;
this.transforms.scale[1] = scale;
};
/**
* Update an element's opacity.
* @param {Float} progress: Current progress data of the scene, between 0 and 1.
* @this {Object}
* @return {void}
*/
function fade(progress) {
var to = this.options.to !== undefined ? this.options.to : 1;
var from = this.options.from !== undefined ? this.options.from : 1;
var opacity = (to - from) * progress + from;
this.element.style.opacity = opacity;
};
/**
* Parallax an element.
* @param {Float} progress: Current progress data of the scene, between 0 and 1.
* @this {Object}
* @return {void}
*
* "this" contains effect options and also a reference to the element.
*/
function parallax(progress) {
var offset = 0;
var range = this.options.range || 0;
offset = progress * range;
this.transforms.position[1] = offset; // just vertical for now
}
/**
* Toggle a class on or off.
* @param {Float} progress: Current progress data of the scene, between 0 and 1.
* @this {Object}
* @return {void}
*/
function toggle(progress) {
var opts = this.options;
var element = this.element;
var times = Object.keys(opts);
times.forEach(function(time) {
var css = opts[time];
if (progress > time) {
element.classList.add(css);
} else {
element.classList.remove(css);
}
});
}
/**
* Sticky Element: sets up a sticky element which toggles position 'fixed' on / off.
* @param {Float} progress: Current progress data of the scene, between 0 and 1.
* @this {Object}
* @return {void}
*/
function stick(progress) {
var element = this.element;
var currentState = '_';
// progress = Math.min(1.0, Math.max(0.0, progress));
if (progress <= 0) {
setState(element, 'normal');
} else if (progress >= 1) {
setState(element, 'bottom');
} else {
setState(element, 'sticky');
}
function setState(element, state) {
var BCR = element.getBoundingClientRect();
if (currentState === state) { return; }
if (state == 'sticky') {
element.style.top = BCR.top + 'px';
element.style.left = BCR.left + 'px';
element.style.width = BCR.width + 'px';
} else {
element.style.top = '';
element.style.left = '';
element.style.width = '';
}
element.className = '';
// element.classList.remove(currentState); // TODO: why is this not working?
element.classList.add(state);
currentState = state;
}
// boundsParams = ["top", "left", "bottom", "right", "margin", "marginLeft", "marginRight", "marginTop", "marginBottom"];
}
var fx = Object.freeze({
translateX: translateX,
translateY: translateY,
rotate: rotate,
scale: scale,
fade: fade,
parallax: parallax,
toggle: toggle,
stick: stick
});
/*eslint max-len: ["error", 120]*/
function oscillate(t, b, c, d) {
var i = 4; // # of bounces
t /= d; // percentage
t = Math.PI * i * t; // go from 0 -> 2π
t = Math.sin(t) * c; // now, oscillates between c, -c
t = Math.abs(t); // "half wave rectifier"
return t + b;
}
function easeInQuad(t, b, c, d) {
return c * (t /= d) * t + b;
}
function easeOutQuad(t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
}
function easeInOutQuad(t, b, c, d) {
if ((t /= d / 2) < 1) { return c / 2 * t * t + b; }
return -c / 2 * (--t * (t - 2) - 1) + b;
}
function easeInCubic(t, b, c, d) {
return c * (t /= d) * t * t + b;
}
function easeOutCubic(t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
}
function easeInOutCubic(t, b, c, d) {
if ((t /= d / 2) < 1) { return c / 2 * t * t * t + b; }
return c / 2 * ((t -= 2) * t * t + 2) + b;
}
function easeInQuart(t, b, c, d) {
return c * (t /= d) * t * t * t + b;
}
function easeOutQuart(t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
}
function easeInOutQuart(t, b, c, d) {
if ((t /= d / 2) < 1) { return c / 2 * t * t * t * t + b; }
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
function easeInQuint(t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
}
function easeOutQuint(t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
}
function easeInOutQuint(t, b, c, d) {
if ((t /= d / 2) < 1) { return c / 2 * t * t * t * t * t + b; }
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
}
function easeInSine(t, b, c, d) {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
}
function easeOutSine(t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
}
function easeInOutSine(t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
}
function easeInExpo(t, b, c, d) {
return t == 0 ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
}
function easeOutExpo(t, b, c, d) {
return t == d ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
}
function easeInOutExpo(t, b, c, d) {
if (t == 0) { return b; }
if (t == d) { return b + c; }
if ((t /= d / 2) < 1) { return c / 2 * Math.pow(2, 10 * (t - 1)) + b; }
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
function easeInCirc(t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
}
function easeOutCirc(t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
}
function easeInOutCirc(t, b, c, d) {
if ((t /= d / 2) < 1) { return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; }
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
}
function easeInElastic(t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) { return b; }
if ((t /= d) == 1) { return b + c; }
if (!p) { p = d * .3; }
if (a < Math.abs(c)) {
a = c; var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
return -(a * Math.pow(2,10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
}
function easeOutElastic(t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) { return b; }
if ((t /= d) == 1) { return b + c; }
if (!p) { p = d * .3; }
if (a < Math.abs(c)) {
a = c; var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
return a * Math.pow(2,-10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
}
function easeInOutElastic(t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) { return b; }
if ((t /= d / 2) == 2) { return b + c; }
if (!p) { p = d * (.3 * 1.5); }
if (a < Math.abs(c)) {
a = c; var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
if (t < 1) { return -.5 * (a * Math.pow(2,10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; }
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
}
function easeInBack(t, b, c, d, s) {
if (s == undefined) { s = 1.70158; }
return c * (t /= d) * t * ((s + 1) * t - s) + b;
}
function easeOutBack(t, b, c, d, s) {
if (s == undefined) { s = 1.70158; }
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
}
function easeInOutBack(t, b, c, d, s) {
if (s == undefined) { s = 1.70158; }
if ((t /= d / 2) < 1) { return c / 2 * (t * t * (((s *= 1.525) + 1) * t - s)) + b; }
return c / 2 * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b;
}
function easeOutBounce(t, b, c, d) {
if (t /= d < 1 / 2.75) {
return c * (7.5625 * t * t) + b;
} else if (t < 2 / 2.75) {
return c * (7.5625 * (t -= 1.5 / 2.75) * t + .75) + b;
} else if (t < 2.5 / 2.75) {
return c * (7.5625 * (t -= 2.25 / 2.75) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= 2.625 / 2.75) * t + .984375) + b;
}
}
var easings = Object.freeze({
oscillate: oscillate,
easeInQuad: easeInQuad,
easeOutQuad: easeOutQuad,
easeInOutQuad: easeInOutQuad,
easeInCubic: easeInCubic,
easeOutCubic: easeOutCubic,
easeInOutCubic: easeInOutCubic,
easeInQuart: easeInQuart,
easeOutQuart: easeOutQuart,
easeInOutQuart: easeInOutQuart,
easeInQuint: easeInQuint,
easeOutQuint: easeOutQuint,
easeInOutQuint: easeInOutQuint,
easeInSine: easeInSine,
easeOutSine: easeOutSine,
easeInOutSine: easeInOutSine,
easeInExpo: easeInExpo,
easeOutExpo: easeOutExpo,
easeInOutExpo: easeInOutExpo,
easeInCirc: easeInCirc,
easeOutCirc: easeOutCirc,
easeInOutCirc: easeInOutCirc,
easeInElastic: easeInElastic,
easeOutElastic: easeOutElastic,
easeInOutElastic: easeInOutElastic,
easeInBack: easeInBack,
easeOutBack: easeOutBack,
easeInOutBack: easeInOutBack,
easeOutBounce: easeOutBounce
});
Scrollify.fx = fx;
Scrollify.easings = easings;
window.Scrollify = Scrollify;
}());

15

package.json
{
"name": "@apatheticwes/scrollify",
"version": "0.2.0",
"version": "0.3.0",
"description": "A simple thing for triggering stupid scroll effects that everybody loves",

@@ -10,4 +10,5 @@ "main": "./dist/scrollify.cjs.js",

"start": "http-server ./ -p 8080 -d",
"clean": "rm dist/*.js*",
"build": "npm run clean && node build.js",
"clean": "rm -f dist/*.js*",
"#build": "npm run clean && node build.js",
"build": "npm run clean && npm run lint && rollup -c && rollup -c rollup.shim.config.js",
"lint": "eslint source/js/*.js",

@@ -27,12 +28,6 @@ "test": "#tape -r babel-register test/*.js"

"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.10.1",
"babel-core": "^6.11.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-es2015-rollup": "^1.1.1",
"babel-preset-stage-1": "^6.5.0",
"eslint": "^3.1.1",
"http-server": "^0.9.0",
"rollup": "^0.34.1",
"rollup-plugin-babel": "^2.6.1",
"rollup-plugin-buble": "^0.12.1",
"rollup-plugin-uglify": "^1.0.1",

@@ -39,0 +34,0 @@ "tape": "^4.6.0",

48

README.md
# Scrollify
Scrollify. Trigger simple actions on scroll.
Scrollify. Do things on scroll.
## A Note on the Possibilities
## What sorts of things?
There are several things you might want to do upon user-scroll. This ES6 class provides a few basic things, such as "pinning" an element, parallax-ing it, or toggling a class on/off. You can also easily create your own custom plugin effects.
Well, whatever you want. Common effects such as parallax or toggling a class on/off are possible and bundled within. However, you may also easily create your own custom scroll function, and pass it in to Scrollify. The built-in effects include:
- *Stick*: sticks an element to a particular point and holds in there for a
pre-defined number of pixels.
- *Parallax*: move stuff on scroll. A subtle effect that transistions elements
more slowly (or perhaps quickly) than the speed of the user-scroll.
- *Toggle*: turn a CSS class on or off if the element crosses a particular
threshold on the page.
- *Translate*: translate an element along the X- or Y- axis.
- *Rotate*: rotate an element via scroll.
- *Scale*: scale an element.
- *Fade*: change an element's opacity.
- **Pin**: sticks an element to a particular point and holds in there for a
pre-defined number of pixels.
<li><strong>Parallax</strong>: move stuff on scroll. A subtle effect that transistions elements
more slowly (or perhaps quickly) than the speed of the user-scroll.</li>
<li><strong>Toggle</strong>: turn a CSS class on or off if the element crosses a particular
threshhold on the page.</li>
<li><strong>Custom</strong>: you can easily add your own custom effects, which may include various
transformations, rotations, etc.
## Getting Started
Download it from [Github](https://github.com/apathetic/scrollify).
###Notes
Scrollify works by first calculating an element's position in the page so that it may be manipulated on scroll. It is important to note that as the page loads, this position may jump around as the DOM is constructed and images are loaded, etc. Therefore, it is important that Scrollify'd elements are not initialized until the page has finished loading all images and the DOM is stable.
If you're trying to Scrollify an element whose position on the page is dependant on assets loading above of it, you may wish to use __window.addEventListener('load'__ rather than the more common __window.addEventListener('DOMContentLoaded'__, OR check out the lovely <a href="https://github.com/desandro/imagesloaded">imagesloaded.js</a> plugin.
Include the relevant scripts in your web page, and then:
## API
Coming soon. Please see the demo/index.html page for now.
## Examples
...
First, spin up a webserver via ```npm i && npm start```. Navigate to localhost:8080/demo to check out the demos. Code samples are therein.
## Getting Started
Download it from [Github](https://github.com/apathetic/scrollify).
## Support

@@ -35,12 +40,9 @@ * IE9+

## Known Issues
## Examples
Please see the _demo_ directory
## Release History
### 0.2
* quick scrolling bug fixing
* better IE support
### 0.1
* initial commit

1

src/scrollify.js

@@ -328,2 +328,1 @@ /*

}

18

src/scrollPage.js

@@ -14,10 +14,10 @@ /*global document requestAnimationFrame*/

export default function scrollPage(to, offset = 0, callback) {
var root = document.body;
var duration = 500;
var startTime;
var startPos = root.scrollTop;
var endPos = ~~(to.getBoundingClientRect().top - offset);
let startTime;
var scroll = (timestamp) => {
var elapsed;
const root = document.body;
const duration = 500;
const startPos = root.scrollTop;
const endPos = ~~(to.getBoundingClientRect().top - offset);
const scroll = (timestamp) => {
let elapsed;

@@ -30,3 +30,3 @@ startTime = startTime || timestamp;

requestAnimationFrame(scroll);
} else {
} else if (callback) {
callback.call(to);

@@ -38,3 +38,1 @@ }

}

8

src/transform.js

@@ -6,6 +6,8 @@ /**

let transform = ['transform', 'webkitTransform', 'MozTransform', 'OTransform', 'msTransform'].find((t) => {
return (document.body.style[t] !== undefined);
const dummy = document.createElement('div');
const transform = ['transform', 'webkitTransform', 'MozTransform', 'OTransform', 'msTransform'].find((t) => {
// return (document.body.style[t] !== undefined); // if DOM is not yet ready, let's do:
return (dummy.style[t] !== undefined);
});
export default transform;
export default transform;
dist/scrollify.cjs.js.map
dist/scrollify.es6.js.map
src/activeSection.js
src/scrollsample.js
src/sticky.js
demo/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc