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.3.1 to 0.4.0

src/imagesLoaded.js
src/normalize.js

123

dist/scrollify.cjs.js

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

var dummy = document.createElement('div');
var dummy = document.createElement('div'); // we use this instead of document.body if the DOM is not yet ready
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);

@@ -268,2 +267,12 @@ });

function getUnit(val) {
var split = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(val);
if (split) return split[2];
}
// Effects that use matrix transformations. At present, only
// built-in effects benefit from matrix transformations.
var validTransforms = ['translateX', 'translateY', 'rotate', 'scale', 'parallax'];
/**

@@ -277,4 +286,4 @@ * The Scrollify Class

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 (!transform) { return new Error('Scrollify [error]: transforms not supported'); }
// if (!element) { return new Error('Scrollify [error]: could not find element'); }

@@ -290,4 +299,4 @@ this.element = element;

rotation: [0,0,0],
position: [0,0,0]
// transformOrigin: [],
position: [0,0,0],
// transformOrigin: [0,0,0]
// skew: [],

@@ -305,19 +314,18 @@ };

*
* 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.
* 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.
*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.
* 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.
* easing: Ease in/out of any effects in the Scene.
*

@@ -329,27 +337,26 @@ * @return {void}

var triggerPos = opts.start || 0;
var duration = opts.duration || window.innerHeight + this.element.offsetHeight;
var trigger = opts.trigger ? opts.trigger instanceof HTMLElement ? opts.trigger : document.querySelector(opts.trigger) : this.element;
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,
_trigger: trigger, // keep for internal calculations
_applyTransform: false, // internal-use only. Whether to use matrix transforms or not. Perhaps should be moved to *effect* level
_offset: opts.start || 0, // store original value for later calcs
_duration: opts.duration || 1, // store original value for later calculations
// start: 0, // absolute value in px. Some percentage of the viewport
// duration: duration, // absolute value in px. Some percentage of the viewport
easing: easing,
applyTransform: applyTransform,
effects: []
};
// scene.active = this.scroll > this.calculateStart(scene); // calculate any transformations if the scene has already passed.
effects.map(function (effect) {
this$1.addEffect(effect.fn, effect.options, scene);
});
this.calculateStart(scene);
scene.state = (this.scroll > this.start) ? (this.scroll > this.start+duration) ? 'after' : 'active' : 'before';
this.calculateDuration(scene);
effects.map(function (effect) {
this$1.addEffect(effect.name, effect.options, scene);
});
scene.state = (this.scroll > this.start) ? (this.scroll > this.start+scene.duration) ? 'after' : 'active' : 'before';
this.updateScene(scene);
this.calculate(scene);
this.scenes.push(scene);

@@ -367,2 +374,3 @@

this.calculateStart(scene);
this.calculateDuration(scene);
this.calculate(scene);

@@ -378,3 +386,3 @@ };

*/
Scrollify.prototype.addEffect = function addEffect (effect, options, scene) {
Scrollify.prototype.addEffect = function addEffect (fn, options, scene) {
if ( options === void 0 ) options = {};

@@ -392,3 +400,3 @@

return this.addScene({
'effects': [{'name': effect, 'options': options}]
'effects': [{'fn': fn, 'options': options}]
});

@@ -398,2 +406,5 @@ }

// if any effect uses a matrix tranformation, we use true for the entire scene
scene._applyTransform = scene._applyTransform || !!~validTransforms.indexOf(fn.name);
var curry = function (fn, options) {

@@ -411,3 +422,3 @@ return function() { // NOTE: don't use => function here as we do NOT want to bind "this"

scene.effects.push(curry(effect, options));
scene.effects.push(curry(fn, options));

@@ -419,8 +430,8 @@ return this;

* Calculate the start point of each scene.
* @param{[type]} scene A Scrollify Scene object.
* @param{Scrollify.Scene} 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 offset = window.innerHeight - this.mapTo(scene._offset, window.innerHeight);
var trigger = scene._trigger;
var top = 0;

@@ -432,9 +443,32 @@

} while(trigger);
// top = trigger.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
// var test = 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);
scene.start = Math.max(0, top - offset);
};
Scrollify.prototype.mapTo = function mapTo (input, scale) {
var parsed = parseFloat(input);
var unit = getUnit(input);
switch (unit) {
case 'px':
return parsed;
case '%':
return parsed / 100.0 * scale;
default:
return parsed * scale;
}
};
/**
* [calculateDuration description]
* @param{[type]} scene [description]
* @return [type] [description]
*/
Scrollify.prototype.calculateDuration = function calculateDuration (scene) {
// if (typeof scene._duration === 'function') { return scene._duration(); }
scene.duration = this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight);
};
/**
* onScroll Handler

@@ -482,3 +516,2 @@ * @return {void}

var progress;
var matrix;

@@ -518,5 +551,5 @@ // after end

if (scene.applyTransform) {
if (scene._applyTransform) {
// transmogrify all applied transformations into a single matrix, and apply
matrix = this.updateMatrix();
var matrix = this.updateMatrix();
this.element.style[transform] = matrix.asCSS();

@@ -523,0 +556,0 @@ }

123

dist/scrollify.es6.js

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

var dummy = document.createElement('div');
var dummy = document.createElement('div'); // we use this instead of document.body if the DOM is not yet ready
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);

@@ -266,2 +265,12 @@ });

function getUnit(val) {
var split = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(val);
if (split) return split[2];
}
// Effects that use matrix transformations. At present, only
// built-in effects benefit from matrix transformations.
var validTransforms = ['translateX', 'translateY', 'rotate', 'scale', 'parallax'];
/**

@@ -275,4 +284,4 @@ * The Scrollify Class

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 (!transform) { return new Error('Scrollify [error]: transforms not supported'); }
// if (!element) { return new Error('Scrollify [error]: could not find element'); }

@@ -288,4 +297,4 @@ this.element = element;

rotation: [0,0,0],
position: [0,0,0]
// transformOrigin: [],
position: [0,0,0],
// transformOrigin: [0,0,0]
// skew: [],

@@ -303,19 +312,18 @@ };

*
* 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.
* 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.
*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.
* 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.
* easing: Ease in/out of any effects in the Scene.
*

@@ -327,27 +335,26 @@ * @return {void}

var triggerPos = opts.start || 0;
var duration = opts.duration || window.innerHeight + this.element.offsetHeight;
var trigger = opts.trigger ? opts.trigger instanceof HTMLElement ? opts.trigger : document.querySelector(opts.trigger) : this.element;
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,
_trigger: trigger, // keep for internal calculations
_applyTransform: false, // internal-use only. Whether to use matrix transforms or not. Perhaps should be moved to *effect* level
_offset: opts.start || 0, // store original value for later calcs
_duration: opts.duration || 1, // store original value for later calculations
// start: 0, // absolute value in px. Some percentage of the viewport
// duration: duration, // absolute value in px. Some percentage of the viewport
easing: easing,
applyTransform: applyTransform,
effects: []
};
// scene.active = this.scroll > this.calculateStart(scene); // calculate any transformations if the scene has already passed.
effects.map(function (effect) {
this$1.addEffect(effect.fn, effect.options, scene);
});
this.calculateStart(scene);
scene.state = (this.scroll > this.start) ? (this.scroll > this.start+duration) ? 'after' : 'active' : 'before';
this.calculateDuration(scene);
effects.map(function (effect) {
this$1.addEffect(effect.name, effect.options, scene);
});
scene.state = (this.scroll > this.start) ? (this.scroll > this.start+scene.duration) ? 'after' : 'active' : 'before';
this.updateScene(scene);
this.calculate(scene);
this.scenes.push(scene);

@@ -365,2 +372,3 @@

this.calculateStart(scene);
this.calculateDuration(scene);
this.calculate(scene);

@@ -376,3 +384,3 @@ };

*/
Scrollify.prototype.addEffect = function addEffect (effect, options, scene) {
Scrollify.prototype.addEffect = function addEffect (fn, options, scene) {
if ( options === void 0 ) options = {};

@@ -390,3 +398,3 @@

return this.addScene({
'effects': [{'name': effect, 'options': options}]
'effects': [{'fn': fn, 'options': options}]
});

@@ -396,2 +404,5 @@ }

// if any effect uses a matrix tranformation, we use true for the entire scene
scene._applyTransform = scene._applyTransform || !!~validTransforms.indexOf(fn.name);
var curry = function (fn, options) {

@@ -409,3 +420,3 @@ return function() { // NOTE: don't use => function here as we do NOT want to bind "this"

scene.effects.push(curry(effect, options));
scene.effects.push(curry(fn, options));

@@ -417,8 +428,8 @@ return this;

* Calculate the start point of each scene.
* @param{[type]} scene A Scrollify Scene object.
* @param{Scrollify.Scene} 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 offset = window.innerHeight - this.mapTo(scene._offset, window.innerHeight);
var trigger = scene._trigger;
var top = 0;

@@ -430,9 +441,32 @@

} while(trigger);
// top = trigger.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
// var test = 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);
scene.start = Math.max(0, top - offset);
};
Scrollify.prototype.mapTo = function mapTo (input, scale) {
var parsed = parseFloat(input);
var unit = getUnit(input);
switch (unit) {
case 'px':
return parsed;
case '%':
return parsed / 100.0 * scale;
default:
return parsed * scale;
}
};
/**
* [calculateDuration description]
* @param{[type]} scene [description]
* @return [type] [description]
*/
Scrollify.prototype.calculateDuration = function calculateDuration (scene) {
// if (typeof scene._duration === 'function') { return scene._duration(); }
scene.duration = this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight);
};
/**
* onScroll Handler

@@ -480,3 +514,2 @@ * @return {void}

var progress;
var matrix;

@@ -516,5 +549,5 @@ // after end

if (scene.applyTransform) {
if (scene._applyTransform) {
// transmogrify all applied transformations into a single matrix, and apply
matrix = this.updateMatrix();
var matrix = this.updateMatrix();
this.element.style[transform] = matrix.asCSS();

@@ -521,0 +554,0 @@ }

136

dist/scrollify.js

@@ -9,5 +9,4 @@ (function () {

var dummy = document.createElement('div');
var dummy = document.createElement('div'); // we use this instead of document.body if the DOM is not yet ready
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);

@@ -269,2 +268,12 @@ });

function getUnit(val) {
var split = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(val);
if (split) return split[2];
}
// Effects that use matrix transformations. At present, only
// built-in effects benefit from matrix transformations.
var validTransforms = ['translateX', 'translateY', 'rotate', 'scale', 'parallax'];
/**

@@ -278,4 +287,4 @@ * The Scrollify Class

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 (!transform) { return new Error('Scrollify [error]: transforms not supported'); }
// if (!element) { return new Error('Scrollify [error]: could not find element'); }

@@ -291,4 +300,4 @@ this.element = element;

rotation: [0,0,0],
position: [0,0,0]
// transformOrigin: [],
position: [0,0,0],
// transformOrigin: [0,0,0]
// skew: [],

@@ -306,19 +315,18 @@ };

*
* 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.
* 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.
*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.
* 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.
* easing: Ease in/out of any effects in the Scene.
*

@@ -330,27 +338,26 @@ * @return {void}

var triggerPos = opts.start || 0;
var duration = opts.duration || window.innerHeight + this.element.offsetHeight;
var trigger = opts.trigger ? opts.trigger instanceof HTMLElement ? opts.trigger : document.querySelector(opts.trigger) : this.element;
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,
_trigger: trigger, // keep for internal calculations
_applyTransform: false, // internal-use only. Whether to use matrix transforms or not. Perhaps should be moved to *effect* level
_offset: opts.start || 0, // store original value for later calcs
_duration: opts.duration || 1, // store original value for later calculations
// start: 0, // absolute value in px. Some percentage of the viewport
// duration: duration, // absolute value in px. Some percentage of the viewport
easing: easing,
applyTransform: applyTransform,
effects: []
};
// scene.active = this.scroll > this.calculateStart(scene); // calculate any transformations if the scene has already passed.
effects.map(function (effect) {
this$1.addEffect(effect.fn, effect.options, scene);
});
this.calculateStart(scene);
scene.state = (this.scroll > this.start) ? (this.scroll > this.start+duration) ? 'after' : 'active' : 'before';
this.calculateDuration(scene);
effects.map(function (effect) {
this$1.addEffect(effect.name, effect.options, scene);
});
scene.state = (this.scroll > this.start) ? (this.scroll > this.start+scene.duration) ? 'after' : 'active' : 'before';
this.updateScene(scene);
this.calculate(scene);
this.scenes.push(scene);

@@ -368,2 +375,3 @@

this.calculateStart(scene);
this.calculateDuration(scene);
this.calculate(scene);

@@ -379,3 +387,3 @@ };

*/
Scrollify.prototype.addEffect = function addEffect (effect, options, scene) {
Scrollify.prototype.addEffect = function addEffect (fn, options, scene) {
if ( options === void 0 ) options = {};

@@ -393,3 +401,3 @@

return this.addScene({
'effects': [{'name': effect, 'options': options}]
'effects': [{'fn': fn, 'options': options}]
});

@@ -399,2 +407,5 @@ }

// if any effect uses a matrix tranformation, we use true for the entire scene
scene._applyTransform = scene._applyTransform || !!~validTransforms.indexOf(fn.name);
var curry = function (fn, options) {

@@ -412,3 +423,3 @@ return function() { // NOTE: don't use => function here as we do NOT want to bind "this"

scene.effects.push(curry(effect, options));
scene.effects.push(curry(fn, options));

@@ -420,8 +431,8 @@ return this;

* Calculate the start point of each scene.
* @param{[type]} scene A Scrollify Scene object.
* @param{Scrollify.Scene} 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 offset = window.innerHeight - this.mapTo(scene._offset, window.innerHeight);
var trigger = scene._trigger;
var top = 0;

@@ -433,9 +444,32 @@

} while(trigger);
// top = trigger.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
// var test = 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);
scene.start = Math.max(0, top - offset);
};
Scrollify.prototype.mapTo = function mapTo (input, scale) {
var parsed = parseFloat(input);
var unit = getUnit(input);
switch (unit) {
case 'px':
return parsed;
case '%':
return parsed / 100.0 * scale;
default:
return parsed * scale;
}
};
/**
* [calculateDuration description]
* @param{[type]} scene [description]
* @return [type] [description]
*/
Scrollify.prototype.calculateDuration = function calculateDuration (scene) {
// if (typeof scene._duration === 'function') { return scene._duration(); }
scene.duration = this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight);
};
/**
* onScroll Handler

@@ -483,3 +517,2 @@ * @return {void}

var progress;
var matrix;

@@ -519,5 +552,5 @@ // after end

if (scene.applyTransform) {
if (scene._applyTransform) {
// transmogrify all applied transformations into a single matrix, and apply
matrix = this.updateMatrix();
var matrix = this.updateMatrix();
this.element.style[transform] = matrix.asCSS();

@@ -654,4 +687,4 @@ }

function fade(progress) {
var to = this.options.to !== undefined ? this.options.to : 1;
var from = this.options.from !== undefined ? this.options.from : 1;
var to = this.options.to || 0;
var from = this.options.from || 1;
var opacity = (to - from) * progress + from;

@@ -671,6 +704,5 @@

function parallax(progress) {
var offset = 0;
var range = this.options.range || 0;
var offset = progress * range;
offset = progress * range;
this.transforms.position[1] = offset; // just vertical for now

@@ -711,4 +743,2 @@ }

// progress = Math.min(1.0, Math.max(0.0, progress));
if (progress <= 0) {

@@ -742,4 +772,2 @@ setState(element, 'normal');

}
// boundsParams = ["top", "left", "bottom", "right", "margin", "marginLeft", "marginRight", "marginTop", "marginBottom"];
}

@@ -766,3 +794,3 @@

t = Math.sin(t) * c; // now, oscillates between c, -c
t = Math.abs(t); // "half wave rectifier"
t = Math.abs(t); // "half wave rectifier"
return t + b;

@@ -769,0 +797,0 @@ }

2

package.json

@@ -5,3 +5,3 @@ {

"license": "MIT",
"version": "0.3.1",
"version": "0.4.0",
"description": "A simple thing for triggering 'them scroll effects that everybody loves",

@@ -8,0 +8,0 @@ "main": "./dist/scrollify.cjs.js",

21

README.md

@@ -19,6 +19,4 @@ # 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.
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 recommended that Scrollify'd elements are not initialized until the page has finished loading all images and the DOM is stable. For example, if you're trying to _Scrollify_ an element whose position on the page is dependent on assets loading above of it, you may wish to use ```window.addEventListener('load'...``` rather than the more common ```'DOMContentLoaded'```.
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 ```'DOMContentLoaded'```; or, check out the lovely [imagesloaded.js](https://github.com/desandro/imagesloaded) plugin.
## API

@@ -29,3 +27,3 @@ Coming soon. Please see the demo/index.html page for now.

First, spin up a webserver via ```npm i && npm start```. Navigate to ```localhost:8080/demo``` to check out the demos. Code samples are therein.
First, install dependencies and spin up a webserver via ```npm i && npm start```. Navigate to ```localhost:8080/demo``` to check out the demos. Code samples are therein.

@@ -35,4 +33,4 @@ ## Getting Started

Either:
* ```npm install @hugeinc/scrollify```
* Download it from [Github](https://github.com/apathetic/scrollify).
* npm: ```npm i @hugeinc/scrollify```
* github: download it from [Github](https://github.com/apathetic/scrollify).

@@ -44,7 +42,14 @@ ## Support

## Todo
* add weakmap support for public / private methods
## TODO
* sticky effect glitchy on resize
* relative units "+=", "-=", etc
* getComputedStyle to avoid defining default vals
* simplify API for effects / options definition
## Release History
### 0.3
* start and duration can accept various parameter types: float, 'px', '%'
* internalized applyTransform check
### 0.2

@@ -51,0 +56,0 @@ * quick scrolling bug fixing

6

rollup.shim.config.js
import buble from 'rollup-plugin-buble';
import uglify from 'rollup-plugin-uglify';

@@ -9,4 +10,7 @@ export default {

plugins: [
buble()
buble(),
// uglify({
// mangle: true
// })
]
};

2

src/easings.js

@@ -8,3 +8,3 @@ /*eslint max-len: ["error", 120]*/

t = Math.sin(t) * c; // now, oscillates between c, -c
t = Math.abs(t); // "half wave rectifier"
t = Math.abs(t); // "half wave rectifier"
return t + b;

@@ -11,0 +11,0 @@ }

31

src/effects.js

@@ -50,3 +50,3 @@ /**

export function rotate(progress) {
let radians = this.options.rad * progress;
const radians = this.options.rad * progress;

@@ -63,5 +63,5 @@ this.transforms.rotation[2] = radians;

export function scale(progress) {
let to = this.options.to || 1;
let from = this.options.from || this.transforms.scale[0];
let scale = (to - from) * progress + from;
const to = this.options.to || 1;
const from = this.options.from || this.transforms.scale[0];
const scale = (to - from) * progress + from;

@@ -79,5 +79,5 @@ this.transforms.scale[0] = scale;

export function fade(progress) {
let to = this.options.to !== undefined ? this.options.to : 1;
let from = this.options.from !== undefined ? this.options.from : 1;
let opacity = (to - from) * progress + from;
const to = this.options.to || 0;
const from = this.options.from || 1;
const opacity = (to - from) * progress + from;

@@ -96,6 +96,5 @@ this.element.style.opacity = opacity;

export function parallax(progress) {
let offset = 0;
let range = this.options.range || 0;
const range = this.options.range || 0;
const offset = progress * range;
offset = progress * range;
this.transforms.position[1] = offset; // just vertical for now

@@ -111,8 +110,8 @@ }

export function toggle(progress) {
let opts = this.options;
let element = this.element;
let times = Object.keys(opts);
const opts = this.options;
const element = this.element;
const times = Object.keys(opts);
times.forEach(function(time) {
let css = opts[time];
const css = opts[time];

@@ -137,4 +136,2 @@ if (progress > time) {

// progress = Math.min(1.0, Math.max(0.0, progress));
if (progress <= 0) {

@@ -168,4 +165,2 @@ setState(element, 'normal');

}
// boundsParams = ["top", "left", "bottom", "right", "margin", "marginLeft", "marginRight", "marginTop", "marginBottom"];
}

136

src/scrollify.js

@@ -5,3 +5,3 @@ /*

*
* Copyright (c) 2016 Wes Hatch
* Copyright (c) 2016, 2017 Wes Hatch
* Licensed under the MIT license.

@@ -11,9 +11,11 @@ *

/*eslint max-len: ["error", 120]*/
/*global document requestAnimationFrame console HTMLElement*/
import transform from './transform';
import createMatrix from './matrix';
import { getUnit } from './normalize';
// Effects that use matrix transformations. At present, only
// built-in effects benefit from matrix transformations.
const validTransforms = ['translateX', 'translateY', 'rotate', 'scale', 'parallax'];
/**

@@ -31,4 +33,4 @@ * The Scrollify Class

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 (!transform) { return new Error('Scrollify [error]: transforms not supported'); }
// if (!element) { return new Error('Scrollify [error]: could not find element'); }

@@ -44,4 +46,4 @@ this.element = element;

rotation: [0,0,0],
position: [0,0,0]
// transformOrigin: [],
position: [0,0,0],
// transformOrigin: [0,0,0]
// skew: [],

@@ -59,19 +61,18 @@ };

*
* 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.
* 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.
* 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.
* 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.
* easing: Ease in/out of any effects in the Scene.
*

@@ -81,27 +82,26 @@ * @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
const trigger = opts.trigger ? opts.trigger instanceof HTMLElement ? opts.trigger : document.querySelector(opts.trigger) : this.element;
const easing = opts.easing || false;
const effects = opts.effects || [];
let scene = {
trigger: trigger,
triggerPos: 1 - triggerPos,
duration: duration,
_trigger: trigger, // keep for internal calculations
_applyTransform: false, // internal-use only. Whether to use matrix transforms or not. Perhaps should be moved to *effect* level
_offset: opts.start || 0, // store original value for later calcs
_duration: opts.duration || 1, // store original value for later calculations
// start: 0, // absolute value in px. Some percentage of the viewport
// duration: duration, // absolute value in px. Some percentage of the viewport
easing: easing,
applyTransform: applyTransform,
effects: []
};
// scene.active = this.scroll > this.calculateStart(scene); // calculate any transformations if the scene has already passed.
effects.map((effect) => {
this.addEffect(effect.fn, effect.options, scene);
});
this.calculateStart(scene);
scene.state = (this.scroll > this.start) ? (this.scroll > this.start+duration) ? 'after' : 'active' : 'before';
this.calculateDuration(scene);
effects.map((effect) => {
this.addEffect(effect.name, effect.options, scene);
});
scene.state = (this.scroll > this.start) ? (this.scroll > this.start+scene.duration) ? 'after' : 'active' : 'before';
this.updateScene(scene);
this.calculate(scene);
this.scenes.push(scene);

@@ -119,2 +119,3 @@

this.calculateStart(scene);
this.calculateDuration(scene);
this.calculate(scene);

@@ -130,5 +131,5 @@ }

*/
addEffect(effect, options = {}, scene) {
let element = this.element;
let transforms = this.transforms;
addEffect(fn, options = {}, scene) {
const element = this.element;
const transforms = this.transforms;

@@ -142,3 +143,3 @@ if (!scene) {

return this.addScene({
'effects': [{'name': effect, 'options': options}]
'effects': [{'fn': fn, 'options': options}]
});

@@ -148,3 +149,6 @@ }

let curry = (fn, options) => {
// if any effect uses a matrix tranformation, we use true for the entire scene
scene._applyTransform = scene._applyTransform || !!~validTransforms.indexOf(fn.name);
const curry = (fn, options) => {
return function() { // NOTE: don't use => function here as we do NOT want to bind "this"

@@ -161,3 +165,3 @@ let context = {

scene.effects.push(curry(effect, options));
scene.effects.push(curry(fn, options));

@@ -169,8 +173,8 @@ return this;

* Calculate the start point of each scene.
* @param {[type]} scene A Scrollify Scene object.
* @param {Scrollify.Scene} 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;
const offset = window.innerHeight - this.mapTo(scene._offset, window.innerHeight);
let trigger = scene._trigger;
let top = 0;

@@ -182,9 +186,32 @@

} while(trigger);
// top = trigger.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
// var test = 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);
scene.start = Math.max(0, top - offset);
}
mapTo(input, scale) {
const parsed = parseFloat(input);
const unit = getUnit(input);
switch (unit) {
case 'px':
return parsed;
case '%':
return parsed / 100.0 * scale;
default:
return parsed * scale;
}
}
/**
* [calculateDuration description]
* @param {[type]} scene [description]
* @return [type] [description]
*/
calculateDuration(scene) {
// if (typeof scene._duration === 'function') { return scene._duration(); }
scene.duration = this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight);
}
/**
* onScroll Handler

@@ -228,7 +255,6 @@ * @return {void}

calculate(scene) {
let start = scene.start;
let duration = scene.duration;
let scroll = this.scroll;
const start = scene.start;
const duration = scene.duration;
const scroll = this.scroll;
let progress;
let matrix;

@@ -268,5 +294,5 @@ // after end

if (scene.applyTransform) {
if (scene._applyTransform) {
// transmogrify all applied transformations into a single matrix, and apply
matrix = this.updateMatrix();
let matrix = this.updateMatrix();
this.element.style[transform] = matrix.asCSS();

@@ -273,0 +299,0 @@ }

src/scrollPage.js
.eslintrc

Sorry, the diff of this file is not supported yet

demo/index.html

Sorry, the diff of this file is not supported yet

demo/styles.css

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