mirror of
https://github.com/bytedance/deer-flow.git
synced 2026-05-24 08:55:59 +00:00
ci: enforce code formatting checks for backend and frontend (#1536)
This commit is contained in:
greatmengqi
+138
-135
@@ -1,177 +1,180 @@
|
||||
// Pride and Prejudice - Interactive Features
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Navigation scroll effect
|
||||
initNavigation();
|
||||
|
||||
// Quotes slider
|
||||
initQuotesSlider();
|
||||
|
||||
// Scroll reveal animations
|
||||
initScrollReveal();
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
initSmoothScroll();
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Navigation scroll effect
|
||||
initNavigation();
|
||||
|
||||
// Quotes slider
|
||||
initQuotesSlider();
|
||||
|
||||
// Scroll reveal animations
|
||||
initScrollReveal();
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
initSmoothScroll();
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// NAVIGATION SCROLL EFFECT
|
||||
// ============================================
|
||||
function initNavigation() {
|
||||
const nav = document.querySelector('.nav');
|
||||
let lastScroll = 0;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
// Add/remove scrolled class
|
||||
if (currentScroll > 100) {
|
||||
nav.classList.add('scrolled');
|
||||
} else {
|
||||
nav.classList.remove('scrolled');
|
||||
}
|
||||
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
const nav = document.querySelector(".nav");
|
||||
let lastScroll = 0;
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
// Add/remove scrolled class
|
||||
if (currentScroll > 100) {
|
||||
nav.classList.add("scrolled");
|
||||
} else {
|
||||
nav.classList.remove("scrolled");
|
||||
}
|
||||
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// QUOTES SLIDER
|
||||
// ============================================
|
||||
function initQuotesSlider() {
|
||||
const quotes = document.querySelectorAll('.quote-card');
|
||||
const dots = document.querySelectorAll('.quote-dot');
|
||||
let currentIndex = 0;
|
||||
let autoSlideInterval;
|
||||
|
||||
function showQuote(index) {
|
||||
// Remove active class from all quotes and dots
|
||||
quotes.forEach(quote => quote.classList.remove('active'));
|
||||
dots.forEach(dot => dot.classList.remove('active'));
|
||||
|
||||
// Add active class to current quote and dot
|
||||
quotes[index].classList.add('active');
|
||||
dots[index].classList.add('active');
|
||||
|
||||
currentIndex = index;
|
||||
}
|
||||
|
||||
function nextQuote() {
|
||||
const nextIndex = (currentIndex + 1) % quotes.length;
|
||||
showQuote(nextIndex);
|
||||
}
|
||||
|
||||
// Dot click handlers
|
||||
dots.forEach((dot, index) => {
|
||||
dot.addEventListener('click', () => {
|
||||
showQuote(index);
|
||||
resetAutoSlide();
|
||||
});
|
||||
const quotes = document.querySelectorAll(".quote-card");
|
||||
const dots = document.querySelectorAll(".quote-dot");
|
||||
let currentIndex = 0;
|
||||
let autoSlideInterval;
|
||||
|
||||
function showQuote(index) {
|
||||
// Remove active class from all quotes and dots
|
||||
quotes.forEach((quote) => quote.classList.remove("active"));
|
||||
dots.forEach((dot) => dot.classList.remove("active"));
|
||||
|
||||
// Add active class to current quote and dot
|
||||
quotes[index].classList.add("active");
|
||||
dots[index].classList.add("active");
|
||||
|
||||
currentIndex = index;
|
||||
}
|
||||
|
||||
function nextQuote() {
|
||||
const nextIndex = (currentIndex + 1) % quotes.length;
|
||||
showQuote(nextIndex);
|
||||
}
|
||||
|
||||
// Dot click handlers
|
||||
dots.forEach((dot, index) => {
|
||||
dot.addEventListener("click", () => {
|
||||
showQuote(index);
|
||||
resetAutoSlide();
|
||||
});
|
||||
|
||||
// Auto-slide functionality
|
||||
function startAutoSlide() {
|
||||
autoSlideInterval = setInterval(nextQuote, 6000);
|
||||
}
|
||||
|
||||
function resetAutoSlide() {
|
||||
clearInterval(autoSlideInterval);
|
||||
startAutoSlide();
|
||||
}
|
||||
|
||||
// Start auto-slide
|
||||
});
|
||||
|
||||
// Auto-slide functionality
|
||||
function startAutoSlide() {
|
||||
autoSlideInterval = setInterval(nextQuote, 6000);
|
||||
}
|
||||
|
||||
function resetAutoSlide() {
|
||||
clearInterval(autoSlideInterval);
|
||||
startAutoSlide();
|
||||
|
||||
// Pause on hover
|
||||
const slider = document.querySelector('.quotes-slider');
|
||||
slider.addEventListener('mouseenter', () => clearInterval(autoSlideInterval));
|
||||
slider.addEventListener('mouseleave', startAutoSlide);
|
||||
}
|
||||
|
||||
// Start auto-slide
|
||||
startAutoSlide();
|
||||
|
||||
// Pause on hover
|
||||
const slider = document.querySelector(".quotes-slider");
|
||||
slider.addEventListener("mouseenter", () => clearInterval(autoSlideInterval));
|
||||
slider.addEventListener("mouseleave", startAutoSlide);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// SCROLL REVEAL ANIMATIONS
|
||||
// ============================================
|
||||
function initScrollReveal() {
|
||||
const revealElements = document.querySelectorAll(
|
||||
'.about-content, .character-card, .theme-item, .section-header'
|
||||
);
|
||||
|
||||
const revealOptions = {
|
||||
threshold: 0.15,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry, index) => {
|
||||
if (entry.isIntersecting) {
|
||||
// Add staggered delay for grid items
|
||||
const delay = entry.target.classList.contains('character-card') ||
|
||||
entry.target.classList.contains('theme-item')
|
||||
? index * 100
|
||||
: 0;
|
||||
|
||||
setTimeout(() => {
|
||||
entry.target.classList.add('reveal');
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}, delay);
|
||||
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, revealOptions);
|
||||
|
||||
revealElements.forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(30px)';
|
||||
el.style.transition = 'opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)';
|
||||
revealObserver.observe(el);
|
||||
const revealElements = document.querySelectorAll(
|
||||
".about-content, .character-card, .theme-item, .section-header",
|
||||
);
|
||||
|
||||
const revealOptions = {
|
||||
threshold: 0.15,
|
||||
rootMargin: "0px 0px -50px 0px",
|
||||
};
|
||||
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry, index) => {
|
||||
if (entry.isIntersecting) {
|
||||
// Add staggered delay for grid items
|
||||
const delay =
|
||||
entry.target.classList.contains("character-card") ||
|
||||
entry.target.classList.contains("theme-item")
|
||||
? index * 100
|
||||
: 0;
|
||||
|
||||
setTimeout(() => {
|
||||
entry.target.classList.add("reveal");
|
||||
entry.target.style.opacity = "1";
|
||||
entry.target.style.transform = "translateY(0)";
|
||||
}, delay);
|
||||
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, revealOptions);
|
||||
|
||||
revealElements.forEach((el) => {
|
||||
el.style.opacity = "0";
|
||||
el.style.transform = "translateY(30px)";
|
||||
el.style.transition =
|
||||
"opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)";
|
||||
revealObserver.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// SMOOTH SCROLL FOR ANCHOR LINKS
|
||||
// ============================================
|
||||
function initSmoothScroll() {
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
|
||||
if (target) {
|
||||
const navHeight = document.querySelector('.nav').offsetHeight;
|
||||
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||
anchor.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute("href"));
|
||||
|
||||
if (target) {
|
||||
const navHeight = document.querySelector(".nav").offsetHeight;
|
||||
const targetPosition =
|
||||
target.getBoundingClientRect().top + window.pageYOffset - navHeight;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// PARALLAX EFFECT FOR HERO
|
||||
// ============================================
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrolled = window.pageYOffset;
|
||||
const heroPattern = document.querySelector('.hero-pattern');
|
||||
|
||||
if (heroPattern && scrolled < window.innerHeight) {
|
||||
heroPattern.style.transform = `translateY(${scrolled * 0.3}px) rotate(${scrolled * 0.02}deg)`;
|
||||
}
|
||||
window.addEventListener("scroll", () => {
|
||||
const scrolled = window.pageYOffset;
|
||||
const heroPattern = document.querySelector(".hero-pattern");
|
||||
|
||||
if (heroPattern && scrolled < window.innerHeight) {
|
||||
heroPattern.style.transform = `translateY(${scrolled * 0.3}px) rotate(${scrolled * 0.02}deg)`;
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// CHARACTER CARD HOVER EFFECT
|
||||
// ============================================
|
||||
document.querySelectorAll('.character-card').forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.zIndex = '10';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.zIndex = '1';
|
||||
});
|
||||
document.querySelectorAll(".character-card").forEach((card) => {
|
||||
card.addEventListener("mouseenter", function () {
|
||||
this.style.zIndex = "10";
|
||||
});
|
||||
|
||||
card.addEventListener("mouseleave", function () {
|
||||
this.style.zIndex = "1";
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user