/* ============================================ ANIMATIONS.JS — Скрипт анімацій сайту Craft Cat Art Store ============================================ БЕЗПЕЧНИЙ для роботи поруч з іншими скриптами: - Весь код в IIFE — жодних глобальних змінних крім window.CraftCatAnimations - destroy() чистить ТІЛЬКИ свої observer'и, listener'и, інтервали - Захист від подвійної ініціалізації (debounce) - Кожен модуль перевіряє наявність СВОЇХ елементів і пропускає, якщо їх немає АВТОМАТИЧНЕ ВИЯВЛЕННЯ НАВІГАЦІЇ: - URL-polling кожні 200мс — якщо URL змінився, автоматично reinit - Працює з БУДЬ-ЯКИМ роутером без доступу до його коду - Не реагує на чужі зміни DOM (чат-віджети, банери тощо) ПІДКЛЮЧЕННЯ: ============================================ */ (function () { 'use strict'; // ============================================ // СТАН — ізольований всередині IIFE // ============================================ var state = { hasAnimated: false, visibleCards: new Set(), counts: { years: 0, clients: 0, products: 0 }, currentTestimonial: 0, catProgress: 0, scrollAccumulator: 0, touchStartY: 0, autoPlayInterval: null, counterInterval: null, initialized: false, lastInitTime: 0 }; var TARGETS = { years: 6, clients: 10000, products: 2000 }; // Посилання на СВОЇ observer'и (чужі не чіпаємо) var observers = { stats: null, cards: null, bonus: null, perev: null, anim: null }; // Іменовані обробники (щоб коректно removeEventListener) var handlers = { wheel: null, touchStart: null, touchMove: null, scroll: null }; // Посилання на listener'и кнопок слайдера var sliderHandlers = { prev: null, next: null, prevBtn: null, nextBtn: null }; // ============================================ // URL-POLLING — автоматичне виявлення навігації // ============================================ var lastUrl = location.href; var urlPollInterval = null; function startUrlPolling() { // Не запускаємо повторно if (urlPollInterval) return; lastUrl = location.href; urlPollInterval = setInterval(function () { var currentUrl = location.href; if (currentUrl !== lastUrl) { lastUrl = currentUrl; // URL змінився → навігація відбулась // Чекаємо 150мс — даємо роутеру час вставити новий контент у DOM setTimeout(function () { scheduleInit(); }, 150); } }, 200); } function stopUrlPolling() { if (urlPollInterval) { clearInterval(urlPollInterval); urlPollInterval = null; } } // ============================================ // ДОПОМІЖНІ ФУНКЦІЇ // ============================================ function findElement() { for (var i = 0; i < arguments.length; i++) { var el = document.getElementById(arguments[i]); if (el) return el; } return null; } function formatNumber(num) { return num.toLocaleString('uk-UA').replace(/,/g, ' '); } // ============================================ // DESTROY — чистимо ТІЛЬКИ свої ресурси // ============================================ function destroy() { // 1. Свої IntersectionObserver Object.keys(observers).forEach(function (key) { if (observers[key]) { observers[key].disconnect(); observers[key] = null; } }); // 2. Свої window event listeners if (handlers.wheel) { window.removeEventListener('wheel', handlers.wheel); handlers.wheel = null; } if (handlers.touchStart) { window.removeEventListener('touchstart', handlers.touchStart); handlers.touchStart = null; } if (handlers.touchMove) { window.removeEventListener('touchmove', handlers.touchMove); handlers.touchMove = null; } if (handlers.scroll) { window.removeEventListener('scroll', handlers.scroll); handlers.scroll = null; } // 3. Свої listener'и на кнопках слайдера (без клонування!) if (sliderHandlers.prevBtn && sliderHandlers.prev) { sliderHandlers.prevBtn.removeEventListener('click', sliderHandlers.prev); } if (sliderHandlers.nextBtn && sliderHandlers.next) { sliderHandlers.nextBtn.removeEventListener('click', sliderHandlers.next); } sliderHandlers.prev = null; sliderHandlers.next = null; sliderHandlers.prevBtn = null; sliderHandlers.nextBtn = null; // 4. Свої інтервали (НЕ чіпаємо urlPollInterval — він працює завжди) if (state.autoPlayInterval) { clearInterval(state.autoPlayInterval); state.autoPlayInterval = null; } if (state.counterInterval) { clearInterval(state.counterInterval); state.counterInterval = null; } // 5. Скидаємо стан state.hasAnimated = false; state.visibleCards = new Set(); state.counts = { years: 0, clients: 0, products: 0 }; state.currentTestimonial = 0; state.catProgress = 0; state.scrollAccumulator = 0; state.touchStartY = 0; state.initialized = false; } // ============================================ // ЛІЧИЛЬНИКИ (Stats Section) // ============================================ var animateCountersFn = null; function initCounters() { var statsSection = findElement('stats-section', 'statsSection'); var yearsCounter = findElement('years-counter', 'yearsCounter'); var clientsCounter = findElement('clients-counter', 'clientsCounter'); var productsCounter = findElement('products-counter', 'productsCounter'); if (!statsSection || !yearsCounter || !clientsCounter || !productsCounter) { animateCountersFn = null; return; } yearsCounter.textContent = '0+'; clientsCounter.textContent = '0+'; productsCounter.textContent = '0+'; animateCountersFn = function () { if (state.hasAnimated) return; state.hasAnimated = true; var duration = 1200; var frameRate = 1000 / 60; var totalFrames = Math.round(duration / frameRate); var frame = 0; if (state.counterInterval) clearInterval(state.counterInterval); state.counterInterval = setInterval(function () { frame++; var progress = frame / totalFrames; var ease = 1 - Math.pow(1 - progress, 3); state.counts.years = Math.floor(ease * TARGETS.years); state.counts.clients = Math.floor(ease * TARGETS.clients); state.counts.products = Math.floor(ease * TARGETS.products); yearsCounter.textContent = state.counts.years + '+'; clientsCounter.textContent = formatNumber(state.counts.clients) + '+'; productsCounter.textContent = state.counts.products + '+'; if (frame >= totalFrames) { clearInterval(state.counterInterval); state.counterInterval = null; yearsCounter.textContent = TARGETS.years + '+'; clientsCounter.textContent = formatNumber(TARGETS.clients) + '+'; productsCounter.textContent = TARGETS.products + '+'; } }, frameRate); }; observers.stats = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (entry.isIntersecting && !state.hasAnimated && animateCountersFn) { animateCountersFn(); } }); }, { threshold: 0.3 }); observers.stats.observe(statsSection); } // ============================================ // КАРТКИ (card-wrapper) // ============================================ function initCards() { var cardWrappers = document.querySelectorAll('.card-wrapper'); if (!cardWrappers.length) return; cardWrappers.forEach(function (el) { el.classList.remove('visible'); }); observers.cards = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (entry.isIntersecting && entry.intersectionRatio >= 0.9) { var cardIndex = parseInt(entry.target.dataset.card, 10); if (!state.visibleCards.has(cardIndex)) { setTimeout(function () { entry.target.classList.add('visible'); state.visibleCards.add(cardIndex); }, cardIndex * 150); } } }); }, { threshold: 0.9, rootMargin: '0px' }); cardWrappers.forEach(function (card) { observers.cards.observe(card); }); } // ============================================ // БОНУС-КАРТКИ (bonus-card) // ============================================ function initBonusCards() { var bonusCards = document.querySelectorAll('.bonus-card'); if (!bonusCards.length) return; bonusCards.forEach(function (el) { el.classList.remove('visible'); }); observers.bonus = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (entry.isIntersecting) { var cards = Array.from(bonusCards); var index = cards.indexOf(entry.target); setTimeout(function () { entry.target.classList.add('visible'); }, index * 200); } }); }, { threshold: 0.3, rootMargin: '-100px' }); bonusCards.forEach(function (card) { observers.bonus.observe(card); }); } // ============================================ // ПЕРЕВ-КАРТКИ (perev-card) // ============================================ function initPerevCards() { var perevCards = document.querySelectorAll('.perev-card'); if (!perevCards.length) return; perevCards.forEach(function (el) { el.classList.remove('visible'); }); observers.perev = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (entry.isIntersecting) { var cards = Array.from(perevCards); var index = cards.indexOf(entry.target); setTimeout(function () { entry.target.classList.add('visible'); }, index * 200); } }); }, { threshold: 0.3, rootMargin: '-100px' }); perevCards.forEach(function (card) { observers.perev.observe(card); }); } // ============================================ // УНІВЕРСАЛЬНІ .anim ЕЛЕМЕНТИ // (products-section, founder-section, та будь-які інші) // // Система класів: // .anim — базовий клас (початковий стан: прихований) // .anim-fade-left — з'їжджає зліва // .anim-fade-right — з'їжджає справа // .anim-fade-left-far — з'їжджає зліва (далекий) // .anim-fade-down — з'їжджає зверху // .anim-fade-up — з'їжджає знизу // .delay-1 ... .delay-8 — затримка (CSS transition-delay) // .in-view — елемент видимий → запускає анімацію // // Логіка: при init знімаємо .in-view → ставимо observer → // при входженні у viewport додаємо .in-view назад // ============================================ function initAnimElements() { var animEls = document.querySelectorAll('.anim'); if (!animEls.length) return; // 1. Знімаємо .in-view з усіх .anim елементів // (скидаємо анімацію для повторного запуску) animEls.forEach(function (el) { el.classList.remove('in-view'); }); // 2. Створюємо observer observers.anim = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (entry.isIntersecting) { // Додаємо .in-view — CSS-анімація запуститься entry.target.classList.add('in-view'); // Після додавання — більше не спостерігаємо (анімація одноразова) observers.anim.unobserve(entry.target); } }); }, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' }); // 3. Спостерігаємо за кожним .anim елементом animEls.forEach(function (el) { observers.anim.observe(el); }); } // ============================================ // СЛАЙДЕР ВІДГУКІВ // ============================================ function initTestimonials() { var slider = document.getElementById('testimonialsSlider'); var prevBtn = document.getElementById('prevBtn'); var nextBtn = document.getElementById('nextBtn'); var dotsContainer = document.getElementById('paginationDots'); if (!slider || !prevBtn || !nextBtn || !dotsContainer) return; var testimonials = [ { name: 'Testimonial 1' }, { name: 'Testimonial 2' }, { name: 'Testimonial 3' }, { name: 'Testimonial 4' }, { name: 'Testimonial 5' }, { name: 'Testimonial 6' }, { name: 'Testimonial 7' }, { name: 'Testimonial 8' }, { name: 'Testimonial 9' }, { name: 'Testimonial 10' }, { name: 'Testimonial 11' }, { name: 'Testimonial 12' }, { name: 'Testimonial 13' } ]; state.currentTestimonial = 0; dotsContainer.innerHTML = ''; testimonials.forEach(function (_, index) { var dot = document.createElement('button'); dot.className = 'pagination-dot' + (index === 0 ? ' active' : ''); dot.setAttribute('aria-label', 'Перейти до відгуку ' + (index + 1)); dot.addEventListener('click', function () { state.currentTestimonial = index; updateSlider(); }); dotsContainer.appendChild(dot); }); function updateSlider() { slider.style.transform = 'translateX(-' + state.currentTestimonial * 100 + '%)'; var dots = dotsContainer.querySelectorAll('.pagination-dot'); dots.forEach(function (dot, index) { dot.classList.toggle('active', index === state.currentTestimonial); }); } sliderHandlers.prev = function () { state.currentTestimonial = (state.currentTestimonial - 1 + testimonials.length) % testimonials.length; updateSlider(); }; sliderHandlers.next = function () { state.currentTestimonial = (state.currentTestimonial + 1) % testimonials.length; updateSlider(); }; sliderHandlers.prevBtn = prevBtn; sliderHandlers.nextBtn = nextBtn; prevBtn.addEventListener('click', sliderHandlers.prev); nextBtn.addEventListener('click', sliderHandlers.next); if (state.autoPlayInterval) clearInterval(state.autoPlayInterval); state.autoPlayInterval = setInterval(function () { if (state.catProgress < 1) { state.currentTestimonial = (state.currentTestimonial + 1) % testimonials.length; updateSlider(); } }, 5000); } // ============================================ // КОТИК-СКРОЛ АНІМАЦІЯ // ============================================ function initCatScroll() { var catSection = document.getElementById('catSection'); var catBody = document.getElementById('catBody'); if (!catSection || !catBody) return; state.catProgress = 0; state.scrollAccumulator = 0; function updateCatPosition() { var translateY = 150 - (state.catProgress * 130); catBody.style.transform = 'translateX(-50%) translateY(' + translateY + '%)'; } updateCatPosition(); handlers.wheel = function (e) { var rect = catSection.getBoundingClientRect(); var windowHeight = window.innerHeight; var isInViewport = rect.top <= windowHeight && rect.bottom >= 0; if (isInViewport && state.catProgress < 1 && e.deltaY > 0) { e.preventDefault(); state.scrollAccumulator += e.deltaY; state.catProgress = Math.min(Math.max(state.scrollAccumulator / 2000, 0), 1); updateCatPosition(); } else if (isInViewport && state.catProgress > 0 && e.deltaY < 0) { e.preventDefault(); state.scrollAccumulator += e.deltaY; state.catProgress = Math.min(Math.max(state.scrollAccumulator / 2000, 0), 1); updateCatPosition(); } }; handlers.touchStart = function (e) { state.touchStartY = e.touches[0].clientY; }; handlers.touchMove = function (e) { var rect = catSection.getBoundingClientRect(); var windowHeight = window.innerHeight; var isInViewport = rect.top <= windowHeight && rect.bottom >= 0; if (!isInViewport) return; var touchY = e.touches[0].clientY; var deltaY = state.touchStartY - touchY; if (state.catProgress < 1 && deltaY > 0) { e.preventDefault(); state.scrollAccumulator += deltaY * 2; state.catProgress = Math.min(Math.max(state.scrollAccumulator / 2000, 0), 1); updateCatPosition(); } else if (state.catProgress > 0 && deltaY < 0) { e.preventDefault(); state.scrollAccumulator += deltaY * 2; state.catProgress = Math.min(Math.max(state.scrollAccumulator / 2000, 0), 1); updateCatPosition(); } state.touchStartY = touchY; }; handlers.scroll = function () { var rect = catSection.getBoundingClientRect(); if (rect.top > window.innerHeight) { state.scrollAccumulator = 0; state.catProgress = 0; updateCatPosition(); } }; window.addEventListener('wheel', handlers.wheel, { passive: false }); window.addEventListener('touchstart', handlers.touchStart, { passive: false }); window.addEventListener('touchmove', handlers.touchMove, { passive: false }); window.addEventListener('scroll', handlers.scroll); } // ============================================ // ПРИМУСОВИЙ ЗАПУСК ДЛЯ ЕЛЕМЕНТІВ У VIEWPORT // ============================================ function forceAnimateVisible() { requestAnimationFrame(function () { var stats = findElement('stats-section', 'statsSection'); if (stats && !state.hasAnimated && animateCountersFn) { var rect = stats.getBoundingClientRect(); if (rect.top < window.innerHeight * 0.8 && rect.bottom > 0) { animateCountersFn(); } } document.querySelectorAll('.card-wrapper, .perev-card, .bonus-card, .card').forEach(function (el) { var rect = el.getBoundingClientRect(); if (rect.top < window.innerHeight * 0.9 && rect.bottom > 0) { el.classList.add('visible'); } }); // .anim елементи, які вже у viewport при завантаженні document.querySelectorAll('.anim:not(.in-view)').forEach(function (el) { var rect = el.getBoundingClientRect(); if (rect.top < window.innerHeight * 0.85 && rect.bottom > 0) { el.classList.add('in-view'); // Знімаємо зі спостереження, якщо observer ще активний if (observers.anim) { observers.anim.unobserve(el); } } }); }); } // ============================================ // ГОЛОВНА ІНІЦІАЛІЗАЦІЯ (з debounce-захистом) // ============================================ var initDebounceTimer = null; function scheduleInit() { clearTimeout(initDebounceTimer); initDebounceTimer = setTimeout(function () { doInit(); }, 50); } function doInit() { var now = Date.now(); if (now - state.lastInitTime < 100 && state.initialized) return; if (state.initialized) { destroy(); } state.lastInitTime = now; initCounters(); initCards(); initBonusCards(); initPerevCards(); initAnimElements(); initTestimonials(); initCatScroll(); forceAnimateVisible(); state.initialized = true; } // ============================================ // ПІДКЛЮЧЕННЯ ДО ПОДІЙ НАВІГАЦІЇ // ============================================ // 1. Перше завантаження if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function () { scheduleInit(); startUrlPolling(); // Запускаємо моніторинг URL }); } else { scheduleInit(); startUrlPolling(); } // 2. Повне завантаження ресурсів window.addEventListener('load', function () { setTimeout(forceAnimateVisible, 300); }); // 3. bfcache (кнопка "Назад" у браузері) window.addEventListener('pageshow', function (event) { if (event.persisted) { scheduleInit(); } }); // 4. Turbo / Turbolinks document.addEventListener('turbo:load', scheduleInit); document.addEventListener('turbolinks:load', scheduleInit); document.addEventListener('turbo:before-visit', destroy); document.addEventListener('turbolinks:before-visit', destroy); // 5. Barba.js document.addEventListener('barba:after', scheduleInit); // 6. HTMX document.addEventListener('htmx:afterSettle', scheduleInit); // 7. Swup.js document.addEventListener('swup:contentReplaced', scheduleInit); // 8. History API (popstate) window.addEventListener('popstate', scheduleInit); // ============================================ // ПУБЛІЧНИЙ API // ============================================ window.CraftCatAnimations = { init: function () { destroy(); doInit(); }, destroy: destroy, forceAnimate: forceAnimateVisible }; })();

Блокноти та скетчбуки