vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
152 lines • 6.09 kB
JavaScript
import { clamp } from '../../../../utils';
import { parallaxAttributes, parallaxGroups, parallaxTypes } from './constants';
import { parallaxAttrPrefix } from './globals';
export class SnapSlideParallax {
constructor(_snap, _slide, _element) {
this._snap = _snap;
this._slide = _slide;
this._element = _element;
this._types = [];
this._items = [];
this._debounceInit = null;
this._initDebounce();
this._observer = new MutationObserver((mutations) => {
mutations.forEach(({ attributeName }) => {
if (attributeName && parallaxAttributes.includes(attributeName)) {
this._initDebounce();
}
});
});
this._observer.observe(this._element, { attributes: true });
}
/** Initialize parallax with debounce */
_initDebounce() {
if (this._debounceInit) {
clearTimeout(this._debounceInit);
}
this._debounceInit = setTimeout(() => this._init(), 16);
}
/** Initialize parallax */
_init() {
this._updateItems();
this.render();
}
/** Update parallax items */
_updateItems() {
const element = this._element;
const defaultScope = this._getScope(this._element, `${parallaxAttrPrefix}scope`, [-1, 1]);
this._types = parallaxTypes.filter(({ n }) => element.hasAttribute(n));
this._items = this._types.map(({ n, p, u: defaultUnit, isAbs: isAbsProp, modifier }) => {
var _a;
const group = parallaxGroups.find(
// eslint-disable-next-line @typescript-eslint/no-extra-non-null-assertion
({ types }) => types.find((type) => type.n === n));
const scopeAttr = `${n}-scope`;
const scope = element.hasAttribute(scopeAttr)
? this._getScope(element, scopeAttr, [-1, 1])
: defaultScope;
const attrValue = this._getAttr(element, n);
const unit = attrValue.replace(/[-\d.]+/g, '') || defaultUnit;
const target = this._getFloatAttr(element, n, 0);
const offset = this._getFloatAttr(element, `${n}-offset`, 0);
const min = this._getFloatAttr(element, `${n}-min`, -Infinity);
const max = this._getFloatAttr(element, `${n}-max`, Infinity);
const influenceAttr = `${n}-influence`;
const influence = element.hasAttribute(influenceAttr)
? this._getFloatAttr(element, `${n}-influence`, 1)
: 0;
const directionalAttr = `${n}-directional`;
const isDirectional = element.hasAttribute(directionalAttr);
const absAttr = `${n}-abs`;
const isAbs = isAbsProp || element.hasAttribute(absAttr);
return {
n,
p,
u: unit,
group: (_a = group === null || group === void 0 ? void 0 : group.name) !== null && _a !== void 0 ? _a : '',
modifier,
scope,
progress: 0,
target,
value: 0,
offset,
min,
max,
influence,
isDirectional,
isAbs,
};
});
}
/** Get parallax attribute */
_getAttr(element, name) {
var _a;
return (_a = element.getAttribute(name)) !== null && _a !== void 0 ? _a : '';
}
/** Get parallax float attribute */
_getFloatAttr(element, name, defaultValue) {
const float = parseFloat(this._getAttr(element, name));
return Number.isNaN(float) ? defaultValue : float;
}
/** Get parallax scope */
_getScope(element, name, defaultValue) {
const attrValue = this._getAttr(element, name);
const attrStringValue = attrValue.trim().toLowerCase();
if (attrStringValue === 'none') {
return [-Infinity, Infinity];
}
if (attrStringValue === 'const') {
return [1, 1];
}
const cleanValue = attrValue.replace(/[\s\\[\]]+/g, '');
const minMax = cleanValue.split(',');
const minRaw = parseFloat(minMax[0]);
const maxRaw = parseFloat(minMax[1]);
const min = Number.isNaN(minRaw) ? defaultValue[0] : minRaw;
const max = Number.isNaN(maxRaw) ? defaultValue[1] : maxRaw;
return [min, max];
}
/** Render parallax */
render() {
const { _snap: snap, _element: element, _items: items, _slide: slide, } = this;
const globalProgress = slide.progress;
// Calculate parallax values
items.forEach((item) => {
let progress = clamp(globalProgress, ...item.scope);
if (Math.abs(item.influence) > 0) {
progress *= Math.abs(snap.influence) * item.influence;
}
if (item.isDirectional) {
progress = Math.abs(progress) * Math.sign(snap.influence);
}
if (item.isAbs) {
progress = Math.abs(progress);
}
item.progress = progress;
item.value = item.offset + progress * item.target;
if (item.modifier) {
item.value = item.modifier(item.value);
}
item.value = clamp(item.value, item.min, item.max);
});
parallaxGroups.forEach(({ name: groupName }) => {
const groupItems = items.filter((item) => item.group === groupName);
const styles = groupItems.map(({ value, p, u }) => {
if (groupName === 'opacity') {
return `${value}`;
}
return `${p}(${value}${u})`;
});
const styleString = styles.join(' ');
element.style[groupName] = styleString;
});
}
/** Destroy parallax */
destroy() {
this._observer.disconnect();
if (this._debounceInit) {
clearTimeout(this._debounceInit);
}
}
}
//# sourceMappingURL=index.js.map