$maxWidth: 1920;
@mixin adaptiv($pcSize, $mobSize) {
$addSize: $pcSize - $mobSize;
$maxWidth: $maxWidth - 320;
$width: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
width:$width;
height:$width;
}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";
});
сайты у нас только в путь копируют \ клонируют... чет особо никто не напрягается.."
Вот пока самым правильным звучит это вариант