stylescape
Version:
Stylescape is a visual identity framework developed by Scape Agency.
83 lines • 2.87 kB
JavaScript
export class ContentRevealer {
constructor(selectorOrElements, options = {}) {
this.observer = null;
if (typeof selectorOrElements === "string") {
this.elements = Array.from(document.querySelectorAll(selectorOrElements));
}
else if (selectorOrElements instanceof HTMLElement) {
this.elements = [selectorOrElements];
}
else {
this.elements = Array.from(selectorOrElements);
}
this.options = {
delay: options.delay ?? 0,
duration: options.duration ?? 500,
easing: options.easing ?? "ease",
initialOpacity: options.initialOpacity ?? 0,
onScroll: options.onScroll ?? false,
threshold: options.threshold ?? 0.1,
};
this.init();
}
revealAll() {
this.elements.forEach((el) => this.reveal(el));
}
reveal(element) {
element.style.transition = `opacity ${this.options.duration}ms ${this.options.easing}`;
element.style.opacity = "1";
element.classList.add("reveal--visible");
element.setAttribute("data-ss-reveal-revealed", "true");
}
hide(element) {
element.style.opacity = String(this.options.initialOpacity);
element.classList.remove("reveal--visible");
element.removeAttribute("data-ss-reveal-revealed");
}
hideAll() {
this.elements.forEach((el) => this.hide(el));
}
destroy() {
if (this.observer) {
this.observer.disconnect();
this.observer = null;
}
}
init() {
this.elements.forEach((el) => {
el.style.opacity = String(this.options.initialOpacity);
el.style.transition = `opacity ${this.options.duration}ms ${this.options.easing}`;
});
if (this.options.onScroll) {
this.initIntersectionObserver();
}
else {
this.initLoadReveal();
}
}
initLoadReveal() {
const reveal = () => {
setTimeout(() => this.revealAll(), this.options.delay);
};
if (document.readyState === "complete") {
reveal();
}
else {
window.addEventListener("load", reveal);
}
}
initIntersectionObserver() {
this.observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const el = entry.target;
setTimeout(() => this.reveal(el), this.options.delay);
this.observer?.unobserve(el);
}
});
}, { threshold: this.options.threshold });
this.elements.forEach((el) => this.observer?.observe(el));
}
}
export default ContentRevealer;
//# sourceMappingURL=ContentRevealer.js.map