当前位置：首页 > JavaScript

js实现特效

2026-03-15 08:40:42JavaScript

JavaScript 实现常见特效的方法

鼠标悬停效果
通过监听mouseover和mouseout事件改变元素样式：

element.addEventListener('mouseover', () => {
  element.style.transform = 'scale(1.1)';
  element.style.transition = 'all 0.3s';
});
element.addEventListener('mouseout', () => {
  element.style.transform = 'scale(1)';
});

滚动动画
使用IntersectionObserver实现滚动视差效果：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate');
    }
  });
});
document.querySelectorAll('.scroll-item').forEach(item => observer.observe(item));

粒子效果
Canvas实现基础粒子动画：

const canvas = document.getElementById('particle-canvas');
const ctx = canvas.getContext('2d');
const particles = Array(100).fill().map(() => ({
  x: Math.random() * canvas.width,
  y: Math.random() * canvas.height,
  size: Math.random() * 5 + 1,
  speedX: Math.random() * 3 - 1.5,
  speedY: Math.random() * 3 - 1.5
}));

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach(p => {
    p.x += p.speedX;
    p.y += p.speedY;
    ctx.fillStyle = 'rgba(255,255,255,0.8)';
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
    ctx.fill();
  });
  requestAnimationFrame(animate);
}
animate();

特效优化技巧

性能优化
使用requestAnimationFrame替代setTimeout实现动画循环，避免布局抖动（Layout Thrashing）：

function optimizedAnimation() {
  const elements = document.querySelectorAll('.animate-me');
  requestAnimationFrame(() => {
    elements.forEach(el => {
      const position = el.getBoundingClientRect().top; // 批量读取
      el.style.transform = `translateY(${position * 0.1}px)`; // 批量写入
    });
  });
}

硬件加速
通过触发GPU加速提升动画流畅度：

.accelerated {
  transform: translateZ(0);
  will-change: transform;
}

特效库推荐

轻量级选择

Anime.js：支持复杂时间线控制的动画库（12KB）
GSAP：专业级动画工具集，适合复杂场景
Particles.js：专攻粒子效果的轻量库

实现3D特效
Three.js基础示例：

js实现特效

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;

function animate() {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();