diff --git a/hollow.js b/hollow.js new file mode 100644 index 0000000..b498cb3 --- /dev/null +++ b/hollow.js @@ -0,0 +1,116 @@ +"use strict"; + +/** + * @author Arsen Mirzaev Tatyano-Muradovich + */ +class hollow { + // Размытие дальних слоёв + blur = true; + + // Затемнение дальних слоёв + blackout = false; + + // Увеличение размера дальнего слоя до краёв + expand = false; + + next() { + // Инициализация идентификатора активного слоя + const current = this.current(); + + // Генерация с защитой от выхода за предел масштабирования + this.generate( + current === document.getElementsByTagName("section").length - 1 + ? current + : current + 1 + ); + } + + previous() { + // Инициализация идентификатора активного слоя + const current = this.current(); + + // Генерация с защитой от выхода за предел масштабирования + this.generate(current === 0 ? current : current - 1); + } + + current() { + // Инициализация номера слоя + let id = 0; + + for (const layer of document.getElementsByTagName("section")) { + // Перебор слоёв + + // Поиск активного слоя + if (layer.style.scale === "1") return id; + + // Запись идентификатора следующего слоя + ++id; + } + } + + generate(zoom = 0) { + // Инициализация номера слоя + let id = 1; + + for (const layer of document.getElementsByTagName("section")) { + // Перебор слоёв + + // Запись размера + layer.style.scale = (zoom * 0.2 + 1 - 0.2 * (id - 1)).toFixed(1); + + // Запись минимального размера + if (+layer.style.scale < 0) layer.style.scale = 0; + + // Запись максимального размера + if (+layer.style.scale > 2) layer.style.scale = 2; + + // Запись индекса + layer.style.zIndex = zoom * 100 + 100 - id * 100; + + if (this.expand && +layer.style.scale < 1) { + // Расширение слоёв до границ + + // Запись степени расширения + const expand = +layer.style.scale <= 0.1 ? 0.1 : layer.style.scale; + + layer.style.width = "calc(100% / " + expand + ")"; + layer.style.height = "calc(100% / " + expand + ")"; + layer.style.left = "calc((-100% / " + expand + " + 100%) / 2)"; + layer.style.top = "calc((-100% / " + expand + " + 100%) / 2)"; + } + + if (+layer.style.scale <= 0 || +layer.style.scale > 1) { + // Слой вышел за рамки отображаемых размеров + + // Запись прозрачности + layer.style.opacity = 0; + } else if (+layer.style.scale === 1) { + // Активный слой + + // Запись эффектов + layer.style.filter = null; + + // Запись прозрачности + layer.style.opacity = 1; + } else { + // Дальние слои + + // Запись эффектов + if (this.blur) + layer.style.filter = "blur(" + (4 - layer.style.scale * 2) + "px)"; + if (this.blackout) + layer.style.filter += "brightness(" + layer.style.scale * 100 + "%)"; + + // Запись прозрачности + layer.style.opacity = layer.style.scale - 0.2; + } + + // Запись активности слушателей + if (id === zoom + 1) layer.style.pointerEvents = "all"; + else layer.style.pointerEvents = "none"; + + // Запись идентификатора следующего слоя + ++id; + } + } +}