You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.3 KiB
101 lines
3.3 KiB
$(function () {
|
|
AOS.init({
|
|
duration: 800,
|
|
});
|
|
const lenis = new Lenis();
|
|
gsap.registerPlugin(ScrollTrigger, SplitText);
|
|
|
|
// Lenis 与 GSAP ScrollTrigger 同步（保证触发点准确）
|
|
lenis.on('scroll', ScrollTrigger.update);
|
|
gsap.ticker.add((time) => {
|
|
lenis.raf(time * 1000);
|
|
});
|
|
gsap.ticker.lagSmoothing(0);
|
|
|
|
const $header = $('.site-header');
|
|
// 任意带 data-header-dark 的区块：滚入「顶贴视口上沿」区间时顶栏加 .dark（与具体 class 解耦）
|
|
const $targets = $('[data-header-dark]');
|
|
const active = new Set();
|
|
const setHeaderDark = () => {
|
|
$header.toggleClass('dark', active.size > 0);
|
|
};
|
|
|
|
$targets.each(function () {
|
|
const el = this;
|
|
ScrollTrigger.create({
|
|
trigger: el,
|
|
start: 'top top',
|
|
end: 'bottom top',
|
|
onEnter: () => {
|
|
active.add(el);
|
|
setHeaderDark();
|
|
},
|
|
onEnterBack: () => {
|
|
active.add(el);
|
|
setHeaderDark();
|
|
},
|
|
onLeave: () => {
|
|
active.delete(el);
|
|
setHeaderDark();
|
|
},
|
|
onLeaveBack: () => {
|
|
active.delete(el);
|
|
setHeaderDark();
|
|
},
|
|
});
|
|
});
|
|
|
|
ScrollTrigger.refresh();
|
|
|
|
/* 在768px以下时，navbar-collapse增加class glass-card*/
|
|
// 初始化
|
|
if ($(window).width() <= 768) {
|
|
$('#navbarCollapse').addClass('glass-card');
|
|
}
|
|
$(window).on('resize', function () {
|
|
if ($(window).width() <= 768) {
|
|
$('#navbarCollapse').addClass('glass-card');
|
|
} else {
|
|
$('#navbarCollapse').removeClass('glass-card');
|
|
}
|
|
});
|
|
|
|
// mask：遮罩渐显（CSS）+ SplitText 按行从上向下错开出现
|
|
const maskEl = document.querySelector('.mask');
|
|
const maskContentEl = document.querySelector('.mask-content');
|
|
|
|
const $maskToggles = $('.site-header__icon-btn.toggle, .mask-header__icon-btn.toggle');
|
|
|
|
function setMaskOpenUi(isOpen) {
|
|
$('body').toggleClass('is-mask-open', isOpen);
|
|
$maskToggles.attr('aria-expanded', isOpen ? 'true' : 'false');
|
|
$maskToggles.attr('aria-label', isOpen ? '关闭导航菜单' : '打开导航菜单');
|
|
}
|
|
|
|
$('.site-header__icon-btn.toggle').on('click', function () {
|
|
if (!maskEl || !maskContentEl) return;
|
|
const nodes = maskContentEl.querySelectorAll('h4, a');
|
|
$(maskEl).addClass('show mask--nav-motion');
|
|
$('body').css('overflow', 'hidden');
|
|
setMaskOpenUi(true);
|
|
gsap.killTweensOf(nodes);
|
|
gsap.from(nodes, {
|
|
opacity: 0,
|
|
stagger: 0.02,
|
|
delay: 0.35,
|
|
overwrite: 'auto',
|
|
onComplete: function () {
|
|
maskEl.classList.remove('mask--nav-motion');
|
|
gsap.set(nodes, { clearProps: 'opacity' });
|
|
},
|
|
});
|
|
});
|
|
|
|
$('.mask-header__icon-btn.toggle').on('click', function () {
|
|
if (!maskEl || !maskContentEl) return;
|
|
gsap.killTweensOf(maskContentEl.querySelectorAll('h4, a'));
|
|
$(maskEl).removeClass('show mask--nav-motion');
|
|
$('body').css('overflow', 'auto');
|
|
setMaskOpenUi(false);
|
|
});
|
|
});
|