js 实现简单特效

淡入淡出效果

通过修改元素的透明度实现淡入淡出动画效果：

function fadeIn(element, duration = 500) {
  element.style.opacity = 0;
  let start = performance.now();
  function animate(timestamp) {
    let progress = (timestamp - start) / duration;
    if (progress > 1) progress = 1;
    element.style.opacity = progress;
    if (progress < 1) requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);
}

function fadeOut(element, duration = 500) {
  let start = performance.now();
  function animate(timestamp) {
    let progress = 1 - (timestamp - start) / duration;
    if (progress < 0) progress = 0;
    element.style.opacity = progress;
    if (progress > 0) requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);
}

滑动效果

实现元素的上下滑动动画：

function slideDown(element, duration = 500) {
  element.style.height = 'auto';
  const targetHeight = element.offsetHeight;
  element.style.height = '0px';
  element.style.overflow = 'hidden';

  let start = performance.now();
  function animate(timestamp) {
    let progress = (timestamp - start) / duration;
    if (progress > 1) progress = 1;
    element.style.height = `${progress * targetHeight}px`;
    if (progress < 1) requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);
}

function slideUp(element, duration = 500) {
  const startHeight = element.offsetHeight;
  element.style.overflow = 'hidden';

  let start = performance.now();
  function animate(timestamp) {
    let progress = 1 - (timestamp - start) / duration;
    if (progress < 0) progress = 0;
    element.style.height = `${progress * startHeight}px`;
    if (progress > 0) requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);
}

鼠标悬停放大效果

为元素添加鼠标悬停时的放大效果：

function addHoverScaleEffect(element, scale = 1.1, duration = 300) {
  element.style.transition = `transform ${duration}ms ease`;
  element.addEventListener('mouseenter', () => {
    element.style.transform = `scale(${scale})`;
  });
  element.addEventListener('mouseleave', () => {
    element.style.transform = 'scale(1)';
  });
}

点击波纹效果

实现类似Material Design的点击波纹效果：

function addRippleEffect(element) {
  element.addEventListener('click', function(e) {
    const ripple = document.createElement('span');
    ripple.className = 'ripple';
    element.appendChild(ripple);

    const rect = element.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;

    setTimeout(() => {
      ripple.remove();
    }, 600);
  });
}

/* CSS部分需要添加：
.ripple {
  position: absolute;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
*/

滚动视差效果

创建简单的视差滚动效果：

function setupParallax(element, speed = 0.5) {
  window.addEventListener('scroll', () => {
    const scrollPosition = window.pageYOffset;
    element.style.transform = `translateY(${scrollPosition * speed}px)`;
  });
}

打字机效果

模拟打字机逐字显示文本的效果：

function typeWriter(element, text, speed = 100) {
  let i = 0;
  function type() {
    if (i < text.length) {
      element.innerHTML += text.charAt(i);
      i++;
      setTimeout(type, speed);
    }
  }
  element.innerHTML = '';
  type();
}