Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@apatheticwes/scrollify
Advanced tools
@apatheticwes/scrollify - npm Package Compare versions
Comparing version 0.5.1 to 1.0.0-alpha
@@ -1,1054 +0,8 @@ | ||
| 'use strict'; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| /** | ||
| * Feature detection: CSS transforms | ||
| * @type {Boolean} | ||
| */ | ||
| var transform = false; | ||
| if (typeof window !== 'undefined') { | ||
| var dummy = document.createElement('div'); | ||
| ['transform', 'webkitTransform', 'MozTransform', 'OTransform', 'msTransform'].forEach(function (t) { | ||
| if (dummy.style[t] !== undefined) { transform = t; } | ||
| }); | ||
| } | ||
| /** | ||
| * getUnit(), from anime.js | ||
| * @copyright ©2017 Julian Garnier | ||
| * Released under the MIT license | ||
| */ | ||
| 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]; | ||
| } | ||
| /* | ||
| The MIT License (MIT) | ||
| Copyright (c) 2015 Daniel Lundin | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| SOFTWARE. | ||
| */ | ||
| 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; | ||
| } | ||
| }; | ||
| } | ||
| /* | ||
| * scrollify | ||
| * https://github.com/apathetic/scrollify | ||
| /*! | ||
| * Scrollify 1.0.0-alpha | ||
| * | ||
| * Copyright (c) 2016, 2017 Wes Hatch | ||
| * Licensed under the MIT license. | ||
| * | ||
| * @link https://github.com/apathetic/scrollify | ||
| * @copyright (c) 2021 wes hatch | ||
| * @license MIT https://github.com/apathetic/scrollify/blob/master/LICENSE | ||
| */ | ||
| /** | ||
| * The Scrollify Class | ||
| */ | ||
| var Scrollify$1 = function Scrollify(element) { | ||
| var this$1 = this; | ||
| if (element instanceof HTMLElement == false) { element = document.querySelector(element); } | ||
| if (!element || !transform) { | ||
| console.log('Scrollify [error] ', arguments[0]); | ||
| return this.disable(); | ||
| } | ||
| 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: [0,0,0] | ||
| // skew: [], | ||
| }; | ||
| window.addEventListener('scroll', function () { return this$1.onScroll(); }, { passive: true }); | ||
| window.addEventListener('resize', function () { return this$1.onResize(); }, { passive: true }); | ||
| }; | ||
| /** | ||
| * 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 any effects in the Scene. | ||
| * | ||
| * @return {void} | ||
| */ | ||
| Scrollify$1.prototype.addScene = function addScene (opts) { | ||
| var this$1 = this; | ||
| 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 scene = { | ||
| _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, | ||
| effects: [] | ||
| }; | ||
| effects.map(function (effect) { | ||
| this$1.addEffect(effect.fn, effect.options, scene); | ||
| }); | ||
| this.calculateStart(scene); | ||
| this.calculateDuration(scene); | ||
| scene.state = (this.scroll > this.start) ? (this.scroll > this.start + scene.duration) ? 'after' : 'active' : 'before'; | ||
| this.calculate(scene); | ||
| this.scenes.push(scene); | ||
| if (opts.debug) { | ||
| console.log('Scrollify scene: ', scene); | ||
| } | ||
| return this; | ||
| }; | ||
| /** | ||
| * Update each scene. | ||
| * @param{Object} scene: The scene to update. | ||
| * @return {void} | ||
| */ | ||
| Scrollify$1.prototype.updateScene = function updateScene (scene) { | ||
| this.calculateStart(scene); | ||
| this.calculateDuration(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$1.prototype.addEffect = function addEffect (fn, options, scene) { | ||
| if ( options === void 0 ) options = {}; | ||
| var element = this.element; | ||
| var transforms = this.transforms; | ||
| var context = { options: options, element: element, transforms: 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': [{'fn': fn, 'options': options}] | ||
| }); | ||
| } | ||
| } | ||
| // if any effect uses a matrix tranformation, we use true for the entire scene | ||
| scene._applyTransform = scene._applyTransform || fn._applyTransform; | ||
| scene.effects.push(fn.bind(context)); | ||
| // scene.effects.push(() => { fn.call(context); }); | ||
| return this; | ||
| }; | ||
| /** | ||
| * Calculate the start point of each scene. | ||
| * @param{Scrollify.Scene} scene A Scrollify Scene object. | ||
| * @return {Integer} The start position of the Scene, in pixels. | ||
| */ | ||
| Scrollify$1.prototype.calculateStart = function calculateStart (scene) { | ||
| var offset = window.innerHeight - this.mapTo(scene._offset, window.innerHeight); | ||
| var trigger = scene._trigger; | ||
| var top = 0; | ||
| do { | ||
| top += trigger.offsetTop || 0; | ||
| trigger = trigger.offsetParent; | ||
| } while(trigger); | ||
| // var test = trigger.getBoundingClientRect().top + (window.scrollY || window.pageYOffset); | ||
| scene.start = Math.max(0, top - offset); | ||
| }; | ||
| /** | ||
| * [mapTo description] | ||
| * @param{[type]} input [description] | ||
| * @param{[type]} scale [description] | ||
| * @return {[type]} [description] | ||
| */ | ||
| Scrollify$1.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$1.prototype.calculateDuration = function calculateDuration (scene) { | ||
| scene.duration = (typeof scene._duration === 'function') ? | ||
| scene._duration(scene._trigger) : | ||
| this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight); | ||
| }; | ||
| /** | ||
| * onScroll Handler | ||
| * @return {void} | ||
| */ | ||
| Scrollify$1.prototype.onScroll = function onScroll () { | ||
| if (!this.active) { return; } | ||
| this.scroll = window.scrollY || window.pageYOffset; | ||
| this.direction = (this.scroll > this.previousScroll) ? 'down' : 'up'; | ||
| this.previousScroll = this.scroll; | ||
| if (!this.ticking) { | ||
| window.requestAnimationFrame(this.update.bind(this)); | ||
| // window.requestAnimationFrame(() => { this.update(); }); | ||
| this.ticking = true; | ||
| } | ||
| }; | ||
| /** | ||
| * onResize Handler | ||
| * @return {void} | ||
| */ | ||
| Scrollify$1.prototype.onResize = function onResize () { | ||
| this.scenes.forEach(this.updateScene, this); | ||
| }; | ||
| /** | ||
| * Update the transformations for every scene. | ||
| * @return {void} | ||
| */ | ||
| Scrollify$1.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$1.prototype.calculate = function calculate (scene) { | ||
| var start = scene.start; | ||
| var duration = scene.duration; | ||
| var scroll = this.scroll; | ||
| var progress; | ||
| // 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(progress); | ||
| }); | ||
| if (scene._applyTransform) { | ||
| // transmogrify all applied transformations into a single matrix, and apply | ||
| var 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$1.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]); | ||
| } | ||
| // ... 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$1.prototype.disable = function disable () { | ||
| this.active = false; | ||
| }; | ||
| /** | ||
| * A list of some default "transformations" that may be applied | ||
| * Options are applied at initialize and are curried in via "this". | ||
| * | ||
| * NOTE: for all functions herein, "this" contains effect options, a | ||
| * transformation Object, and also a reference to the element. | ||
| */ | ||
| /*global console*/ | ||
| /*eslint no-invalid-this: "error"*/ | ||
| // Effects that use matrix transformations. At present, only | ||
| // built-in effects benefit from matrix transformations. | ||
| [translateX, translateY, rotate, scale, parallax].forEach(function (fn) { | ||
| fn._applyTransform = true; | ||
| }); | ||
| /** | ||
| * 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 !== undefined) ? this.options.to : 0; | ||
| var from = (this.options.from !== undefined) ? 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 !== undefined) ? this.options.to : 0; | ||
| var from = (this.options.from !== undefined) ? this.options.from : 0;// this.transforms.position[1]; | ||
| var offset = (to - from) * progress + from; | ||
| this.transforms.position[1] = offset; | ||
| } | ||
| // export function translate(progress) { | ||
| // const to = this.options.to; | ||
| // const from = this.options.from; | ||
| // const offsetX = (to[0] - from[0]) * progress + from[0]; | ||
| // const offsetY = (to[1] - from[1]) * progress + from[1]; | ||
| // | ||
| // this.transforms.position[0] = offsetX; | ||
| // this.transforms.position[1] = offsetY; | ||
| // } | ||
| /** | ||
| * 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 !== undefined) ? this.options.to : 1; | ||
| var from = (this.options.from !== undefined) ? 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 : 0; | ||
| var from = (this.options.from !== undefined) ? this.options.from : 1; | ||
| var opacity = (to - from) * progress + from; | ||
| this.element.style.opacity = opacity; | ||
| } | ||
| /** | ||
| * Update an element's blur. | ||
| * @param {Float} progress Current progress of the scene, between 0 and 1. | ||
| * @this {Object} | ||
| * @return {void} | ||
| */ | ||
| function blur(progress) { | ||
| var to = (this.options.to !== undefined) ? this.options.to : 0; | ||
| var from = (this.options.from !== undefined) ? this.options.from : 0; | ||
| var amount = (to - from) * progress + from; | ||
| this.element.style.filter = 'blur(' + amount + 'px)'; | ||
| } | ||
| /** | ||
| * Parallax an element. | ||
| * @param {Float} progress Current progress data of the scene, between 0 and 1. | ||
| * @this {Object} | ||
| * @return {void} | ||
| */ | ||
| function parallax(progress) { | ||
| var range = this.options.range || 0; | ||
| var offset = progress * range; // TODO add provision for speed as well | ||
| 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 = element._currentState || null; // store prop on element | ||
| if (progress <= 0) { | ||
| setState(element, 'normal'); | ||
| } else if (progress >= 1) { | ||
| setState(element, 'bottom'); | ||
| } else { | ||
| setState(element, 'sticky'); | ||
| } | ||
| function setState(element, state) { | ||
| if (currentState === state) { return; } | ||
| if (state == 'sticky') { | ||
| var BCR = element.getBoundingClientRect(); | ||
| 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.classList.remove(currentState); | ||
| element.classList.add(state); | ||
| element._currentState = state; | ||
| } | ||
| } | ||
| var effects = Object.freeze({ | ||
| translateX: translateX, | ||
| translateY: translateY, | ||
| rotate: rotate, | ||
| scale: scale, | ||
| fade: fade, | ||
| blur: blur, | ||
| 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 | ||
| }); | ||
| /** | ||
| * Put Scrollify into the Global scope. | ||
| * Useful for existing demos or if you wish to include manually | ||
| */ | ||
| exports['default'] = Scrollify$1; | ||
| exports.Scrollify = Scrollify$1; | ||
| exports.fx = effects; | ||
| exports.easings = easings; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=function(t){return"function"==typeof t},n=function(t){return t instanceof HTMLElement?t:document.querySelector(t)},e=function(t){var n=t.getBoundingClientRect();return{left:n.left+window.pageXOffset,right:n.right+window.pageXOffset,top:n.top+window.pageYOffset,bottom:n.bottom+window.pageYOffset,height:n.height,width:n.width}},r=function(t,n,e){return(n-t)*e+t},o=function(t){var n=t.transforms,e=t.options;return function(t){n.position[1]=r.apply(void 0,e.concat([t]))}},a=o,i=function(t){var n=t.transforms,e=t.options;return function(t){n.rotation[2]=r.apply(void 0,e.concat([t]))}},s=i,u=function(t){var n=t.element,e=t.options;return function(t){n.style.opacity=r.apply(void 0,e.concat([t]))}},c=function(t){var n=t.element,e=t.options;return function(t){n.style.filter="blur("+r.apply(void 0,e.concat([t]))+"px)"}},f=function(t){var n=t.element,e=t.options,r=Object.keys(e);return function(t){r.forEach((function(r){var o=e[r];n.classList.toggle(o,t>+r)}))}},l=function(t){var n=t.element;function e(t){var e=n.__currentState;if(e!==t){if("sticky"==t){var r=n.getBoundingClientRect();n.style.top=r.top+"px",n.style.left=r.left+"px",n.style.width=r.width+"px"}else n.style.top="",n.style.left="",n.style.width="";n.classList.remove(e),n.classList.add(t),n.__currentState=t}}return function(t){e(t<=0?"normal":t>=1?"bottom":"sticky")}};[l,f,c,u].forEach((function(t){Object.defineProperty(t,"skipMatrix",{value:!0})}));var p=Object.freeze({__proto__:null,translateX:function(t){var n=t.transforms,e=t.options;return function(t){n.position[0]=r.apply(void 0,e.concat([t]))}},translateY:o,parallax:a,rotateX:function(t){var n=t.transforms,e=t.options;return function(t){n.rotation[0]=r.apply(void 0,e.concat([t]))}},rotateY:function(t){var n=t.transforms,e=t.options;return function(t){n.rotation[1]=r.apply(void 0,e.concat([t]))}},rotateZ:i,rotate:s,scaleX:function(t){var n=t.transforms,e=t.options;return function(t){n.scale[0]=r.apply(void 0,e.concat([t]))}},scaleY:function(t){var n=t.transforms,e=t.options;return void 0===e&&(e=[n.scale[1],1]),function(t){n.scale[1]=r.apply(void 0,e.concat([t]))}},scale:function(t){var n=t.transforms,e=t.options;return function(t){n.scale[0]=n.scale[1]=r.apply(void 0,e.concat([t]))}},skewX:function(t){var n=t.transforms,e=t.options;return function(t){n.skew[0]=r.apply(void 0,e.concat([t]))}},skewY:function(t){var n=t.transforms,e=t.options;return function(t){n.skew[1]=r.apply(void 0,e.concat([t]))}},skew:function(t){var n=t.transforms,e=t.options;return function(t){n.skew[0]=n.skew[1]=r.apply(void 0,e.concat([t]))}},fade:u,blur:c,toggle:f,stick:l});var h=Object.freeze({__proto__:null,oscillate:function(t,n,e,r){return t/=r,t=4*Math.PI*t,t=Math.sin(t)*e,(t=Math.abs(t))+n},easeInQuad:function(t,n,e,r){return e*(t/=r)*t+n},easeOutQuad:function(t,n,e,r){return-e*(t/=r)*(t-2)+n},easeInOutQuad:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t+n:-e/2*(--t*(t-2)-1)+n},easeInCubic:function(t,n,e,r){return e*(t/=r)*t*t+n},easeOutCubic:function(t,n,e,r){return e*((t=t/r-1)*t*t+1)+n},easeInOutCubic:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t+n:e/2*((t-=2)*t*t+2)+n},easeInQuart:function(t,n,e,r){return e*(t/=r)*t*t*t+n},easeOutQuart:function(t,n,e,r){return-e*((t=t/r-1)*t*t*t-1)+n},easeInOutQuart:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t*t+n:-e/2*((t-=2)*t*t*t-2)+n},easeInQuint:function(t,n,e,r){return e*(t/=r)*t*t*t*t+n},easeOutQuint:function(t,n,e,r){return e*((t=t/r-1)*t*t*t*t+1)+n},easeInOutQuint:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t*t*t+n:e/2*((t-=2)*t*t*t*t+2)+n},easeInSine:function(t,n,e,r){return-e*Math.cos(t/r*(Math.PI/2))+e+n},easeOutSine:function(t,n,e,r){return e*Math.sin(t/r*(Math.PI/2))+n},easeInOutSine:function(t,n,e,r){return-e/2*(Math.cos(Math.PI*t/r)-1)+n},easeInExpo:function(t,n,e,r){return 0==t?n:e*Math.pow(2,10*(t/r-1))+n},easeOutExpo:function(t,n,e,r){return t==r?n+e:e*(1-Math.pow(2,-10*t/r))+n},easeInOutExpo:function(t,n,e,r){return 0==t?n:t==r?n+e:(t/=r/2)<1?e/2*Math.pow(2,10*(t-1))+n:e/2*(2-Math.pow(2,-10*--t))+n},easeInCirc:function(t,n,e,r){return-e*(Math.sqrt(1-(t/=r)*t)-1)+n},easeOutCirc:function(t,n,e,r){return e*Math.sqrt(1-(t=t/r-1)*t)+n},easeInOutCirc:function(t,n,e,r){return(t/=r/2)<1?-e/2*(Math.sqrt(1-t*t)-1)+n:e/2*(Math.sqrt(1-(t-=2)*t)+1)+n},easeInElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(1==(t/=r))return n+e;if(a||(a=.3*r),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return-i*Math.pow(2,10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)+n},easeOutElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(1==(t/=r))return n+e;if(a||(a=.3*r),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return i*Math.pow(2,-10*t)*Math.sin((t*r-o)*(2*Math.PI)/a)+e+n},easeInOutElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(2==(t/=r/2))return n+e;if(a||(a=r*(.3*1.5)),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return t<1?i*Math.pow(2,10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)*-.5+n:i*Math.pow(2,-10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)*.5+e+n},easeInBack:function(t,n,e,r,o){return null==o&&(o=1.70158),e*(t/=r)*t*((o+1)*t-o)+n},easeOutBack:function(t,n,e,r,o){return null==o&&(o=1.70158),e*((t=t/r-1)*t*((o+1)*t+o)+1)+n},easeInOutBack:function(t,n,e,r,o){return null==o&&(o=1.70158),(t/=r/2)<1?e/2*(t*t*((1+(o*=1.525))*t-o))+n:e/2*((t-=2)*t*((1+(o*=1.525))*t+o)+2)+n},easeOutBounce:function(t,n,e,r){return(t/=r<1/2.75)?e*(7.5625*t*t)+n:t<2/2.75?e*(7.5625*(t-=1.5/2.75)*t+.75)+n:t<2.5/2.75?e*(7.5625*(t-=2.25/2.75)*t+.9375)+n:e*(7.5625*(t-=2.625/2.75)*t+.984375)+n}});function d(t,n,e){return e[0]=t[0]*n[0]+t[1]*n[4]+t[2]*n[8]+t[3]*n[12],e[1]=t[0]*n[1]+t[1]*n[5]+t[2]*n[9]+t[3]*n[13],e[2]=t[0]*n[2]+t[1]*n[6]+t[2]*n[10]+t[3]*n[14],e[3]=t[0]*n[3]+t[1]*n[7]+t[2]*n[11]+t[3]*n[15],e[4]=t[4]*n[0]+t[5]*n[4]+t[6]*n[8]+t[7]*n[12],e[5]=t[4]*n[1]+t[5]*n[5]+t[6]*n[9]+t[7]*n[13],e[6]=t[4]*n[2]+t[5]*n[6]+t[6]*n[10]+t[7]*n[14],e[7]=t[4]*n[3]+t[5]*n[7]+t[6]*n[11]+t[7]*n[15],e[8]=t[8]*n[0]+t[9]*n[4]+t[10]*n[8]+t[11]*n[12],e[9]=t[8]*n[1]+t[9]*n[5]+t[10]*n[9]+t[11]*n[13],e[10]=t[8]*n[2]+t[9]*n[6]+t[10]*n[10]+t[11]*n[14],e[11]=t[8]*n[3]+t[9]*n[7]+t[10]*n[11]+t[11]*n[15],e[12]=t[12]*n[0]+t[13]*n[4]+t[14]*n[8]+t[15]*n[12],e[13]=t[12]*n[1]+t[13]*n[5]+t[14]*n[9]+t[15]*n[13],e[14]=t[12]*n[2]+t[13]*n[6]+t[14]*n[10]+t[15]*n[14],e[15]=t[12]*n[3]+t[13]*n[7]+t[14]*n[11]+t[15]*n[15],e}function v(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 M(t,n){n[0]=t[0],n[1]=t[1],n[2]=t[2],n[3]=t[3],n[4]=t[4],n[5]=t[5],n[6]=t[6],n[7]=t[7],n[8]=t[8],n[9]=t[9],n[10]=t[10],n[11]=t[11],n[12]=t[12],n[13]=t[13],n[14]=t[14],n[15]=t[15]}function w(){var t=new Float32Array(16),n=new Float32Array(16),e=new Float32Array(16);return v(t),{data:t,asCSS:function(){for(var n="matrix3d(",e=0;e<15;++e)Math.abs(t[e])<1e-4?n+="0,":n+=t[e].toFixed(10)+",";return Math.abs(t[15])<1e-4?n+="0)":n+=t[15].toFixed(10)+")",n},clear:function(){v(t)},translate:function(r,o,a){return M(t,n),function(t,n,e,r){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]=n,t[13]=e,t[14]=r,t[15]=1}(e,r,o,a),d(n,e,t),this},rotateX:function(r){var o,a;return M(t,n),a=r,(o=e)[0]=1,o[1]=0,o[2]=0,o[3]=0,o[4]=0,o[5]=Math.cos(a),o[6]=-Math.sin(a),o[7]=0,o[8]=0,o[9]=Math.sin(a),o[10]=Math.cos(a),o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,d(n,e,t),this},rotateY:function(r){var o,a;return M(t,n),a=r,(o=e)[0]=Math.cos(a),o[1]=0,o[2]=Math.sin(a),o[3]=0,o[4]=0,o[5]=1,o[6]=0,o[7]=0,o[8]=-Math.sin(a),o[9]=0,o[10]=Math.cos(a),o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,d(n,e,t),this},rotateZ:function(r){var o,a;return M(t,n),a=r,(o=e)[0]=Math.cos(a),o[1]=-Math.sin(a),o[2]=0,o[3]=0,o[4]=Math.sin(a),o[5]=Math.cos(a),o[6]=0,o[7]=0,o[8]=0,o[9]=0,o[10]=1,o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,d(n,e,t),this},scale:function(r,o){return M(t,n),function(t,n,e){t[0]=n,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=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}(e,r,o),d(n,e,t),this},skew:function(r,o){return M(t,n),function(t,n,e){t[0]=1,t[1]=Math.tan(n),t[2]=0,t[3]=0,t[4]=Math.tan(e),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}(e,r,o),d(n,e,t),this}}}function m(t,n,e){if(void 0===n&&(n=[]),"number"==typeof t)return t;document.body.scrollHeight,document.body.scrollWidth;var r=window.innerWidth,o=window.innerHeight;return new Function("refs","el","'use strict';return ("+t.replace(/(\d*)vw/g,(function(t,n){return.01*n*r})).replace(/(\d*)vh/g,(function(t,n){return.01*n*o})).replace(/px/g,"")+");")(n,e)}var y=function t(e){var r=this;(e=n(e))?(e.dataset.scrollify,this.scenes=[],this.element=e,this.ticking=!1,this.active=!0,this.matrix=w(),this.transforms={scale:[1,1],rotation:[0,0,0],position:[0,0,0]},e.style.willChange="transform",window.addEventListener("scroll",(function(){return r.onScroll()}),{passive:!0}),window.addEventListener("resize",(function(){return r.onResize()}),{passive:!0})):document.querySelectorAll("[data-scrollify]").forEach((function(n){return new t(n)}))};y.prototype.parseDataAttribute=function(t){var n;return n=t.dataset.scrollify,Function("'use strict';return ("+n+")")()},y.prototype.addScene=function(r){var o=this,a=this.element,i=this.transforms,s=r.start;void 0===s&&(s="el.top - 100vh");var u=r.end;void 0===u&&(u="el.bottom");var c=r.easing,f=r.refs;void 0===f&&(f=[]);var l=r.effects;void 0===l&&(l={});var d=function(n,e){return Object.keys(l).reduce((function(r,o){var s,u,c,f=l[o];return t(f)?s=f:(s=p[o],c=f,u=Array.isArray(c)?f.map((function(t){return m(t,n,e)})):f),r.push(s({element:a,transforms:i,options:u})),r}),[])},v={start:0,duration:0,state:"",easing:t(c)?c:h[c],effects:[],reset:function(){var t=window.scrollY,r=e(a),i=function(t){return t.map(n).map(e)}(f),c=m(s,i,r),l=m(u,i,r),p=d(i,r);v.effects=p,v.start=c,v.duration=l-c,v.state=t>c?t>l?"after":"active":"before",o.update(v)}};return r.skipMatrix&&(v.skipMatrix=!0),v.reset(),r.debug&&console.log("Scrollify scene: ",v),this.scenes.push(v),this},y.prototype.onScroll=function(){var t=this;this.active&&window.requestAnimationFrame((function(){t.scenes.forEach((function(n){return t.update(n)}),t)}))},y.prototype.onResize=function(){this.scenes.forEach((function(t){return t.reset()}))},y.prototype.update=function(t){var n,e=t.start,r=t.duration,o=t.easing,a=t.effects,i=window.scrollY;if(i-e>r){if("after"===t.state)return;t.state="after",n=1}else if(i-e<0){if("before"===t.state)return;t.state="before",n=0}else t.state="active",n=o?o(i-e,0,1,r):(i-e)/r;a.forEach((function(t){return t(n)})),t.skipMatrix||(this.element.style.transform=this.updateMatrix().asCSS())},y.prototype.updateMatrix=function(){var t=this.matrix,n=this.transforms;return t.clear(),n.transformOrigin&&t.translate(-n.transformOrigin[0],-n.transformOrigin[1],-n.transformOrigin[2]),n.scale&&t.scale(n.scale[0],n.scale[1]),n.skew&&t.skew(n.skew[0],n.skew[1]),n.rotation&&(t.rotateX(n.rotation[0]),t.rotateY(n.rotation[1]),t.rotateZ(n.rotation[2])),n.position&&t.translate(n.position[0],n.position[1],n.position[2]),n.transformOrigin&&t.translate(n.transformOrigin[0],n.transformOrigin[1],n.transformOrigin[2]),t},y.prototype.disable=function(){this.active=!1},exports.Scrollify=y,exports.default=y,exports.easings=h,exports.fx=p; |
@@ -1,1047 +0,8 @@ | ||
| /** | ||
| * Feature detection: CSS transforms | ||
| * @type {Boolean} | ||
| */ | ||
| var transform = false; | ||
| if (typeof window !== 'undefined') { | ||
| var dummy = document.createElement('div'); | ||
| ['transform', 'webkitTransform', 'MozTransform', 'OTransform', 'msTransform'].forEach(function (t) { | ||
| if (dummy.style[t] !== undefined) { transform = t; } | ||
| }); | ||
| } | ||
| /** | ||
| * getUnit(), from anime.js | ||
| * @copyright ©2017 Julian Garnier | ||
| * Released under the MIT license | ||
| */ | ||
| 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]; | ||
| } | ||
| /* | ||
| The MIT License (MIT) | ||
| Copyright (c) 2015 Daniel Lundin | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| SOFTWARE. | ||
| */ | ||
| 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; | ||
| } | ||
| }; | ||
| } | ||
| /* | ||
| * scrollify | ||
| * https://github.com/apathetic/scrollify | ||
| /*! | ||
| * Scrollify 1.0.0-alpha | ||
| * | ||
| * Copyright (c) 2016, 2017 Wes Hatch | ||
| * Licensed under the MIT license. | ||
| * | ||
| * @link https://github.com/apathetic/scrollify | ||
| * @copyright (c) 2021 wes hatch | ||
| * @license MIT https://github.com/apathetic/scrollify/blob/master/LICENSE | ||
| */ | ||
| /** | ||
| * The Scrollify Class | ||
| */ | ||
| var Scrollify$1 = function Scrollify(element) { | ||
| var this$1 = this; | ||
| if (element instanceof HTMLElement == false) { element = document.querySelector(element); } | ||
| if (!element || !transform) { | ||
| console.log('Scrollify [error] ', arguments[0]); | ||
| return this.disable(); | ||
| } | ||
| 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: [0,0,0] | ||
| // skew: [], | ||
| }; | ||
| window.addEventListener('scroll', function () { return this$1.onScroll(); }, { passive: true }); | ||
| window.addEventListener('resize', function () { return this$1.onResize(); }, { passive: true }); | ||
| }; | ||
| /** | ||
| * 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 any effects in the Scene. | ||
| * | ||
| * @return {void} | ||
| */ | ||
| Scrollify$1.prototype.addScene = function addScene (opts) { | ||
| var this$1 = this; | ||
| 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 scene = { | ||
| _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, | ||
| effects: [] | ||
| }; | ||
| effects.map(function (effect) { | ||
| this$1.addEffect(effect.fn, effect.options, scene); | ||
| }); | ||
| this.calculateStart(scene); | ||
| this.calculateDuration(scene); | ||
| scene.state = (this.scroll > this.start) ? (this.scroll > this.start + scene.duration) ? 'after' : 'active' : 'before'; | ||
| this.calculate(scene); | ||
| this.scenes.push(scene); | ||
| if (opts.debug) { | ||
| console.log('Scrollify scene: ', scene); | ||
| } | ||
| return this; | ||
| }; | ||
| /** | ||
| * Update each scene. | ||
| * @param{Object} scene: The scene to update. | ||
| * @return {void} | ||
| */ | ||
| Scrollify$1.prototype.updateScene = function updateScene (scene) { | ||
| this.calculateStart(scene); | ||
| this.calculateDuration(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$1.prototype.addEffect = function addEffect (fn, options, scene) { | ||
| if ( options === void 0 ) options = {}; | ||
| var element = this.element; | ||
| var transforms = this.transforms; | ||
| var context = { options: options, element: element, transforms: 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': [{'fn': fn, 'options': options}] | ||
| }); | ||
| } | ||
| } | ||
| // if any effect uses a matrix tranformation, we use true for the entire scene | ||
| scene._applyTransform = scene._applyTransform || fn._applyTransform; | ||
| scene.effects.push(fn.bind(context)); | ||
| // scene.effects.push(() => { fn.call(context); }); | ||
| return this; | ||
| }; | ||
| /** | ||
| * Calculate the start point of each scene. | ||
| * @param{Scrollify.Scene} scene A Scrollify Scene object. | ||
| * @return {Integer} The start position of the Scene, in pixels. | ||
| */ | ||
| Scrollify$1.prototype.calculateStart = function calculateStart (scene) { | ||
| var offset = window.innerHeight - this.mapTo(scene._offset, window.innerHeight); | ||
| var trigger = scene._trigger; | ||
| var top = 0; | ||
| do { | ||
| top += trigger.offsetTop || 0; | ||
| trigger = trigger.offsetParent; | ||
| } while(trigger); | ||
| // var test = trigger.getBoundingClientRect().top + (window.scrollY || window.pageYOffset); | ||
| scene.start = Math.max(0, top - offset); | ||
| }; | ||
| /** | ||
| * [mapTo description] | ||
| * @param{[type]} input [description] | ||
| * @param{[type]} scale [description] | ||
| * @return {[type]} [description] | ||
| */ | ||
| Scrollify$1.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$1.prototype.calculateDuration = function calculateDuration (scene) { | ||
| scene.duration = (typeof scene._duration === 'function') ? | ||
| scene._duration(scene._trigger) : | ||
| this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight); | ||
| }; | ||
| /** | ||
| * onScroll Handler | ||
| * @return {void} | ||
| */ | ||
| Scrollify$1.prototype.onScroll = function onScroll () { | ||
| if (!this.active) { return; } | ||
| this.scroll = window.scrollY || window.pageYOffset; | ||
| this.direction = (this.scroll > this.previousScroll) ? 'down' : 'up'; | ||
| this.previousScroll = this.scroll; | ||
| if (!this.ticking) { | ||
| window.requestAnimationFrame(this.update.bind(this)); | ||
| // window.requestAnimationFrame(() => { this.update(); }); | ||
| this.ticking = true; | ||
| } | ||
| }; | ||
| /** | ||
| * onResize Handler | ||
| * @return {void} | ||
| */ | ||
| Scrollify$1.prototype.onResize = function onResize () { | ||
| this.scenes.forEach(this.updateScene, this); | ||
| }; | ||
| /** | ||
| * Update the transformations for every scene. | ||
| * @return {void} | ||
| */ | ||
| Scrollify$1.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$1.prototype.calculate = function calculate (scene) { | ||
| var start = scene.start; | ||
| var duration = scene.duration; | ||
| var scroll = this.scroll; | ||
| var progress; | ||
| // 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(progress); | ||
| }); | ||
| if (scene._applyTransform) { | ||
| // transmogrify all applied transformations into a single matrix, and apply | ||
| var 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$1.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]); | ||
| } | ||
| // ... 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$1.prototype.disable = function disable () { | ||
| this.active = false; | ||
| }; | ||
| /** | ||
| * A list of some default "transformations" that may be applied | ||
| * Options are applied at initialize and are curried in via "this". | ||
| * | ||
| * NOTE: for all functions herein, "this" contains effect options, a | ||
| * transformation Object, and also a reference to the element. | ||
| */ | ||
| /*global console*/ | ||
| /*eslint no-invalid-this: "error"*/ | ||
| // Effects that use matrix transformations. At present, only | ||
| // built-in effects benefit from matrix transformations. | ||
| [translateX, translateY, rotate, scale, parallax].forEach(function (fn) { | ||
| fn._applyTransform = true; | ||
| }); | ||
| /** | ||
| * 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 !== undefined) ? this.options.to : 0; | ||
| var from = (this.options.from !== undefined) ? 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 !== undefined) ? this.options.to : 0; | ||
| var from = (this.options.from !== undefined) ? this.options.from : 0;// this.transforms.position[1]; | ||
| var offset = (to - from) * progress + from; | ||
| this.transforms.position[1] = offset; | ||
| } | ||
| // export function translate(progress) { | ||
| // const to = this.options.to; | ||
| // const from = this.options.from; | ||
| // const offsetX = (to[0] - from[0]) * progress + from[0]; | ||
| // const offsetY = (to[1] - from[1]) * progress + from[1]; | ||
| // | ||
| // this.transforms.position[0] = offsetX; | ||
| // this.transforms.position[1] = offsetY; | ||
| // } | ||
| /** | ||
| * 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 !== undefined) ? this.options.to : 1; | ||
| var from = (this.options.from !== undefined) ? 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 : 0; | ||
| var from = (this.options.from !== undefined) ? this.options.from : 1; | ||
| var opacity = (to - from) * progress + from; | ||
| this.element.style.opacity = opacity; | ||
| } | ||
| /** | ||
| * Update an element's blur. | ||
| * @param {Float} progress Current progress of the scene, between 0 and 1. | ||
| * @this {Object} | ||
| * @return {void} | ||
| */ | ||
| function blur(progress) { | ||
| var to = (this.options.to !== undefined) ? this.options.to : 0; | ||
| var from = (this.options.from !== undefined) ? this.options.from : 0; | ||
| var amount = (to - from) * progress + from; | ||
| this.element.style.filter = 'blur(' + amount + 'px)'; | ||
| } | ||
| /** | ||
| * Parallax an element. | ||
| * @param {Float} progress Current progress data of the scene, between 0 and 1. | ||
| * @this {Object} | ||
| * @return {void} | ||
| */ | ||
| function parallax(progress) { | ||
| var range = this.options.range || 0; | ||
| var offset = progress * range; // TODO add provision for speed as well | ||
| 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 = element._currentState || null; // store prop on element | ||
| if (progress <= 0) { | ||
| setState(element, 'normal'); | ||
| } else if (progress >= 1) { | ||
| setState(element, 'bottom'); | ||
| } else { | ||
| setState(element, 'sticky'); | ||
| } | ||
| function setState(element, state) { | ||
| if (currentState === state) { return; } | ||
| if (state == 'sticky') { | ||
| var BCR = element.getBoundingClientRect(); | ||
| 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.classList.remove(currentState); | ||
| element.classList.add(state); | ||
| element._currentState = state; | ||
| } | ||
| } | ||
| var effects = Object.freeze({ | ||
| translateX: translateX, | ||
| translateY: translateY, | ||
| rotate: rotate, | ||
| scale: scale, | ||
| fade: fade, | ||
| blur: blur, | ||
| 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 | ||
| }); | ||
| /** | ||
| * Put Scrollify into the Global scope. | ||
| * Useful for existing demos or if you wish to include manually | ||
| */ | ||
| export { Scrollify$1 as Scrollify, effects as fx, easings };export default Scrollify$1; | ||
| var t=function(t){return"function"==typeof t},n=function(t){return t instanceof HTMLElement?t:document.querySelector(t)},e=function(t){var n=t.getBoundingClientRect();return{left:n.left+window.pageXOffset,right:n.right+window.pageXOffset,top:n.top+window.pageYOffset,bottom:n.bottom+window.pageYOffset,height:n.height,width:n.width}},r=function(t,n,e){return(n-t)*e+t},o=function(t){var n=t.transforms,e=t.options;return function(t){n.position[1]=r.apply(void 0,e.concat([t]))}},a=o,i=function(t){var n=t.transforms,e=t.options;return function(t){n.rotation[2]=r.apply(void 0,e.concat([t]))}},s=i,u=function(t){var n=t.element,e=t.options;return function(t){n.style.opacity=r.apply(void 0,e.concat([t]))}},c=function(t){var n=t.element,e=t.options;return function(t){n.style.filter="blur("+r.apply(void 0,e.concat([t]))+"px)"}},f=function(t){var n=t.element,e=t.options,r=Object.keys(e);return function(t){r.forEach((function(r){var o=e[r];n.classList.toggle(o,t>+r)}))}},l=function(t){var n=t.element;function e(t){var e=n.__currentState;if(e!==t){if("sticky"==t){var r=n.getBoundingClientRect();n.style.top=r.top+"px",n.style.left=r.left+"px",n.style.width=r.width+"px"}else n.style.top="",n.style.left="",n.style.width="";n.classList.remove(e),n.classList.add(t),n.__currentState=t}}return function(t){e(t<=0?"normal":t>=1?"bottom":"sticky")}};[l,f,c,u].forEach((function(t){Object.defineProperty(t,"skipMatrix",{value:!0})}));var p=Object.freeze({__proto__:null,translateX:function(t){var n=t.transforms,e=t.options;return function(t){n.position[0]=r.apply(void 0,e.concat([t]))}},translateY:o,parallax:a,rotateX:function(t){var n=t.transforms,e=t.options;return function(t){n.rotation[0]=r.apply(void 0,e.concat([t]))}},rotateY:function(t){var n=t.transforms,e=t.options;return function(t){n.rotation[1]=r.apply(void 0,e.concat([t]))}},rotateZ:i,rotate:s,scaleX:function(t){var n=t.transforms,e=t.options;return function(t){n.scale[0]=r.apply(void 0,e.concat([t]))}},scaleY:function(t){var n=t.transforms,e=t.options;return void 0===e&&(e=[n.scale[1],1]),function(t){n.scale[1]=r.apply(void 0,e.concat([t]))}},scale:function(t){var n=t.transforms,e=t.options;return function(t){n.scale[0]=n.scale[1]=r.apply(void 0,e.concat([t]))}},skewX:function(t){var n=t.transforms,e=t.options;return function(t){n.skew[0]=r.apply(void 0,e.concat([t]))}},skewY:function(t){var n=t.transforms,e=t.options;return function(t){n.skew[1]=r.apply(void 0,e.concat([t]))}},skew:function(t){var n=t.transforms,e=t.options;return function(t){n.skew[0]=n.skew[1]=r.apply(void 0,e.concat([t]))}},fade:u,blur:c,toggle:f,stick:l});var h=Object.freeze({__proto__:null,oscillate:function(t,n,e,r){return t/=r,t=4*Math.PI*t,t=Math.sin(t)*e,(t=Math.abs(t))+n},easeInQuad:function(t,n,e,r){return e*(t/=r)*t+n},easeOutQuad:function(t,n,e,r){return-e*(t/=r)*(t-2)+n},easeInOutQuad:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t+n:-e/2*(--t*(t-2)-1)+n},easeInCubic:function(t,n,e,r){return e*(t/=r)*t*t+n},easeOutCubic:function(t,n,e,r){return e*((t=t/r-1)*t*t+1)+n},easeInOutCubic:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t+n:e/2*((t-=2)*t*t+2)+n},easeInQuart:function(t,n,e,r){return e*(t/=r)*t*t*t+n},easeOutQuart:function(t,n,e,r){return-e*((t=t/r-1)*t*t*t-1)+n},easeInOutQuart:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t*t+n:-e/2*((t-=2)*t*t*t-2)+n},easeInQuint:function(t,n,e,r){return e*(t/=r)*t*t*t*t+n},easeOutQuint:function(t,n,e,r){return e*((t=t/r-1)*t*t*t*t+1)+n},easeInOutQuint:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t*t*t+n:e/2*((t-=2)*t*t*t*t+2)+n},easeInSine:function(t,n,e,r){return-e*Math.cos(t/r*(Math.PI/2))+e+n},easeOutSine:function(t,n,e,r){return e*Math.sin(t/r*(Math.PI/2))+n},easeInOutSine:function(t,n,e,r){return-e/2*(Math.cos(Math.PI*t/r)-1)+n},easeInExpo:function(t,n,e,r){return 0==t?n:e*Math.pow(2,10*(t/r-1))+n},easeOutExpo:function(t,n,e,r){return t==r?n+e:e*(1-Math.pow(2,-10*t/r))+n},easeInOutExpo:function(t,n,e,r){return 0==t?n:t==r?n+e:(t/=r/2)<1?e/2*Math.pow(2,10*(t-1))+n:e/2*(2-Math.pow(2,-10*--t))+n},easeInCirc:function(t,n,e,r){return-e*(Math.sqrt(1-(t/=r)*t)-1)+n},easeOutCirc:function(t,n,e,r){return e*Math.sqrt(1-(t=t/r-1)*t)+n},easeInOutCirc:function(t,n,e,r){return(t/=r/2)<1?-e/2*(Math.sqrt(1-t*t)-1)+n:e/2*(Math.sqrt(1-(t-=2)*t)+1)+n},easeInElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(1==(t/=r))return n+e;if(a||(a=.3*r),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return-i*Math.pow(2,10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)+n},easeOutElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(1==(t/=r))return n+e;if(a||(a=.3*r),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return i*Math.pow(2,-10*t)*Math.sin((t*r-o)*(2*Math.PI)/a)+e+n},easeInOutElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(2==(t/=r/2))return n+e;if(a||(a=r*(.3*1.5)),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return t<1?i*Math.pow(2,10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)*-.5+n:i*Math.pow(2,-10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)*.5+e+n},easeInBack:function(t,n,e,r,o){return null==o&&(o=1.70158),e*(t/=r)*t*((o+1)*t-o)+n},easeOutBack:function(t,n,e,r,o){return null==o&&(o=1.70158),e*((t=t/r-1)*t*((o+1)*t+o)+1)+n},easeInOutBack:function(t,n,e,r,o){return null==o&&(o=1.70158),(t/=r/2)<1?e/2*(t*t*((1+(o*=1.525))*t-o))+n:e/2*((t-=2)*t*((1+(o*=1.525))*t+o)+2)+n},easeOutBounce:function(t,n,e,r){return(t/=r<1/2.75)?e*(7.5625*t*t)+n:t<2/2.75?e*(7.5625*(t-=1.5/2.75)*t+.75)+n:t<2.5/2.75?e*(7.5625*(t-=2.25/2.75)*t+.9375)+n:e*(7.5625*(t-=2.625/2.75)*t+.984375)+n}});function d(t,n,e){return e[0]=t[0]*n[0]+t[1]*n[4]+t[2]*n[8]+t[3]*n[12],e[1]=t[0]*n[1]+t[1]*n[5]+t[2]*n[9]+t[3]*n[13],e[2]=t[0]*n[2]+t[1]*n[6]+t[2]*n[10]+t[3]*n[14],e[3]=t[0]*n[3]+t[1]*n[7]+t[2]*n[11]+t[3]*n[15],e[4]=t[4]*n[0]+t[5]*n[4]+t[6]*n[8]+t[7]*n[12],e[5]=t[4]*n[1]+t[5]*n[5]+t[6]*n[9]+t[7]*n[13],e[6]=t[4]*n[2]+t[5]*n[6]+t[6]*n[10]+t[7]*n[14],e[7]=t[4]*n[3]+t[5]*n[7]+t[6]*n[11]+t[7]*n[15],e[8]=t[8]*n[0]+t[9]*n[4]+t[10]*n[8]+t[11]*n[12],e[9]=t[8]*n[1]+t[9]*n[5]+t[10]*n[9]+t[11]*n[13],e[10]=t[8]*n[2]+t[9]*n[6]+t[10]*n[10]+t[11]*n[14],e[11]=t[8]*n[3]+t[9]*n[7]+t[10]*n[11]+t[11]*n[15],e[12]=t[12]*n[0]+t[13]*n[4]+t[14]*n[8]+t[15]*n[12],e[13]=t[12]*n[1]+t[13]*n[5]+t[14]*n[9]+t[15]*n[13],e[14]=t[12]*n[2]+t[13]*n[6]+t[14]*n[10]+t[15]*n[14],e[15]=t[12]*n[3]+t[13]*n[7]+t[14]*n[11]+t[15]*n[15],e}function v(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 M(t,n){n[0]=t[0],n[1]=t[1],n[2]=t[2],n[3]=t[3],n[4]=t[4],n[5]=t[5],n[6]=t[6],n[7]=t[7],n[8]=t[8],n[9]=t[9],n[10]=t[10],n[11]=t[11],n[12]=t[12],n[13]=t[13],n[14]=t[14],n[15]=t[15]}function w(){var t=new Float32Array(16),n=new Float32Array(16),e=new Float32Array(16);return v(t),{data:t,asCSS:function(){for(var n="matrix3d(",e=0;e<15;++e)Math.abs(t[e])<1e-4?n+="0,":n+=t[e].toFixed(10)+",";return Math.abs(t[15])<1e-4?n+="0)":n+=t[15].toFixed(10)+")",n},clear:function(){v(t)},translate:function(r,o,a){return M(t,n),function(t,n,e,r){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]=n,t[13]=e,t[14]=r,t[15]=1}(e,r,o,a),d(n,e,t),this},rotateX:function(r){var o,a;return M(t,n),a=r,(o=e)[0]=1,o[1]=0,o[2]=0,o[3]=0,o[4]=0,o[5]=Math.cos(a),o[6]=-Math.sin(a),o[7]=0,o[8]=0,o[9]=Math.sin(a),o[10]=Math.cos(a),o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,d(n,e,t),this},rotateY:function(r){var o,a;return M(t,n),a=r,(o=e)[0]=Math.cos(a),o[1]=0,o[2]=Math.sin(a),o[3]=0,o[4]=0,o[5]=1,o[6]=0,o[7]=0,o[8]=-Math.sin(a),o[9]=0,o[10]=Math.cos(a),o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,d(n,e,t),this},rotateZ:function(r){var o,a;return M(t,n),a=r,(o=e)[0]=Math.cos(a),o[1]=-Math.sin(a),o[2]=0,o[3]=0,o[4]=Math.sin(a),o[5]=Math.cos(a),o[6]=0,o[7]=0,o[8]=0,o[9]=0,o[10]=1,o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,d(n,e,t),this},scale:function(r,o){return M(t,n),function(t,n,e){t[0]=n,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=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}(e,r,o),d(n,e,t),this},skew:function(r,o){return M(t,n),function(t,n,e){t[0]=1,t[1]=Math.tan(n),t[2]=0,t[3]=0,t[4]=Math.tan(e),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}(e,r,o),d(n,e,t),this}}}function m(t,n,e){if(void 0===n&&(n=[]),"number"==typeof t)return t;document.body.scrollHeight,document.body.scrollWidth;var r=window.innerWidth,o=window.innerHeight;return new Function("refs","el","'use strict';return ("+t.replace(/(\d*)vw/g,(function(t,n){return.01*n*r})).replace(/(\d*)vh/g,(function(t,n){return.01*n*o})).replace(/px/g,"")+");")(n,e)}var y=function t(e){var r=this;(e=n(e))?(e.dataset.scrollify,this.scenes=[],this.element=e,this.ticking=!1,this.active=!0,this.matrix=w(),this.transforms={scale:[1,1],rotation:[0,0,0],position:[0,0,0]},e.style.willChange="transform",window.addEventListener("scroll",(function(){return r.onScroll()}),{passive:!0}),window.addEventListener("resize",(function(){return r.onResize()}),{passive:!0})):document.querySelectorAll("[data-scrollify]").forEach((function(n){return new t(n)}))};y.prototype.parseDataAttribute=function(t){var n;return n=t.dataset.scrollify,Function("'use strict';return ("+n+")")()},y.prototype.addScene=function(r){var o=this,a=this.element,i=this.transforms,s=r.start;void 0===s&&(s="el.top - 100vh");var u=r.end;void 0===u&&(u="el.bottom");var c=r.easing,f=r.refs;void 0===f&&(f=[]);var l=r.effects;void 0===l&&(l={});var d=function(n,e){return Object.keys(l).reduce((function(r,o){var s,u,c,f=l[o];return t(f)?s=f:(s=p[o],c=f,u=Array.isArray(c)?f.map((function(t){return m(t,n,e)})):f),r.push(s({element:a,transforms:i,options:u})),r}),[])},v={start:0,duration:0,state:"",easing:t(c)?c:h[c],effects:[],reset:function(){var t=window.scrollY,r=e(a),i=function(t){return t.map(n).map(e)}(f),c=m(s,i,r),l=m(u,i,r),p=d(i,r);v.effects=p,v.start=c,v.duration=l-c,v.state=t>c?t>l?"after":"active":"before",o.update(v)}};return r.skipMatrix&&(v.skipMatrix=!0),v.reset(),r.debug&&console.log("Scrollify scene: ",v),this.scenes.push(v),this},y.prototype.onScroll=function(){var t=this;this.active&&window.requestAnimationFrame((function(){t.scenes.forEach((function(n){return t.update(n)}),t)}))},y.prototype.onResize=function(){this.scenes.forEach((function(t){return t.reset()}))},y.prototype.update=function(t){var n,e=t.start,r=t.duration,o=t.easing,a=t.effects,i=window.scrollY;if(i-e>r){if("after"===t.state)return;t.state="after",n=1}else if(i-e<0){if("before"===t.state)return;t.state="before",n=0}else t.state="active",n=o?o(i-e,0,1,r):(i-e)/r;a.forEach((function(t){return t(n)})),t.skipMatrix||(this.element.style.transform=this.updateMatrix().asCSS())},y.prototype.updateMatrix=function(){var t=this.matrix,n=this.transforms;return t.clear(),n.transformOrigin&&t.translate(-n.transformOrigin[0],-n.transformOrigin[1],-n.transformOrigin[2]),n.scale&&t.scale(n.scale[0],n.scale[1]),n.skew&&t.skew(n.skew[0],n.skew[1]),n.rotation&&(t.rotateX(n.rotation[0]),t.rotateY(n.rotation[1]),t.rotateZ(n.rotation[2])),n.position&&t.translate(n.position[0],n.position[1],n.position[2]),n.transformOrigin&&t.translate(n.transformOrigin[0],n.transformOrigin[1],n.transformOrigin[2]),t},y.prototype.disable=function(){this.active=!1};export default y;export{y as Scrollify,h as easings,p as fx}; |
@@ -1,1054 +0,8 @@ | ||
| (function () { | ||
| 'use strict'; | ||
| /** | ||
| * Feature detection: CSS transforms | ||
| * @type {Boolean} | ||
| */ | ||
| var transform = false; | ||
| if (typeof window !== 'undefined') { | ||
| var dummy = document.createElement('div'); | ||
| ['transform', 'webkitTransform', 'MozTransform', 'OTransform', 'msTransform'].forEach(function (t) { | ||
| if (dummy.style[t] !== undefined) { transform = t; } | ||
| }); | ||
| } | ||
| /** | ||
| * getUnit(), from anime.js | ||
| * @copyright ©2017 Julian Garnier | ||
| * Released under the MIT license | ||
| */ | ||
| 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]; | ||
| } | ||
| /* | ||
| The MIT License (MIT) | ||
| Copyright (c) 2015 Daniel Lundin | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| SOFTWARE. | ||
| */ | ||
| 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; | ||
| } | ||
| }; | ||
| } | ||
| /* | ||
| * scrollify | ||
| * https://github.com/apathetic/scrollify | ||
| /*! | ||
| * Scrollify 1.0.0-alpha | ||
| * | ||
| * Copyright (c) 2016, 2017 Wes Hatch | ||
| * Licensed under the MIT license. | ||
| * | ||
| * @link https://github.com/apathetic/scrollify | ||
| * @copyright (c) 2021 wes hatch | ||
| * @license MIT https://github.com/apathetic/scrollify/blob/master/LICENSE | ||
| */ | ||
| /** | ||
| * The Scrollify Class | ||
| */ | ||
| var Scrollify = function Scrollify(element) { | ||
| var this$1 = this; | ||
| if (element instanceof HTMLElement == false) { element = document.querySelector(element); } | ||
| if (!element || !transform) { | ||
| console.log('Scrollify [error] ', arguments[0]); | ||
| return this.disable(); | ||
| } | ||
| 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: [0,0,0] | ||
| // skew: [], | ||
| }; | ||
| window.addEventListener('scroll', function () { return this$1.onScroll(); }, { passive: true }); | ||
| window.addEventListener('resize', function () { return this$1.onResize(); }, { passive: true }); | ||
| }; | ||
| /** | ||
| * 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 any effects in the Scene. | ||
| * | ||
| * @return {void} | ||
| */ | ||
| Scrollify.prototype.addScene = function addScene (opts) { | ||
| var this$1 = this; | ||
| 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 scene = { | ||
| _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, | ||
| effects: [] | ||
| }; | ||
| effects.map(function (effect) { | ||
| this$1.addEffect(effect.fn, effect.options, scene); | ||
| }); | ||
| this.calculateStart(scene); | ||
| this.calculateDuration(scene); | ||
| scene.state = (this.scroll > this.start) ? (this.scroll > this.start + scene.duration) ? 'after' : 'active' : 'before'; | ||
| this.calculate(scene); | ||
| this.scenes.push(scene); | ||
| if (opts.debug) { | ||
| console.log('Scrollify scene: ', 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.calculateDuration(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 (fn, options, scene) { | ||
| if ( options === void 0 ) options = {}; | ||
| var element = this.element; | ||
| var transforms = this.transforms; | ||
| var context = { options: options, element: element, transforms: 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': [{'fn': fn, 'options': options}] | ||
| }); | ||
| } | ||
| } | ||
| // if any effect uses a matrix tranformation, we use true for the entire scene | ||
| scene._applyTransform = scene._applyTransform || fn._applyTransform; | ||
| scene.effects.push(fn.bind(context)); | ||
| // scene.effects.push(() => { fn.call(context); }); | ||
| return this; | ||
| }; | ||
| /** | ||
| * Calculate the start point of each scene. | ||
| * @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 offset = window.innerHeight - this.mapTo(scene._offset, window.innerHeight); | ||
| var trigger = scene._trigger; | ||
| var top = 0; | ||
| do { | ||
| top += trigger.offsetTop || 0; | ||
| trigger = trigger.offsetParent; | ||
| } while(trigger); | ||
| // var test = trigger.getBoundingClientRect().top + (window.scrollY || window.pageYOffset); | ||
| scene.start = Math.max(0, top - offset); | ||
| }; | ||
| /** | ||
| * [mapTo description] | ||
| * @param{[type]} input [description] | ||
| * @param{[type]} scale [description] | ||
| * @return {[type]} [description] | ||
| */ | ||
| 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) { | ||
| scene.duration = (typeof scene._duration === 'function') ? | ||
| scene._duration(scene._trigger) : | ||
| this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight); | ||
| }; | ||
| /** | ||
| * onScroll Handler | ||
| * @return {void} | ||
| */ | ||
| Scrollify.prototype.onScroll = function onScroll () { | ||
| if (!this.active) { return; } | ||
| this.scroll = window.scrollY || window.pageYOffset; | ||
| this.direction = (this.scroll > this.previousScroll) ? 'down' : 'up'; | ||
| this.previousScroll = this.scroll; | ||
| if (!this.ticking) { | ||
| window.requestAnimationFrame(this.update.bind(this)); | ||
| // window.requestAnimationFrame(() => { this.update(); }); | ||
| 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; | ||
| // 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(progress); | ||
| }); | ||
| if (scene._applyTransform) { | ||
| // transmogrify all applied transformations into a single matrix, and apply | ||
| var 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]); | ||
| } | ||
| // ... 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; | ||
| }; | ||
| /** | ||
| * A list of some default "transformations" that may be applied | ||
| * Options are applied at initialize and are curried in via "this". | ||
| * | ||
| * NOTE: for all functions herein, "this" contains effect options, a | ||
| * transformation Object, and also a reference to the element. | ||
| */ | ||
| /*global console*/ | ||
| /*eslint no-invalid-this: "error"*/ | ||
| // Effects that use matrix transformations. At present, only | ||
| // built-in effects benefit from matrix transformations. | ||
| [translateX, translateY, rotate, scale, parallax].forEach(function (fn) { | ||
| fn._applyTransform = true; | ||
| }); | ||
| /** | ||
| * 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 !== undefined) ? this.options.to : 0; | ||
| var from = (this.options.from !== undefined) ? 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 !== undefined) ? this.options.to : 0; | ||
| var from = (this.options.from !== undefined) ? this.options.from : 0;// this.transforms.position[1]; | ||
| var offset = (to - from) * progress + from; | ||
| this.transforms.position[1] = offset; | ||
| } | ||
| // export function translate(progress) { | ||
| // const to = this.options.to; | ||
| // const from = this.options.from; | ||
| // const offsetX = (to[0] - from[0]) * progress + from[0]; | ||
| // const offsetY = (to[1] - from[1]) * progress + from[1]; | ||
| // | ||
| // this.transforms.position[0] = offsetX; | ||
| // this.transforms.position[1] = offsetY; | ||
| // } | ||
| /** | ||
| * 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 !== undefined) ? this.options.to : 1; | ||
| var from = (this.options.from !== undefined) ? 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 : 0; | ||
| var from = (this.options.from !== undefined) ? this.options.from : 1; | ||
| var opacity = (to - from) * progress + from; | ||
| this.element.style.opacity = opacity; | ||
| } | ||
| /** | ||
| * Update an element's blur. | ||
| * @param {Float} progress Current progress of the scene, between 0 and 1. | ||
| * @this {Object} | ||
| * @return {void} | ||
| */ | ||
| function blur(progress) { | ||
| var to = (this.options.to !== undefined) ? this.options.to : 0; | ||
| var from = (this.options.from !== undefined) ? this.options.from : 0; | ||
| var amount = (to - from) * progress + from; | ||
| this.element.style.filter = 'blur(' + amount + 'px)'; | ||
| } | ||
| /** | ||
| * Parallax an element. | ||
| * @param {Float} progress Current progress data of the scene, between 0 and 1. | ||
| * @this {Object} | ||
| * @return {void} | ||
| */ | ||
| function parallax(progress) { | ||
| var range = this.options.range || 0; | ||
| var offset = progress * range; // TODO add provision for speed as well | ||
| 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 = element._currentState || null; // store prop on element | ||
| if (progress <= 0) { | ||
| setState(element, 'normal'); | ||
| } else if (progress >= 1) { | ||
| setState(element, 'bottom'); | ||
| } else { | ||
| setState(element, 'sticky'); | ||
| } | ||
| function setState(element, state) { | ||
| if (currentState === state) { return; } | ||
| if (state == 'sticky') { | ||
| var BCR = element.getBoundingClientRect(); | ||
| 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.classList.remove(currentState); | ||
| element.classList.add(state); | ||
| element._currentState = state; | ||
| } | ||
| } | ||
| var fx = Object.freeze({ | ||
| translateX: translateX, | ||
| translateY: translateY, | ||
| rotate: rotate, | ||
| scale: scale, | ||
| fade: fade, | ||
| blur: blur, | ||
| 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 | ||
| }); | ||
| /** | ||
| * Put Scrollify into the Global scope. | ||
| * Useful for existing demos or if you wish to include manually | ||
| */ | ||
| window.Scrollify = Scrollify; | ||
| window.Scrollify.fx = fx; | ||
| window.Scrollify.easings = easings; | ||
| }()); | ||
| var Scrollify=function(t){"use strict";var n=function(t){return"function"==typeof t},e=function(t){return t instanceof HTMLElement?t:document.querySelector(t)},r=function(t){var n=t.getBoundingClientRect();return{left:n.left+window.pageXOffset,right:n.right+window.pageXOffset,top:n.top+window.pageYOffset,bottom:n.bottom+window.pageYOffset,height:n.height,width:n.width}},o=function(t,n,e){return(n-t)*e+t},a=function(t){var n=t.transforms,e=t.options;return function(t){n.position[1]=o.apply(void 0,e.concat([t]))}},i=a,s=function(t){var n=t.transforms,e=t.options;return function(t){n.rotation[2]=o.apply(void 0,e.concat([t]))}},u=s,c=function(t){var n=t.element,e=t.options;return function(t){n.style.opacity=o.apply(void 0,e.concat([t]))}},f=function(t){var n=t.element,e=t.options;return function(t){n.style.filter="blur("+o.apply(void 0,e.concat([t]))+"px)"}},l=function(t){var n=t.element,e=t.options,r=Object.keys(e);return function(t){r.forEach((function(r){var o=e[r];n.classList.toggle(o,t>+r)}))}},p=function(t){var n=t.element;function e(t){var e=n.__currentState;if(e!==t){if("sticky"==t){var r=n.getBoundingClientRect();n.style.top=r.top+"px",n.style.left=r.left+"px",n.style.width=r.width+"px"}else n.style.top="",n.style.left="",n.style.width="";n.classList.remove(e),n.classList.add(t),n.__currentState=t}}return function(t){e(t<=0?"normal":t>=1?"bottom":"sticky")}};[p,l,f,c].forEach((function(t){Object.defineProperty(t,"skipMatrix",{value:!0})}));var h=Object.freeze({__proto__:null,translateX:function(t){var n=t.transforms,e=t.options;return function(t){n.position[0]=o.apply(void 0,e.concat([t]))}},translateY:a,parallax:i,rotateX:function(t){var n=t.transforms,e=t.options;return function(t){n.rotation[0]=o.apply(void 0,e.concat([t]))}},rotateY:function(t){var n=t.transforms,e=t.options;return function(t){n.rotation[1]=o.apply(void 0,e.concat([t]))}},rotateZ:s,rotate:u,scaleX:function(t){var n=t.transforms,e=t.options;return function(t){n.scale[0]=o.apply(void 0,e.concat([t]))}},scaleY:function(t){var n=t.transforms,e=t.options;return void 0===e&&(e=[n.scale[1],1]),function(t){n.scale[1]=o.apply(void 0,e.concat([t]))}},scale:function(t){var n=t.transforms,e=t.options;return function(t){n.scale[0]=n.scale[1]=o.apply(void 0,e.concat([t]))}},skewX:function(t){var n=t.transforms,e=t.options;return function(t){n.skew[0]=o.apply(void 0,e.concat([t]))}},skewY:function(t){var n=t.transforms,e=t.options;return function(t){n.skew[1]=o.apply(void 0,e.concat([t]))}},skew:function(t){var n=t.transforms,e=t.options;return function(t){n.skew[0]=n.skew[1]=o.apply(void 0,e.concat([t]))}},fade:c,blur:f,toggle:l,stick:p});var d=Object.freeze({__proto__:null,oscillate:function(t,n,e,r){return t/=r,t=4*Math.PI*t,t=Math.sin(t)*e,(t=Math.abs(t))+n},easeInQuad:function(t,n,e,r){return e*(t/=r)*t+n},easeOutQuad:function(t,n,e,r){return-e*(t/=r)*(t-2)+n},easeInOutQuad:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t+n:-e/2*(--t*(t-2)-1)+n},easeInCubic:function(t,n,e,r){return e*(t/=r)*t*t+n},easeOutCubic:function(t,n,e,r){return e*((t=t/r-1)*t*t+1)+n},easeInOutCubic:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t+n:e/2*((t-=2)*t*t+2)+n},easeInQuart:function(t,n,e,r){return e*(t/=r)*t*t*t+n},easeOutQuart:function(t,n,e,r){return-e*((t=t/r-1)*t*t*t-1)+n},easeInOutQuart:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t*t+n:-e/2*((t-=2)*t*t*t-2)+n},easeInQuint:function(t,n,e,r){return e*(t/=r)*t*t*t*t+n},easeOutQuint:function(t,n,e,r){return e*((t=t/r-1)*t*t*t*t+1)+n},easeInOutQuint:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t*t*t+n:e/2*((t-=2)*t*t*t*t+2)+n},easeInSine:function(t,n,e,r){return-e*Math.cos(t/r*(Math.PI/2))+e+n},easeOutSine:function(t,n,e,r){return e*Math.sin(t/r*(Math.PI/2))+n},easeInOutSine:function(t,n,e,r){return-e/2*(Math.cos(Math.PI*t/r)-1)+n},easeInExpo:function(t,n,e,r){return 0==t?n:e*Math.pow(2,10*(t/r-1))+n},easeOutExpo:function(t,n,e,r){return t==r?n+e:e*(1-Math.pow(2,-10*t/r))+n},easeInOutExpo:function(t,n,e,r){return 0==t?n:t==r?n+e:(t/=r/2)<1?e/2*Math.pow(2,10*(t-1))+n:e/2*(2-Math.pow(2,-10*--t))+n},easeInCirc:function(t,n,e,r){return-e*(Math.sqrt(1-(t/=r)*t)-1)+n},easeOutCirc:function(t,n,e,r){return e*Math.sqrt(1-(t=t/r-1)*t)+n},easeInOutCirc:function(t,n,e,r){return(t/=r/2)<1?-e/2*(Math.sqrt(1-t*t)-1)+n:e/2*(Math.sqrt(1-(t-=2)*t)+1)+n},easeInElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(1==(t/=r))return n+e;if(a||(a=.3*r),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return-i*Math.pow(2,10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)+n},easeOutElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(1==(t/=r))return n+e;if(a||(a=.3*r),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return i*Math.pow(2,-10*t)*Math.sin((t*r-o)*(2*Math.PI)/a)+e+n},easeInOutElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(2==(t/=r/2))return n+e;if(a||(a=r*(.3*1.5)),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return t<1?i*Math.pow(2,10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)*-.5+n:i*Math.pow(2,-10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)*.5+e+n},easeInBack:function(t,n,e,r,o){return null==o&&(o=1.70158),e*(t/=r)*t*((o+1)*t-o)+n},easeOutBack:function(t,n,e,r,o){return null==o&&(o=1.70158),e*((t=t/r-1)*t*((o+1)*t+o)+1)+n},easeInOutBack:function(t,n,e,r,o){return null==o&&(o=1.70158),(t/=r/2)<1?e/2*(t*t*((1+(o*=1.525))*t-o))+n:e/2*((t-=2)*t*((1+(o*=1.525))*t+o)+2)+n},easeOutBounce:function(t,n,e,r){return(t/=r<1/2.75)?e*(7.5625*t*t)+n:t<2/2.75?e*(7.5625*(t-=1.5/2.75)*t+.75)+n:t<2.5/2.75?e*(7.5625*(t-=2.25/2.75)*t+.9375)+n:e*(7.5625*(t-=2.625/2.75)*t+.984375)+n}});function v(t,n,e){return e[0]=t[0]*n[0]+t[1]*n[4]+t[2]*n[8]+t[3]*n[12],e[1]=t[0]*n[1]+t[1]*n[5]+t[2]*n[9]+t[3]*n[13],e[2]=t[0]*n[2]+t[1]*n[6]+t[2]*n[10]+t[3]*n[14],e[3]=t[0]*n[3]+t[1]*n[7]+t[2]*n[11]+t[3]*n[15],e[4]=t[4]*n[0]+t[5]*n[4]+t[6]*n[8]+t[7]*n[12],e[5]=t[4]*n[1]+t[5]*n[5]+t[6]*n[9]+t[7]*n[13],e[6]=t[4]*n[2]+t[5]*n[6]+t[6]*n[10]+t[7]*n[14],e[7]=t[4]*n[3]+t[5]*n[7]+t[6]*n[11]+t[7]*n[15],e[8]=t[8]*n[0]+t[9]*n[4]+t[10]*n[8]+t[11]*n[12],e[9]=t[8]*n[1]+t[9]*n[5]+t[10]*n[9]+t[11]*n[13],e[10]=t[8]*n[2]+t[9]*n[6]+t[10]*n[10]+t[11]*n[14],e[11]=t[8]*n[3]+t[9]*n[7]+t[10]*n[11]+t[11]*n[15],e[12]=t[12]*n[0]+t[13]*n[4]+t[14]*n[8]+t[15]*n[12],e[13]=t[12]*n[1]+t[13]*n[5]+t[14]*n[9]+t[15]*n[13],e[14]=t[12]*n[2]+t[13]*n[6]+t[14]*n[10]+t[15]*n[14],e[15]=t[12]*n[3]+t[13]*n[7]+t[14]*n[11]+t[15]*n[15],e}function M(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 w(t,n){n[0]=t[0],n[1]=t[1],n[2]=t[2],n[3]=t[3],n[4]=t[4],n[5]=t[5],n[6]=t[6],n[7]=t[7],n[8]=t[8],n[9]=t[9],n[10]=t[10],n[11]=t[11],n[12]=t[12],n[13]=t[13],n[14]=t[14],n[15]=t[15]}function y(){var t=new Float32Array(16),n=new Float32Array(16),e=new Float32Array(16);return M(t),{data:t,asCSS:function(){for(var n="matrix3d(",e=0;e<15;++e)Math.abs(t[e])<1e-4?n+="0,":n+=t[e].toFixed(10)+",";return Math.abs(t[15])<1e-4?n+="0)":n+=t[15].toFixed(10)+")",n},clear:function(){M(t)},translate:function(r,o,a){return w(t,n),function(t,n,e,r){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]=n,t[13]=e,t[14]=r,t[15]=1}(e,r,o,a),v(n,e,t),this},rotateX:function(r){var o,a;return w(t,n),a=r,(o=e)[0]=1,o[1]=0,o[2]=0,o[3]=0,o[4]=0,o[5]=Math.cos(a),o[6]=-Math.sin(a),o[7]=0,o[8]=0,o[9]=Math.sin(a),o[10]=Math.cos(a),o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,v(n,e,t),this},rotateY:function(r){var o,a;return w(t,n),a=r,(o=e)[0]=Math.cos(a),o[1]=0,o[2]=Math.sin(a),o[3]=0,o[4]=0,o[5]=1,o[6]=0,o[7]=0,o[8]=-Math.sin(a),o[9]=0,o[10]=Math.cos(a),o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,v(n,e,t),this},rotateZ:function(r){var o,a;return w(t,n),a=r,(o=e)[0]=Math.cos(a),o[1]=-Math.sin(a),o[2]=0,o[3]=0,o[4]=Math.sin(a),o[5]=Math.cos(a),o[6]=0,o[7]=0,o[8]=0,o[9]=0,o[10]=1,o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,v(n,e,t),this},scale:function(r,o){return w(t,n),function(t,n,e){t[0]=n,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=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}(e,r,o),v(n,e,t),this},skew:function(r,o){return w(t,n),function(t,n,e){t[0]=1,t[1]=Math.tan(n),t[2]=0,t[3]=0,t[4]=Math.tan(e),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}(e,r,o),v(n,e,t),this}}}var m="transform";function g(t,n,e){if(void 0===n&&(n=[]),"number"==typeof t)return t;document.body.scrollHeight,document.body.scrollWidth;var r=window.innerWidth,o=window.innerHeight;return new Function("refs","el","'use strict';return ("+t.replace(/(\d*)vw/g,(function(t,n){return.01*n*r})).replace(/(\d*)vh/g,(function(t,n){return.01*n*o})).replace(/px/g,"")+");")(n,e)}var O=function t(n){var r=this;(n=e(n))?(n.dataset.scrollify,this.scenes=[],this.element=n,this.ticking=!1,this.active=!0,this.matrix=y(),this.transforms={scale:[1,1],rotation:[0,0,0],position:[0,0,0]},n.style.willChange=m,window.addEventListener("scroll",(function(){return r.onScroll()}),{passive:!0}),window.addEventListener("resize",(function(){return r.onResize()}),{passive:!0})):document.querySelectorAll("[data-scrollify]").forEach((function(n){return new t(n)}))};return O.prototype.parseDataAttribute=function(t){var n;return n=t.dataset.scrollify,Function("'use strict';return ("+n+")")()},O.prototype.addScene=function(t){var o=this,a=this.element,i=this.transforms,s=t.start;void 0===s&&(s="el.top - 100vh");var u=t.end;void 0===u&&(u="el.bottom");var c=t.easing,f=t.refs;void 0===f&&(f=[]);var l=t.effects;void 0===l&&(l={});var p=function(t,e){return Object.keys(l).reduce((function(r,o){var s,u,c,f=l[o];return n(f)?s=f:(s=h[o],c=f,u=Array.isArray(c)?f.map((function(n){return g(n,t,e)})):f),r.push(s({element:a,transforms:i,options:u})),r}),[])},v={start:0,duration:0,state:"",easing:n(c)?c:d[c],effects:[],reset:function(){var t=window.scrollY,n=r(a),i=function(t){return t.map(e).map(r)}(f),c=g(s,i,n),l=g(u,i,n),h=p(i,n);v.effects=h,v.start=c,v.duration=l-c,v.state=t>c?t>l?"after":"active":"before",o.update(v)}};return t.skipMatrix&&(v.skipMatrix=!0),v.reset(),t.debug&&console.log("Scrollify scene: ",v),this.scenes.push(v),this},O.prototype.onScroll=function(){var t=this;this.active&&window.requestAnimationFrame((function(){t.scenes.forEach((function(n){return t.update(n)}),t)}))},O.prototype.onResize=function(){this.scenes.forEach((function(t){return t.reset()}))},O.prototype.update=function(t){var n,e=t.start,r=t.duration,o=t.easing,a=t.effects,i=window.scrollY;if(i-e>r){if("after"===t.state)return;t.state="after",n=1}else if(i-e<0){if("before"===t.state)return;t.state="before",n=0}else t.state="active",n=o?o(i-e,0,1,r):(i-e)/r;a.forEach((function(t){return t(n)})),t.skipMatrix||(this.element.style.transform=this.updateMatrix().asCSS())},O.prototype.updateMatrix=function(){var t=this.matrix,n=this.transforms;return t.clear(),n.transformOrigin&&t.translate(-n.transformOrigin[0],-n.transformOrigin[1],-n.transformOrigin[2]),n.scale&&t.scale(n.scale[0],n.scale[1]),n.skew&&t.skew(n.skew[0],n.skew[1]),n.rotation&&(t.rotateX(n.rotation[0]),t.rotateY(n.rotation[1]),t.rotateZ(n.rotation[2])),n.position&&t.translate(n.position[0],n.position[1],n.position[2]),n.transformOrigin&&t.translate(n.transformOrigin[0],n.transformOrigin[1],n.transformOrigin[2]),t},O.prototype.disable=function(){this.active=!1},t.Scrollify=O,t.default=O,t.easings=d,t.fx=h,Object.defineProperty(t,"__esModule",{value:!0}),t}({}); |
@@ -5,4 +5,5 @@ { | ||
| "license": "MIT", | ||
| "version": "0.5.1", | ||
| "version": "1.0.0-alpha", | ||
| "description": "A simple thing for triggering 'them scroll effects that everybody loves", | ||
| "homepage": "https://github.com/apathetic/scrollify", | ||
| "main": "./dist/scrollify.cjs.js", | ||
@@ -21,16 +22,17 @@ "broswer": "./dist/scrollify.js", | ||
| "scripts": { | ||
| "start": "http-server ./ -p 8080 -d", | ||
| "start": "http-server ./ -p 8888 -d", | ||
| "clean": "rimraf dist/*.js*", | ||
| "build": "npm run clean && npm run lint && rollup -c", | ||
| "lint": "eslint source/js/*.js", | ||
| "lint": "eslint src/*.js", | ||
| "test": "#tape -r babel-register test/*.js" | ||
| }, | ||
| "devDependencies": { | ||
| "eslint": "^3.1.1", | ||
| "http-server": "^0.9.0", | ||
| "@rollup/plugin-buble": "^0.21.3", | ||
| "eslint": "^7.19.0", | ||
| "http-server": "^0.12.3", | ||
| "rimraf": "^2.6.1", | ||
| "rollup": "^0.45.2", | ||
| "rollup-plugin-buble": "^0.12.1", | ||
| "rollup": "^2.38.4", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "tape": "^4.6.0" | ||
| } | ||
| } |
@@ -5,3 +5,3 @@ # Scrollify | ||
| > Scrollify. Do things on scroll. 3KB minified and gzipped. There are no dependencies; you do not need jQuery; you do not need TweenMax. | ||
| > Scrollify. Do things on scroll. 4KB minified and gzipped. There are no dependencies; you do not need jQuery; you do not need TweenMax. | ||
@@ -49,2 +49,8 @@ ## What sorts of things? | ||
| ### 1.0 | ||
| * DOM helpers added; no longer req'd to use JS API to add effects and scenes | ||
| ### 0.6 | ||
| * modifying included helpers; now values are curried in vs. previous reliance on `this` for context | ||
| ### 0.5 | ||
@@ -51,0 +57,0 @@ * duration may be a function, a string, or a float |
@@ -1,25 +0,27 @@ | ||
| import buble from 'rollup-plugin-buble'; | ||
| import { terser } from "rollup-plugin-terser"; | ||
| import buble from '@rollup/plugin-buble'; | ||
| export default [ | ||
| { | ||
| entry: 'src/index.js', | ||
| exports: 'named', | ||
| plugins: [ | ||
| buble() | ||
| ], | ||
| targets: [ | ||
| { dest: 'dist/scrollify.cjs.js', format: 'cjs' }, | ||
| { dest: 'dist/scrollify.es6.js', format: 'es' }, | ||
| ] | ||
| }, | ||
| { | ||
| entry: 'src/shim.js', | ||
| moduleName: 'Scrollify', | ||
| plugins: [ | ||
| buble() | ||
| ], | ||
| targets: [ | ||
| { dest: 'dist/scrollify.js', format: 'iife' } | ||
| ] | ||
| } | ||
| ]; | ||
| const pkg = require('./package.json'); | ||
| const year = new Date().getFullYear(); | ||
| const banner = `/*! | ||
| * Scrollify ${pkg.version} | ||
| * | ||
| * @link ${pkg.homepage} | ||
| * @copyright (c) ${year} wes hatch | ||
| * @license ${pkg.license} https://github.com/apathetic/scrollify/blob/master/LICENSE | ||
| */ | ||
| `; | ||
| export default { | ||
| input: 'src/index.js', | ||
| output: [ | ||
| { file: 'dist/scrollify.es6.js', format: 'es', banner }, | ||
| { file: 'dist/scrollify.cjs.js', format: 'cjs', exports: 'named', banner }, | ||
| { file: 'dist/scrollify.js', format: 'iife', exports: 'named', name: 'Scrollify', banner }, | ||
| ], | ||
| plugins: [ | ||
| buble(), | ||
| terser() | ||
| ], | ||
| }; |
@@ -180,1 +180,5 @@ /*eslint max-len: ["error", 120]*/ | ||
| } | ||
| // easeInBounce: t => { | ||
| // return 1 - easings.easeOutBounce(1 - t); | ||
| // }, |
| /** | ||
| * A list of some default "transformations" that may be applied | ||
| * Options are applied at initialize and are curried in via "this". | ||
| * A list of default transformations that may be applied. Each transformation | ||
| * effect will receive three arguments, `transforms`, `element`, and `options`, | ||
| * and must return a function that receives a progress argument. | ||
| * | ||
| * NOTE: for all functions herein, "this" contains effect options, a | ||
| * transformation Object, and also a reference to the element. | ||
| * @example sampleEffect({ transforms, element, options }) => (p) => {...} | ||
| * | ||
| * transforms: A (CSS) transformation matrix that is applied to the | ||
| * scrollif'ed element. Represents all CSS transforms (translate, | ||
| * skew, rotate, etc) in a matrix format. | ||
| * | ||
| * element: A reference to the scrollify'd DOM node. | ||
| * | ||
| * options: An options object, `to`, `from`, etc. | ||
| */ | ||
| /*global console*/ | ||
| /*eslint no-invalid-this: "error"*/ | ||
| import { transform } from './utils'; | ||
| const lerp = (start, end, t) => (end - start) * t + start; | ||
| // Effects that use matrix transformations. At present, only | ||
| // built-in effects benefit from matrix transformations. | ||
| [translateX, translateY, rotate, scale, parallax].forEach((fn) => { | ||
| fn._applyTransform = true; | ||
| }); | ||
| /** | ||
| * Translate an element along the X-axis. | ||
| * @param {Float} progress Current progress data of the scene, between 0 and 1. | ||
| * @this {Object} | ||
| * @return {void} | ||
| * @param {object} transforms An object of matrix transforms | ||
| * @param {object} options Options for the effect | ||
| * @param {object} options.from Initial value for the translateX | ||
| * @param {object} options.to Destination value for the translateX | ||
| * @returns {Function} A function that receives a normalized progress value. | ||
| */ | ||
| export function translateX(progress) { | ||
| const to = (this.options.to !== undefined) ? this.options.to : 0; | ||
| const from = (this.options.from !== undefined) ? this.options.from : 0; | ||
| const offset = (to - from) * progress + from; | ||
| export const translateX = ({ transforms, options }) => (progress) => { | ||
| transforms.position[0] = lerp(...options, progress); | ||
| }; | ||
| 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} | ||
| * @param {object} transforms An object of matrix transforms | ||
| * @param {object} options Options for the effect | ||
| * @param {object} options.from Initial value for the translateY | ||
| * @param {object} options.to Destination value for the translateY | ||
| * @returns {Function} A function that receives a normalized progress value. | ||
| */ | ||
| export function translateY(progress) { | ||
| const to = (this.options.to !== undefined) ? this.options.to : 0; | ||
| const from = (this.options.from !== undefined) ? this.options.from : 0;// this.transforms.position[1]; | ||
| const offset = (to - from) * progress + from; | ||
| export const translateY = ({ transforms, options }) => (progress) => { | ||
| transforms.position[1] = lerp(...options, progress); | ||
| }; | ||
| export const parallax = translateY; | ||
| this.transforms.position[1] = offset; | ||
| } | ||
| // export function translate(progress) { | ||
| // const to = this.options.to; | ||
| // const from = this.options.from; | ||
| // const offsetX = (to[0] - from[0]) * progress + from[0]; | ||
| // const offsetY = (to[1] - from[1]) * progress + from[1]; | ||
| // | ||
| // this.transforms.position[0] = offsetX; | ||
| // this.transforms.position[1] = offsetY; | ||
| // } | ||
| /** | ||
| * 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} | ||
| * Rotate an element along a specific axis, using radians | ||
| * @param {object} transforms An object of matrix transforms | ||
| * @param {object} options Options for the effect | ||
| * @param {object} options.rad Rotation in radians. TODO degrees? | ||
| * @returns {Function} A function that receives a normalized progress value. | ||
| */ | ||
| export function rotate(progress) { | ||
| const radians = this.options.rad * progress; | ||
| export const rotateX = ({ transforms, options }) => (progress) => { | ||
| transforms.rotation[0] = lerp(...options, progress); | ||
| }; | ||
| this.transforms.rotation[2] = radians; | ||
| export const rotateY = ({ transforms, options }) => (progress) => { | ||
| transforms.rotation[1] = lerp(...options, progress); | ||
| }; | ||
| export const rotateZ = ({ transforms, options }) => (progress) => { | ||
| transforms.rotation[2] = lerp(...options, progress); | ||
| }; | ||
| export const rotate = rotateZ; | ||
| /** | ||
| * Uniformly scale an element along both axis'. | ||
| * @param {Float} progress Current progress data of the scene, between 0 and 1. | ||
| * @this {Object} | ||
| * @return {void} | ||
| * Uniformly scale an element along an axis | ||
| * @param {object} transforms An object of matrix transforms | ||
| * @param {object} options Options for the effect | ||
| * @param {object} options.from Initial value for the scale | ||
| * @param {object} options.to Destination value for the scale | ||
| * @returns {Function} A function that receives a normalized progress value. | ||
| */ | ||
| export function scale(progress) { | ||
| const to = (this.options.to !== undefined) ? this.options.to : 1; | ||
| const from = (this.options.from !== undefined) ? this.options.from : this.transforms.scale[0]; | ||
| const scale = (to - from) * progress + from; | ||
| export const scaleX = ({ transforms, options }) => (progress) => { | ||
| transforms.scale[0] = lerp(...options, progress); | ||
| }; | ||
| this.transforms.scale[0] = scale; | ||
| this.transforms.scale[1] = scale; | ||
| // note: these default params won't ever be used.... | ||
| export const scaleY = ({ transforms, options = [transforms.scale[1], 1] }) => (progress) => { | ||
| transforms.scale[1] = lerp(...options, progress); | ||
| }; | ||
| export const scale = ({ transforms, options }) => (progress) => { | ||
| transforms.scale[0] = transforms.scale[1] = lerp(...options, progress); | ||
| }; | ||
| export const skewX = ({ transforms, options }) => (t) => { | ||
| transforms.skew[0] = lerp(...options, t); | ||
| }; | ||
| export const skewY = ({ transforms, options }) => (t) => { | ||
| transforms.skew[1] = lerp(...options, t); | ||
| }; | ||
| export const skew = ({ transforms, options }) => (t) => { | ||
| transforms.skew[0] = transforms.skew[1] = lerp(...options, t); | ||
| }; | ||
| /** | ||
| * Update an element's opacity. | ||
| * @param {Float} progress Current progress data of the scene, between 0 and 1. | ||
| * @this {Object} | ||
| * @return {void} | ||
| * @param {HTMLElement} element The element to fade | ||
| * @param {object} options Options for the effect | ||
| * @param {object} options.from Initial fade value | ||
| * @param {object} options.to Destination fade value | ||
| * @returns {Function} A function that receives a normalized progress value. | ||
| */ | ||
| export function fade(progress) { | ||
| const to = (this.options.to !== undefined) ? this.options.to : 0; | ||
| const from = (this.options.from !== undefined) ? this.options.from : 1; | ||
| const opacity = (to - from) * progress + from; | ||
| this.element.style.opacity = opacity; | ||
| export const fade = ({ element, options }) => (progress) => { | ||
| element.style.opacity = lerp(...options, progress); | ||
| }; | ||
| /** | ||
| * Update an element's blur. | ||
| * @param {Float} progress Current progress of the scene, between 0 and 1. | ||
| * @this {Object} | ||
| * @return {void} | ||
| * NOTE: this is a relatively CPU-heavy operation | ||
| * @param {HTMLElement} element The element to blur | ||
| * @param {object} options Options for the effect | ||
| * @param {object} options.from Initial fade value | ||
| * @param {object} options.to Destination fade value | ||
| * @returns {Function} A function that receives a normalized progress value. | ||
| */ | ||
| export function blur(progress) { | ||
| const to = (this.options.to !== undefined) ? this.options.to : 0; | ||
| const from = (this.options.from !== undefined) ? this.options.from : 0; | ||
| const amount = (to - from) * progress + from; | ||
| this.element.style.filter = 'blur(' + amount + 'px)'; | ||
| export const blur = ({ element, options }) => (progress) => { | ||
| element.style.filter = 'blur(' + lerp(...options, progress) + 'px)'; | ||
| }; | ||
| /** | ||
| * Parallax an element. | ||
| * @param {Float} progress Current progress data of the scene, between 0 and 1. | ||
| * @this {Object} | ||
| * @return {void} | ||
| */ | ||
| export function parallax(progress) { | ||
| const range = this.options.range || 0; | ||
| const offset = progress * range; // TODO add provision for speed as well | ||
| 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} | ||
| * Toggles a class on or off. | ||
| * @param {HTMLElement} element A element to toggle class(es) on | ||
| * @param {object} options Options for the effect | ||
| * @returns {Function} A function that receives a normalized progress value. | ||
| */ | ||
| export function toggle(progress) { | ||
| const opts = this.options; | ||
| const element = this.element; | ||
| const times = Object.keys(opts); | ||
| export const toggle = ({ element, options }) => { | ||
| const times = Object.keys(options); | ||
| times.forEach(function(time) { | ||
| const css = opts[time]; | ||
| return (progress) => { | ||
| times.forEach((time) => { | ||
| const css = options[time]; | ||
| element.classList.toggle(css, progress > +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} | ||
| * NOTE: this is a POC, a little CSS is also required | ||
| * @param {HTMLElement} element The element to stick | ||
| * @returns {Function} A function that receives a normalized progress value. | ||
| */ | ||
| export function stick(progress) { | ||
| let element = this.element; | ||
| let currentState = element._currentState || null; // store prop on element | ||
| export const stick = ({ element }) => { | ||
| function setState(state) { | ||
| let currentState = element.__currentState; // store state on element | ||
| if (progress <= 0) { | ||
| setState(element, 'normal'); | ||
| } else if (progress >= 1) { | ||
| setState(element, 'bottom'); | ||
| } else { | ||
| setState(element, 'sticky'); | ||
| } | ||
| function setState(element, state) { | ||
| if (currentState === state) { return; } | ||
@@ -184,4 +174,21 @@ if (state == 'sticky') { | ||
| element.classList.add(state); | ||
| element._currentState = state; | ||
| element.__currentState = state; | ||
| } | ||
| } | ||
| return (progress) => { | ||
| if (progress <= 0) { | ||
| setState('normal'); | ||
| } else if (progress >= 1) { | ||
| setState('bottom'); | ||
| } else { | ||
| setState('sticky'); | ||
| } | ||
| }; | ||
| }; | ||
| // Effects that do _not_ use matrix transformations. | ||
| [stick, toggle, blur, fade].forEach((fn) => { | ||
| Object.defineProperty(fn, 'skipMatrix', { value: true }); | ||
| }); | ||
@@ -12,5 +12,5 @@ /** | ||
| export { | ||
| Scrollify, // exported here for commonJS modules | ||
| Scrollify, | ||
| fx, | ||
| easings | ||
| }; |
@@ -220,5 +220,5 @@ /* | ||
| css += '0,'; | ||
| } else { | ||
| css += data[i].toFixed(10) + ','; | ||
| } | ||
| } else { | ||
| css += data[i].toFixed(10) + ','; | ||
| } | ||
| } | ||
@@ -225,0 +225,0 @@ if (Math.abs(data[15]) < 0.0001) { |
@@ -10,7 +10,65 @@ /* | ||
| import { transform, getUnit } from './utils'; | ||
| import { getRef, getPosition, isFunc, isArray } from './utils'; | ||
| import * as Effects from './effects'; | ||
| import * as Easings from './easings'; | ||
| import createMatrix from './matrix'; | ||
| const transform = 'transform'; | ||
| const scrollifys = []; | ||
| let initialized = false; | ||
| const calculateRefs = (refs) => refs.map(getRef).map(getPosition); | ||
| /** | ||
| * Converts a `value` string into its pixel-equivalent using data from the | ||
| * `refs` array and a mix of custom CSS and JS syntax. | ||
| * @param {string} value The string to dynamically interpret. | ||
| * @param {DOMRect[]} refs An array of BCRs from the `refs` option. | ||
| * @param {...} el A reference to the Scrollify'd element | ||
| * | ||
| * CSS units such as `vh` and `vw` are converted, while the following functions | ||
| * are also supported: | ||
| * | ||
| * max(): returns the maximum value from a list of inputs | ||
| * css(): fetches the current CSS property value of an element | ||
| * | ||
| * @example "refs[3].bottom" | ||
| * @example "refs[4].top - 100vh" | ||
| * @example "refs[3].bottom - css(padding-top, refs[0]) - css(top, refs[0])", | ||
| * @example "max((100vh / refs[2].height), (100vw / refs[2].width)) + 0.02" | ||
| */ | ||
| function parseValue(val, refs = [], el) { | ||
| if (typeof val === 'number') { | ||
| return val; | ||
| } | ||
| // /** var(--top-spacing) **/ | ||
| // function var(str) { | ||
| // // ... returns a CSS var ie --top-padding | ||
| // } | ||
| // helper parsing functions | ||
| const css = (prop, el) => parseFloat(window.getComputedStyle(el)[prop]) || 0; | ||
| const max = (...args) => Math.max(...args); | ||
| const min = (...args) => Math.min(...args); | ||
| const pageHeight = document.body.scrollHeight; | ||
| const pageWidth = document.body.scrollWidth; | ||
| const screenWidth = window.innerWidth; | ||
| const screenHeight = window.innerHeight; | ||
| // with (refs) { | ||
| return new Function('refs', 'el', `'use strict';return (${val | ||
| .replace(/(\d*)vw/g, (match, v) => .01 * v * screenWidth) | ||
| .replace(/(\d*)vh/g, (match, v) => .01 * v * screenHeight) | ||
| .replace(/px/g, '') | ||
| });`)(refs, el); | ||
| } | ||
| /** | ||
| * The Scrollify Class | ||
@@ -22,29 +80,54 @@ */ | ||
| * @constructor | ||
| * @param {HTMLElement|String} element: The element to Scrollify. | ||
| * @param {HTMLElement} element: The element to Scrollify. | ||
| */ | ||
| constructor(element) { | ||
| if (element instanceof HTMLElement == false) { element = document.querySelector(element); } | ||
| if (!element || !transform) { | ||
| console.log('Scrollify [error] ', arguments[0]); | ||
| return this.disable(); | ||
| element = getRef(element); | ||
| if (!element) { | ||
| // throw new Error('Scrollify requires an `element`'); | ||
| document.querySelectorAll('[data-scrollify]').forEach((el) => new Scrollify(el)); | ||
| return; | ||
| } | ||
| if (element.dataset.scrollify) { | ||
| // ... parseDataAttribute(element) | ||
| // .. addScene() | ||
| } | ||
| this.scenes = []; // scenes = []; | ||
| 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], | ||
| scale: [1, 1], | ||
| rotation: [0, 0, 0], | ||
| position: [0, 0, 0], | ||
| // skew: [], | ||
| // transformOrigin: [0,0,0] | ||
| // skew: [], | ||
| }; | ||
| element.style.willChange = transform; | ||
| // scrollifys.push(this); | ||
| if (!initialized) { | ||
| initialized = true; | ||
| } | ||
| // else { | ||
| window.addEventListener('scroll', () => this.onScroll(), { passive: true }); | ||
| window.addEventListener('resize', () => this.onResize(), { passive: true }); | ||
| // } | ||
| } | ||
| parseDataAttribute(el) { | ||
| const parser = (str) => Function(`'use strict';return (${str})`)(); | ||
| return parser(el.dataset.scrollify); | ||
| } | ||
| /** | ||
@@ -72,77 +155,67 @@ * Add a new Scene to the Scrollify object. Scene information includes when | ||
| * | ||
| * @return {void} | ||
| */ | ||
| addScene(opts) { | ||
| 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, // 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, | ||
| effects: [] | ||
| }; | ||
| addScene(data) { | ||
| let { element, transforms } = this; | ||
| let { | ||
| start = 'el.top - 100vh', | ||
| end = 'el.bottom', | ||
| easing, | ||
| refs = [], | ||
| effects = {} | ||
| } = data; | ||
| effects.map((effect) => { | ||
| this.addEffect(effect.fn, effect.options, scene); | ||
| }); | ||
| // const calculateEffects = (r, el) => Object.keys(effects).reduce(this.addEffect, []); | ||
| const calculateEffects = (r, el) => Object.keys(effects).reduce((fx, name) => { | ||
| let value = effects[name]; | ||
| let fn; | ||
| let options; | ||
| this.calculateStart(scene); | ||
| this.calculateDuration(scene); | ||
| if (isFunc(value)) { | ||
| fn = value; | ||
| } else { | ||
| fn = Effects[name]; | ||
| options = isArray(value) ? value.map((v) => parseValue(v, r, el)) : value; | ||
| } | ||
| scene.state = (this.scroll > this.start) ? (this.scroll > this.start + scene.duration) ? 'after' : 'active' : 'before'; | ||
| fx.push(fn({ element, transforms, options })); | ||
| this.calculate(scene); | ||
| this.scenes.push(scene); | ||
| return fx; | ||
| }, []); | ||
| if (opts.debug) { | ||
| console.log('Scrollify scene: ', scene); | ||
| } | ||
| let scene = { | ||
| start: 0, | ||
| duration: 0, | ||
| state: '', | ||
| easing: isFunc(easing) ? easing : Easings[easing], | ||
| effects: [], | ||
| reset: () => { | ||
| const scroll = window.scrollY; | ||
| const el = getPosition(element); | ||
| const r = calculateRefs(refs); | ||
| const s = parseValue(start, r, el); | ||
| const e = parseValue(end, r, el); | ||
| const fx = calculateEffects(r, el); | ||
| return this; | ||
| } | ||
| scene.effects = fx; | ||
| scene.start = s; | ||
| scene.duration = e - s; | ||
| scene.state = (scroll > s) ? (scroll > e) ? 'after' : 'active' : 'before'; | ||
| /** | ||
| * Update each scene. | ||
| * @param {Object} scene: The scene to update. | ||
| * @return {void} | ||
| */ | ||
| updateScene(scene) { | ||
| this.calculateStart(scene); | ||
| this.calculateDuration(scene); | ||
| this.calculate(scene); | ||
| } | ||
| this.update(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} | ||
| */ | ||
| addEffect(fn, options = {}, scene) { | ||
| const element = this.element; | ||
| const transforms = this.transforms; | ||
| const context = { options, element, transforms }; | ||
| if (data.skipMatrix) { | ||
| // scene.skipMatrix = scene.effects.every((fn) => fn.skipMatrix); | ||
| // internal-use only. Whether to use matrix transforms or not. | ||
| scene.skipMatrix = true; | ||
| } | ||
| 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': [{'fn': fn, 'options': options}] | ||
| }); | ||
| } | ||
| scene.reset(); | ||
| if (data.debug) { | ||
| console.log('Scrollify scene: ', scene); | ||
| } | ||
| // if any effect uses a matrix tranformation, we use true for the entire scene | ||
| scene._applyTransform = scene._applyTransform || fn._applyTransform; | ||
| scene.effects.push(fn.bind(context)); | ||
| // scene.effects.push(() => { fn.call(context); }); | ||
| this.scenes.push(scene); | ||
@@ -152,55 +225,31 @@ return this; | ||
| /** | ||
| * Calculate the start point of each scene. | ||
| * @param {Scrollify.Scene} scene A Scrollify Scene object. | ||
| * @return {Integer} The start position of the Scene, in pixels. | ||
| */ | ||
| calculateStart(scene) { | ||
| const offset = window.innerHeight - this.mapTo(scene._offset, window.innerHeight); | ||
| let trigger = scene._trigger; | ||
| let top = 0; | ||
| do { | ||
| top += trigger.offsetTop || 0; | ||
| trigger = trigger.offsetParent; | ||
| } while(trigger); | ||
| // var test = trigger.getBoundingClientRect().top + (window.scrollY || window.pageYOffset); | ||
| scene.start = Math.max(0, top - offset); | ||
| } | ||
| /** | ||
| * [mapTo description] | ||
| * @param {[type]} input [description] | ||
| * @param {[type]} scale [description] | ||
| * @return {[type]} [description] | ||
| */ | ||
| mapTo(input, scale) { | ||
| const parsed = parseFloat(input); | ||
| const unit = getUnit(input); | ||
| * Adds an effect to a scene. | ||
| * @param {array} fx A reference to the `effects` array | ||
| * @param {string} name The name of the effect to add | ||
| * @param {number} i ignore for now | ||
| * @param {object} effects A reference to ... . | ||
| * / | ||
| addEffect(fx, name, i, effects) { | ||
| let value = effects[name]; | ||
| let options; | ||
| let fn; | ||
| switch (unit) { | ||
| case 'px': | ||
| return parsed; | ||
| case '%': | ||
| return parsed / 100.0 * scale; | ||
| default: | ||
| return parsed * scale; | ||
| if (typeof value == 'function') { | ||
| fn = value; | ||
| } else { | ||
| fn = Effects[name]; | ||
| // if (!fn) { throw Error(`${name} not recognized`); } | ||
| options = value.map((val) => parseValue(val, r, el)); | ||
| } | ||
| } | ||
| /** | ||
| * [calculateDuration description] | ||
| * @param {[type]} scene [description] | ||
| * @return [type] [description] | ||
| */ | ||
| calculateDuration(scene) { | ||
| scene.duration = (typeof scene._duration === 'function') ? | ||
| scene._duration(scene._trigger) : | ||
| this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight); | ||
| fx.push(fn({ element, transforms, options })); | ||
| return fx; | ||
| } | ||
| /** | ||
| * onScroll Handler | ||
| * @return {void} | ||
| */ | ||
@@ -210,41 +259,30 @@ onScroll() { | ||
| this.scroll = window.scrollY || window.pageYOffset; | ||
| this.direction = (this.scroll > this.previousScroll) ? 'down' : 'up'; | ||
| this.previousScroll = this.scroll; | ||
| if (!this.ticking) { | ||
| window.requestAnimationFrame(this.update.bind(this)); | ||
| // window.requestAnimationFrame(() => { this.update(); }); | ||
| this.ticking = true; | ||
| } | ||
| window.requestAnimationFrame(() => { | ||
| this.scenes.forEach((s) => this.update(s), this); | ||
| }); | ||
| } | ||
| /** | ||
| * onResize Handler | ||
| * onResize handler | ||
| * TODO: debounce? | ||
| * @return {void} | ||
| */ | ||
| onResize() { | ||
| this.scenes.forEach(this.updateScene, this); | ||
| this.scenes.forEach((s) => s.reset()); | ||
| } | ||
| /** | ||
| * Update the transformations for every scene. | ||
| * @return {void} | ||
| */ | ||
| 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} | ||
| * Update the transformation effects for each scene. | ||
| * @param {object} scene The `scene` object. | ||
| * @param {number} scene.start When the `scene` is active and effects calculated. | ||
| * @param {number} scene.duration How long the scene is "active" for, in px. | ||
| * @param {array} scene.effects An array of effects to apply to the `element`. | ||
| * @param {string} scene.state A label for the scene's running state. | ||
| * @param {function} scene.easing Custom easing for the progress value. | ||
| */ | ||
| calculate(scene) { | ||
| const start = scene.start; | ||
| const duration = scene.duration; | ||
| const scroll = this.scroll; | ||
| update(scene) { | ||
| const { start, duration, easing, effects } = scene; | ||
| const scroll = window.scrollY; | ||
| let progress; | ||
@@ -273,4 +311,4 @@ | ||
| scene.state = 'active'; | ||
| if (scene.easing) { // start, from, to, end | ||
| progress = scene.easing(scroll - start, 0, 1, duration); | ||
| if (easing) { // start, from, to, end | ||
| progress = easing(scroll - start, 0, 1, duration); | ||
| } else { | ||
@@ -282,54 +320,52 @@ progress = (scroll - start) / duration; | ||
| // cycle through any registered transformations | ||
| scene.effects.forEach((effect) => { | ||
| effect(progress); | ||
| }); | ||
| effects.forEach((effect) => effect(progress)); | ||
| if (scene._applyTransform) { | ||
| // transmogrify all applied transformations into a single matrix, and apply | ||
| let matrix = this.updateMatrix(); | ||
| this.element.style[transform] = matrix.asCSS(); | ||
| } | ||
| if (scene.skipMatrix) { return; } | ||
| // transmogrify all applied transformations into a single matrix, and apply | ||
| this.element.style[transform] = this.updateMatrix().asCSS(); | ||
| } | ||
| /** | ||
| * Loop through all the element's transformation data and calculates a matrix representing it. | ||
| * @return {Matrix} Ye olde Matrix | ||
| * @return {object} Ye olde Matrix | ||
| */ | ||
| updateMatrix() { | ||
| let t = this.transforms; | ||
| let m = this.matrix; | ||
| let { matrix, transforms: t } = this; | ||
| m.clear(); | ||
| matrix.clear(); | ||
| // here we adjust the transformOrigin ... | ||
| if (t.transformOrigin) { | ||
| m.translate(-t.transformOrigin[0], -t.transformOrigin[1], -t.transformOrigin[2]); | ||
| matrix.translate(-t.transformOrigin[0], -t.transformOrigin[1], -t.transformOrigin[2]); | ||
| } | ||
| if (t.scale) { | ||
| m.scale(t.scale[0], t.scale[1]); | ||
| matrix.scale(t.scale[0], t.scale[1]); | ||
| } | ||
| if (t.skew) { | ||
| m.skew(t.skew[0], t.skew[1]); | ||
| matrix.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]); | ||
| matrix.rotateX(t.rotation[0]); | ||
| matrix.rotateY(t.rotation[1]); | ||
| matrix.rotateZ(t.rotation[2]); | ||
| } | ||
| if (t.position) { | ||
| m.translate(t.position[0], t.position[1], t.position[2]); | ||
| matrix.translate(t.position[0], t.position[1], t.position[2]); | ||
| } | ||
| // ... and here we put it back. (This duplication is not a mistake). | ||
| // ...and here we put it back. | ||
| if (t.transformOrigin) { | ||
| m.translate(t.transformOrigin[0], t.transformOrigin[1], t.transformOrigin[2]); | ||
| matrix.translate(t.transformOrigin[0], t.transformOrigin[1], t.transformOrigin[2]); | ||
| } | ||
| return m; | ||
| return matrix; | ||
| } | ||
| /** | ||
@@ -336,0 +372,0 @@ * Disable Scrollify-ing. Perhaps for performance reasons / mobile devices. |
@@ -0,14 +1,15 @@ | ||
| /** | ||
| * Feature detection: CSS transforms | ||
| * @type {Boolean} | ||
| * Debounce | ||
| * @param {*} callback The function to execute | ||
| * @param {*} wait The time to wait before the callback if fired. | ||
| */ | ||
| export let transform = false; | ||
| if (typeof window !== 'undefined') { | ||
| const dummy = document.createElement('div'); | ||
| export function debounce(callback, wait = 250) { | ||
| let timer; | ||
| return (...args) => { | ||
| clearTimeout(timer); | ||
| timer = setTimeout(() => callback(...args), wait); | ||
| }; | ||
| }; | ||
| ['transform', 'webkitTransform', 'MozTransform', 'OTransform', 'msTransform'].forEach((t) => { | ||
| if (dummy.style[t] !== undefined) { transform = t; } | ||
| }); | ||
| } | ||
| /** | ||
@@ -24,1 +25,38 @@ * getUnit(), from anime.js | ||
| /** | ||
| * [mapTo description] | ||
| * @param {any} input [description] | ||
| * @param {number} scale [description] | ||
| * @return {number} [description] | ||
| */ | ||
| export function 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; | ||
| } | ||
| } | ||
| export const isArray = (n) => Array.isArray(n); | ||
| export const isFunc = (n) => typeof n === 'function'; | ||
| export const getRef = (el) => el instanceof HTMLElement ? el : document.querySelector(el); | ||
| export const getPosition = (el) => { | ||
| const bcr = el.getBoundingClientRect(); | ||
| return { | ||
| left: bcr.left + window.pageXOffset, | ||
| right: bcr.right + window.pageXOffset, | ||
| top: bcr.top + window.pageYOffset, | ||
| bottom: bcr.bottom + window.pageYOffset, | ||
| height: bcr.height, | ||
| width: bcr.width | ||
| }; | ||
| }; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by9.38%
70
Worsened metrics
- Total package byte prevSize
- decreased by-90.84%
70943
- Dev dependency count
- increased by16.67%
7
- Number of package files
- decreased by-65.85%
14
- Lines of code
- decreased by-70.9%
1103
- Number of medium supply chain risk alerts
- increased byInfinity%
3
No dependency changes