当前位置：首页 > JavaScript

js实现特效

2026-04-07 02:10:21JavaScript

实现基础动画效果

使用 requestAnimationFrame 实现平滑动画，适合连续渲染场景。示例代码：

function animate() {
  element.style.left = (parseInt(element.style.left) + 1) + 'px';
  requestAnimationFrame(animate);
}
animate();

鼠标悬停交互

通过 mouseenter 和 mouseleave 事件触发样式变化。示例：

element.addEventListener('mouseenter', () => {
  element.style.transform = 'scale(1.2)';
});
element.addEventListener('mouseleave', () => {
  element.style.transform = 'scale(1)';
});

滚动视差效果

监听 scroll 事件，调整不同图层移动速度。关键代码：

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  background.style.transform = `translateY(${scrollY * 0.5}px)`;
  foreground.style.transform = `translateY(${scrollY * 0.2}px)`;
});

Canvas 粒子系统

利用 Canvas 绘制动态粒子效果。基础结构：

const ctx = canvas.getContext('2d');
function drawParticle(x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fill();
}
// 粒子更新逻辑需结合 requestAnimationFrame

SVG 路径动画

通过修改 stroke-dashoffset 实现描边动画：

const path = document.querySelector('path');
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;

// 动画触发后逐渐减少 offset
function animatePath() {
  path.style.strokeDashoffset -= 5;
  if (offset > 0) requestAnimationFrame(animatePath);
}

WebGL 3D 效果

使用 Three.js 库快速创建 3D 场景：

js实现特效

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
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);

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