Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
import barba from '@barba/core'; import LocomotiveScroll from 'locomotive-scroll'; import gsap from 'gsap'; document.addEventListener('DOMContentLoaded', () => { const scroll = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true, smoothMobile: true, offset: ['3%', 100], lerp: 0.09, smartphone: { smooth: true } }); function pageIn() { gsap.to('#content', {}); } function pageOut() { gsap.to('#content', {}); } function pageDelay(num) { return new Promise((resolve) => { setTimeout(resolve, num); }); } barba.init({ transitions: [{ name: 'transition', async leave(data) { pageIn(); await pageDelay(1500); }, enter(data) { pageOut(); // Set <body> classes for 'next' page const nextHtml = data.next.html; const response = nextHtml.replace(/(<\/?)body( .+?)?>/gi, '$1notbody$2>', nextHtml); const bodyClasses = $(response).filter('notbody').attr('class'); $('body').attr('class', bodyClasses); }, async once(data) { pageIn(); await pageDelay(1000); pageOut(); } }] }); console.log(scroll); barba.hooks.beforeLeave(() => { scroll.scrollTo('top'); }); gsap.set('.cursor', { force3D: true }); document.addEventListener('mousemove', (e) => { const x = e.clientX; const y = e.clientY; gsap.to('.cursor', { x: x - 16, y: y - 16, ease: 'power3' }); }); document.body.addEventListener('mouseleave', () => { gsap.to('.cursor', { scale: 0, duration: 0.1, ease: 'none' }); }); document.body.addEventListener('mouseenter', () => { gsap.to('.cursor', { scale: 1, duration: 0.1, ease: 'none' }); }); const hoverCursor = document.querySelectorAll('a'); hoverCursor.forEach((cursor) => { cursor.addEventListener('mouseenter', () => { gsap.to('.cursor', { scale: 2 }); }); cursor.addEventListener('mouseleave', () => { gsap.to('.cursor', { scale: 1 }); }); }); }); // const options = { rootMargin: "0px", threshold: buildThresholdList() }; function buildThresholdList() { let thresholds = []; let numSteps = 10; for (let i=1.0; i<=numSteps; i++) { let ratio = i/numSteps; thresholds.push(ratio); } thresholds.push(0); return thresholds; } // ADD DATA ATTRIBUTE TO NAVIGATION ON SCROLL let colorChangeCallback = entries => { const header = document.querySelector("header"); entries.forEach(entry => { if (entry.isIntersecting) { let sectionColor = entry.target.getAttribute("data-background"); let viewport = window.innerHeight; let visibleHeight = entry.intersectionRect.height; if (visibleHeight / viewport >= 0.85) { console.log(entry.target) //intersection ratio bigger than 90% //-> set header according to target header.setAttribute("data-nav-color", sectionColor); } else { //-> check if element is coming from top or from bottom into view if (entry.target.getBoundingClientRect().top < 0) { header.setAttribute("data-nav-color", sectionColor); } } } }); }; let colorObserver = new IntersectionObserver(colorChangeCallback, options); document.querySelectorAll("section").forEach(section => { colorObserver.observe(section); // colorObserver.root.style.border = "2px solid #44aa44"; });
