script.js

// 设计漫步网站交互脚本

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 卡片悬停效果增强
    const cards = document.querySelectorAll('.card-hover');
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-8px)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });

    // 头像点击效果
    const avatars = document.querySelectorAll('.avatar');
    avatars.forEach(avatar => {
        avatar.addEventListener('click', function() {
            this.classList.add('ring-2', 'ring-white');
            setTimeout(() => {
                this.classList.remove('ring-2', 'ring-white');
            }, 500);
        });
    });

    // 滚动动画
    const animateOnScroll = function() {
        const elements = document.querySelectorAll('.feature-card, .avatar');
        
        elements.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;
            const elementVisible = 150;
            
            if (elementTop < window.innerHeight - elementVisible) {
                element.classList.add('opacity-100');
                element.classList.remove('opacity-0', 'translate-y-4');
            }
        });
    };

    // 初始化滚动动画元素
    const scrollElements = document.querySelectorAll('.feature-card, .avatar');
    scrollElements.forEach(el => {
        el.classList.add('transition-all', 'duration-500', 'opacity-0', 'translate-y-4');
    });

    // 监听滚动事件
    window.addEventListener('scroll', animateOnScroll);
    
    // 初始执行一次动画检查
    animateOnScroll();
});