★ FEATURED ARTICLE 前阵子帮一个朋友的个人作品集站点做改版对方提的唯一需求就是“别那么素加点JavaScript特效让我打开第一眼就觉得高级”。这个需求听起来简单实际上挺考验分寸感特效加多了页面卡成PPT特效选错了又像十年前的个人主页。前后折腾了两周最后落地的是五个经典又不张扬的实例打字机标题、滚动渐入、3D悬停卡片、Canvas粒子背景、数字滚动计数。这篇文章把实现思路、完整代码和踩坑记录都整理出来给同样想让站点更吸引人的前端开发者和独立站长做个参考。1. 内容整体设计与思路拆解做网站特效最忌讳的事情就是一上来就找几十个效果挨个往上塞。任何特效实例都应该先问三个问题它有没有让信息更容易被理解它会不会干扰用户阅读如果浏览器跑不动页面还能不能正常用这三个问题想清楚了再谈代码实现。1.1 特效选型的核心原则克制比炫技重要很多人一提到“特效”就想到满屏粒子、雪花、霓虹灯。但用户打开网站的目的是获取内容不是看烟花。好的JavaScript特效应该是隐形的引导者而不是舞台上的主角。我自己的选型标准有三条第一特效必须和页面内容匹配作品集网站适合打字机和悬停动效数据展示页适合数字滚动品牌官网适合粒子背景第二特效要可用性优先键盘用户、屏幕阅读器用户、关了动效的用户都不能被绕进去第三特效要有降级方案JS加载失败或者浏览器不支持Canvas时页面至少看起来是完整的。这套标准说到底就是四个字渐进增强。特效是锦上添花不是雪中送炭。1.2 为什么是这几个实例每个特效解决一个具体问题我选的这几个JavaScript特效实例不是随机拼凑的它们各有各的职责打字机效果解决“视觉焦点”问题。首屏如果没有动的东西用户视线容易飘走打字机让标题区域成为唯一的注意力锚点。滚动渐入解决“阅读节奏”问题。一屏内容全部同时出现用户会感到被信息砸到脸随着滚动一点一点放出来用户会被“牵着”往下看。3D悬停卡片解决“操作反馈”问题。鼠标移上去卡片微微倾斜用户能立刻感知到“这个东西是可以点的”这是在降低交互认知成本。Canvas粒子背景解决“品牌记忆”问题。粒子连接成网动态地填补页面空白区域让背景不再是纯色块形成独特的视觉签名。数字滚动计数解决“数据可信度”问题。把静态数字变成从0涨到目标值的动画会让人潜意识里觉得数据是“活”的更有说服力。每个特效都有自己的主场组合在一起也不会互相打架。选择它们还有一个共同的隐含理由它们都不需要额外引库全部用原生JavaScript就能实现这对我后续的维护和换肤都方便得多。1.3 用原生JavaScript而不是全家桶常见的JavaScript特效实现方案有很多jQuery时代已经过去现在Github上一搜特效仓库基本都是打包好的组件。我为什么坚持自己写原因很现实一个页面引入三个特效库体感可能是体积从200KB涨到2MB移动端加载时间翻倍而且每个库都有自己的CSS注入和事件绑定方式一旦哪天某个库不维护了整个站点都跟着遭殃。原生JavaScript写这几个特效代码量其实没有想象中多。打字机效果核心逻辑也就几十行粒子背景稍微复杂些但也就一百多行而且写完之后完完全全可控。配合现代浏览器提供的requestAnimationFrame、IntersectionObserver这些API性能和代码优雅度都远超十年前的老方案。当然不引库不等于排斥工具。比如粒子背景里要频繁计算两两距离我可以在自己代码里实现想调优随时能改。对独立开发者来说能自由掌控的代码才是最省心的代码。2. 核心细节解析与实操要点这一节是全文最值钱的部分。每个特效我都会拆开讲原理再指出那些文档里不会写、但实际写代码时一定会撞上的坑。2.1 打字机效果定时器、光标与边界条件打字机效果的原理很直白把一句话拆成字符数组通过定时器每隔一段时间向页面追加一个字符。但真正实现的时候问题一个接一个。第一个坑是定时器叠加。用户快速切换几段文字时如果每次切换都启动一个新的setInterval旧的定时器没有被清理页面就会同时跑多个定时器打字速度瞬间失控。这个问题我栽过一次后来养成了习惯任何定时器启动前先clearInterval。这也算是所有定时器类动画的统一铁律。第二个坑是光标闪烁。很多人会用CSS的animation做光标闪烁这没问题但要注意光标宽度应该用ch单位而不是px。ch单位是相对字符宽度的中文和英文混排时一个光标宽度可能对应1.7个中文全角字符如果硬编码成2px光标会在句子变长时偏移。用ch至少视觉上是齐平的。第三个坑是字符串里的特殊字符。如果句子中有HTML实体或者尖括号用innerHTML直接拼进去可能被浏览器解析成标签导致文本闪现、布局跳动。最好的做法是用textContent逐字追加或者在渲染前先做转义。无障碍这块也很容易被忽略。屏幕阅读器用户不需要听你一个字一个字念出来他需要完整的语义。所以打字机所在的DOM节点应该加上aria-label里面写上完整段落文本或者用aria-hidden把动态输出的span藏起来旁边放一个静态完整文本。不要为了视觉效果牺牲读屏体验。2.2 滚动渐入与阅读节奏控制滚动渐入的核心思路是元素默认透明或位移当它进入视口时再通过过渡动画回到正常状态。以前常用scroll事件配合getBoundingClientRect做判断但现在有个更好的APIIntersectionObserver。使用IntersectionObserver的关键在配置项。threshold表示“进入视口百分之多少才算触发”我常用0.15意思是元素露出15%就开始动画。如果设成0可能用户还没看清就触发设成1很多长元素永远触发不了。这里没有标准答案要看内容结构。页面滚动速度较快时我甚至会调到0.1保证用户看到元素前动画已经做完。还有一点要注意的是“触发后是否恢复”。对一个作品集页面元素渐入一次就够了不需要每次滚动离开再收回否则用户往上滚动时会看到一堆元素反复“闪现”很干扰。处理方式很简单动画完成之后在回调里执行observer.unobserve(el)解除监听。但也要想清楚如果你的设计语言强调“回到顶部时重新播放”那就不能unobserve要配合leave状态做反向动画。两条路都通别走到一半切换思路。滚动进度条的原理则完全不同计算整个文档的滚动总量取当前滚动位置的比例然后更新进度条宽度。这里必须用requestAnimationFrame来做节流不能直接在scroll回调里改宽度否则滚动一次会触发十几次布局页面会明显发涩。2.3 3D悬停卡片坐标轴、透视与层叠上下文3D卡片悬停的效果很唬人原理其实简洁监听鼠标在卡片上的位置把坐标值换算成rotateX和rotateY的角度再配合父级的perspective属性产生透视感。这里最容易被绕晕的问题是坐标轴方向。CSS的rotateX正方向是“元素顶部朝屏幕外翻”rotateY正方向是“元素右边朝屏幕外翻”。但鼠标在卡片左上角时我们期望的是卡片左上角翘起来也就是顶部向屏幕外翻、左边向后倒。换算公式是rotateX -(鼠标相对卡片中心的纵向偏移值)rotateY 鼠标相对卡片中心的横向偏移值。负号加在哪一轴很多人会搞反建议直接记住这个带负号的版本。另一个关键参数是perspective。它决定透视强度数值越小效果越夸张越大越平缓。我一般用800到1000px800px会产生明显的立体感但不会让卡片变形到不自然。transition一定要加但只在鼠标离开时保留悬停时去掉。为什么鼠标在卡片上移动时每一帧都在更新rotate值如果这时候还带过渡卡片会像泡在水里一样迟滞而鼠标离开时我们希望它平滑回正这时候过渡就派上用场了。所以正确做法是悬停态加transform移除态加transition。还有z-index和overflow的问题。父容器如果设置了overflow: hidden卡片3D效果会被裁切我遇到过一个案例卡片网格在hover时边缘发虚排查半天发现是列表容器overflow-x: auto导致的。3D卡片最好放在没有裁剪的容器里同时给卡片设置z-index防止倾斜时被相邻卡片盖住。2.4 Canvas粒子背景粒子模拟与性能平衡Canvas粒子背景是最“吃”性能的一个特效。核心逻辑分三步初始化一批粒子坐标和速度每帧更新坐标绘制粒子之间的连线。连线规则很经典两两粒子之间距离小于设定阈值就画一条半透明线段距离越近线段越不透明。性能是最大的坎。假设是200个粒子两两组合约有2万对距离计算JavaScript每帧跑2万次平方根运算在低端手机上会明显发热。优化手段有两个方向一个是减少粒子数量另一个是限制距离判断的次数。我惯用的做法是根据屏幕面积动态决定粒子数量面积越大粒子越多反过来也一样并且用距离平方代替距离计算来提前剔除不合格的连线避免开平方。绘制时还有一个设备像素比的问题。Canvas的css宽高和绘图buffer宽高默认是1:1在视网膜屏上会发虚。最佳实践是读window.devicePixelRatio把canvas的宽高乘以这个值再通过style宽高把显示尺寸拉回CSS尺寸。这样一来粒子边缘会清晰很多代价是推进器像素翻倍性能又会掉一些。所以我通常只在像素比小于2.5的设备上做高清适配再高就维持普通渲染肉眼几乎分辨不出差异。粒子背景还有一个很多人没考虑的问题和页面内容的对比度。粒子是动态的如果颜色太亮页面文字就看不清楚。我一般把粒子颜色设为灰色系半透明或者跟随主体色但alpha不超过0.3。背景本身永远是配角。3. 实操过程与核心环节实现理论说完了直接上代码。这一节我会给出每个特效的完整实现包含HTML结构、CSS样式和JavaScript逻辑并标注关键参数的含义。代码都是我在实际项目里用过的版本直接复制粘贴通常就能跑起来但强烈建议你理解每段注释再动手改。3.1 打字机效果完整实现先看HTML结构我们做一个多段文字循环切换的打字机div classtypewriter idtypewriter span classtypewriter-text idtypewriterText/span span classtypewriter-cursor aria-hiddentrue/span /div.typewriter { font-size: 2rem; font-family: monospace; min-height: 3.2rem; /* 防止文字切换时容器高度塌陷 */ } .typewriter-cursor { display: inline-block; width: 0.6ch; height: 1em; background: #333; margin-left: 2px; animation: blink 0.8s step-end infinite; } keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }JavaScript部分我用一个数组存所有句子按“逐字输出停顿再删除”的循环逻辑执行const sentences [ 用JavaScript让网站活起来, 专注高性能前端体验, 写给同样在写代码的你 ]; const textEl document.getElementById(typewriterText); let sentenceIndex 0; let charIndex 0; let isDeleting false; let timer; function type() { const current sentences[sentenceIndex]; if (isDeleting) { charIndex--; } else { charIndex; } textEl.textContent current.slice(0, charIndex); // 根据状态决定下一次调度的间隔 let speed isDeleting ? 50 : 130; // 整句打完后停顿再删除 if (!isDeleting charIndex current.length) { speed 1500; isDeleting true; } else if (isDeleting charIndex 0) { isDeleting false; sentenceIndex (sentenceIndex 1) % sentences.length; speed 400; } clearTimeout(timer); timer setTimeout(type, speed); } type();这里有几个参数值得说明打字速度130毫秒删除速度50毫秒删除比打字快符合阅读习惯句子切换后停顿400毫秒再开始打下一句。实际项目中可以根据语调调整比如语气偏沉稳的官网可以用180毫秒。这段代码用的是递归setTimeout而不是setInterval好处是每个定时器之间间隔可以动态变化而且天然避免叠加。切换句子时要注意容器最小高度防止首屏布局跳动。3.2 滚动渐入和顶部进度条完整实现滚动渐入我采用IntersectionObserver方案。先把需要动画的元素加上一个统一的标记类h2 classreveal>.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: none; }JavaScript只做一件事监听所有.reveal元素进入视口时添加is-visible类动画结束后解除监听const revealElements document.querySelectorAll(.reveal); const observer new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting) { const el entry.target; // 支持从data-delay取值实现错峰显现 const delay parseInt(el.dataset.delay || 0, 10); setTimeout(() { el.classList.add(is-visible); }, delay); observer.unobserve(el); } }); }, { threshold: 0.15, rootMargin: 0px 0px -30px 0px }); revealElements.forEach((el) observer.observe(el));rootMargin里那个0px 0px -30px 0px是另一个调节触发时机的维度。负值表示“视口底部往上收缩30px”元素只有越过这条收缩线才触发比threshold更直观。两者可以组合使用我用rootMargin做提前触发用threshold做延迟触发。顶部进度条的代码就更短了。思路是读取document.documentElement的scrollTop除以可滚动高度得到一个0到1的数字const progressBar document.getElementById(progressBar); const maxScroll () document.documentElement.scrollHeight - window.innerHeight; let ticking false; function updateProgress() { const progress window.scrollY / maxScroll(); progressBar.style.transform scaleX(${progress}); // 避免连续触发多次 ticking false; } window.addEventListener(scroll, () { if (!ticking) { window.requestAnimationFrame(updateProgress); ticking true; } }, { passive: true });进度条的CSS我习惯用transform scaleX而不是直接改width原因是scaleX只触发合成改width会触发布局计算性能差距在快速滚动时很明显。#progressBar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: #4a90d9; transform-origin: left center; transform: scaleX(0); }3.3 3D卡片悬停效果完整实现HTML结构保持简洁卡片内层放内容外层是透视容器div classcard-wrap div classcard idcard h3某跨平台系统/h3 p一屏看完全部核心指标/p /div /div.card-wrap { perspective: 900px; display: inline-block; } .card { width: 280px; padding: 24px; background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); transition: transform 0.4s ease, box-shadow 0.4s ease; } .card-wrap:hover .card { /* 悬停时去掉过渡保证跟随鼠标移动不延迟 */ transition: transform 0.05s linear; }JavaScript监听mousemove将坐标映射到角度const wrap document.querySelector(.card-wrap); const card document.querySelector(.card); const MAX_ANGLE 12; wrap.addEventListener(mousemove, (e) { const rect wrap.getBoundingClientRect(); // 鼠标相对卡片中心的偏移归一化到 -0.5 ~ 0.5 const offsetX (e.clientX - rect.left) / rect.width - 0.5; const offsetY (e.clientY - rect.top) / rect.height - 0.5; const rotateY offsetX * MAX_ANGLE * 2; const rotateX -offsetY * MAX_ANGLE * 2; card.style.transform rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px) ; card.style.boxShadow ${-offsetX * 20}px ${-offsetY * 20}px 40px rgba(0,0,0,0.15); }); wrap.addEventListener(mouseleave, () { card.style.transform rotateX(0) rotateY(0) translateZ(0); card.style.boxShadow 0 12px 32px rgba(0, 0, 0, 0.1); });我设置的MAX_ANGLE是12度超过这个数值卡片边缘会拉伸到失真。注意rotateX的负号前面解释过这是新手最容易写反的地方。移动端没有hover事件我直接用touch事件简化处理触摸时加一个轻微的scale放大不需要做3D旋转触屏上做3D倾斜本身感知不明显还会让按钮误触。3.4 Canvas粒子背景完整实现粒子背景需要一块全屏Canvas铺在底层内容层叠在上方。HTML结构如下canvas idparticleCanvas/canvas main classcontent这里放页面内容/mainCSS中把Canvas固定在视口底部z-index设为-1#particleCanvas { position: fixed; inset: 0; z-index: -1; background: #f7f8fa; }JavaScript的完整逻辑如下const canvas document.getElementById(particleCanvas); const ctx canvas.getContext(2d); const dpr Math.min(window.devicePixelRatio || 1, 2.5); let width, height, particles; const CONNECT_DIST 120; function initCanvasSize() { width window.innerWidth; height window.innerHeight; canvas.width width * dpr; canvas.height height * dpr; canvas.style.width width px; canvas.style.height height px; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); initParticles(); } function initParticles() { // 粒子数量按面积缩放每个粒子大约占据 9000px² const count Math.min(180, Math.floor((width * height) / 9000)); particles Array.from({ length: count }, () ({ x: Math.random() * width, y: Math.random() * height, vx: (Math.random() - 0.5) * 0.4, vy: (Math.random() - 0.5) * 0.4, r: Math.random() * 1.5 0.5 })); } function draw() { ctx.clearRect(0, 0, width, height); ctx.globalAlpha 1; particles.forEach((p, i) { p.x p.vx; p.y p.vy; // 边界反弹粒子掉出视野就拉回来 if (p.x 0 || p.x width) p.vx * -1; if (p.y 0 || p.y height) p.vy * -1; ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fillStyle #6b6b6b; ctx.fill(); // 与之前所有粒子计算距离并连线 for (let j i 1; j particles.length; j) { const q particles[j]; const dx p.x - q.x; const dy p.y - q.y; const distSq dx * dx dy * dy; if (distSq CONNECT_DIST * CONNECT_DIST) { const dist Math.sqrt(distSq); const alpha 1 - dist / CONNECT_DIST; ctx.strokeStyle rgba(100, 100, 120, ${alpha * 0.5}); ctx.lineWidth 1; ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(q.x, q.y); ctx.stroke(); } } }); requestAnimationFrame(draw); } window.addEventListener(resize, initCanvasSize); initCanvasSize(); draw();粒子数量我用面积 / 9000来算这个系数是多次实测的结果。1080p屏算下来大约是138个粒子在主流笔记本和手机上都能保持流畅如果你希望线条更密集可以把分母改成7000但低端机会开始发热。代码里用distSq CONNECT_DIST * CONNECT_DIST提前过滤距离过远的粒子对避免开平方运算这个优化在粒子数超150时效果非常明显。3.5 组合使用时的隔离与协作多个特效写在同一页面要注意变量名隔离。这几个实例如果都用全局var声明很容易互相覆盖。我惯用的做法是把每个特效包在一个IIFE立即执行函数里或者干脆写成模块window.ParticleBackground (function () { // 局部作用域避免污染全局 return { init, destroy }; })();这样做还有一个好处是每个特效可以单独初始化、单独销毁。比如用户开启减少动态偏好后我可以只禁用粒子背景和打字机保留滚动渐入这种低感官刺激的动效。事件层也要注意冲突。页面其他地方可能也监听了scroll事件多个scroll回调都在修改DOM的话尽量都在requestAnimationFrame里做节流。还有一种更彻底的方案把粒子背景的动画逻辑挂到requestAnimationFrame主循环里而页面滚动渐入和进度条共用同一个scroll监听器再通过一个布尔变量区分当前需要更新哪一块。4. 常见问题与排查技巧实录做特效最花时间的往往不是写特效本身而是修各种环境问题。我把实际项目中遇到的高频问题整理成了一份速查表按排查顺序排列。4.1 页面为什么突然变卡出现卡顿最可能的原因是做了“强制同步布局”。典型写法是在scroll回调里读了offsetTop或clientHeight等布局属性然后又立刻修改样式。浏览器被迫在每次动画帧执行一次完整布局计算掉帧是必然的。排查步骤很简单打开浏览器DevTools的Performance面板录制一段滚动操作看帧时间线。如果看到大面积的紫色布局区域基本就是这个问题。修复方式是区分“读”和“写”先统一把所有需要读取的值存进变量再统一修改样式或者直接用上面代码里的进度条方案用transform替代布局相关的属性。粒子背景卡顿的原因则是计算量太大。先看粒子数量是不是被强行设成四五百了再看两两距离计算是否用了平方根开后方可。建议给粒子数量加上限我一般就设180。还有一个隐蔽问题如果Canvas尺寸没有适配devicePixelRatio低分辨率屏上绘制buffer过小浏览器会做额外缩放插值也会造成持续性的性能损耗。4.2 特效没生效先按这四步查第一件事看控制台有没有报错JavaScript语法错误或者未定义变量都会导致整个脚本中断。第二件事确认脚本是在DOM加载之后执行的如果脚本放在head里并且没有包DOMContentLoadedquerySelector肯定查不到元素。第三件事检查CSSclassName写错了或者选择器被其他更高优先级的规则覆盖即使JS加了class也看不出效果。第四件事是缓存改完代码不刷新页面看到旧效果以为是自己写错了。有一个常见误报打字机文本不显示其实不是代码问题而是Font加载完成前容器是空的布局看着像坏了。解决办法是给容器设置min-height或者用font-display: swap减少字体加载白屏。4.3 和现有样式、框架打架怎么办最容易冲突的是z-index和overflow。粒子背景用了z-index: -1之后如果父容器有背景色会把Canvas盖住看起来就是特效没了。解决办法是不用负数z-index把Canvas放在页面最下面作为第一个元素后续内容用相对定位配合z-index: 1自然叠在上面。另一个经典问题来自框架的“重置样式表”。很多UI框架会给canvas统一加display: block这类规则有些则会重置position导致position: fixed失效。排查时用DevTools检查canvas的最终计算样式逐个属性对照是不是被覆盖了。CSS变量冲突也值得警惕。我习惯给特效相关的CSS变量加前缀比如--tw-speed、--particle-color避免全局css变量名过于通用造成意外联动。4.4 用户不想看特效怎么办这一点最容易被新手忽略但它直接关系到用户体验是否专业。现在操作系统普遍提供“减少动态”设置网页端可以通过window.matchMedia((prefers-reduced-motion: reduce))检测这个偏好。检测到用户开启后我建议直接停掉打字机的打字过程、粒子背景的动画循环让页面呈现最终静态状态只保留必要的状态切换动效。实现方式也很简单const prefersReduced window.matchMedia((prefers-reduced-motion: reduce)); if (prefersReduced.matches) { // 停止粒子动画 particleController.destroy(); // 打字机直接显示完整句子 textEl.textContent sentences[0]; } else { initParticle(); type(); }移动端还有一种情况省电模式下浏览器会自动降低动画帧率甚至暂停Canvas动画。不要试图绕过它因为这是操作系统层面的资源分配策略。设计页面时就要接受“某些环境下动画不太流畅”的事实保证静态内容完整才是底线。最后分享一个私藏的做法我给站点加了一个“关闭特效”的小开关存到localStorage里。用户主动关过一次下次访问就不再展示任何粒子动效。这件事情一开始做只是顺手但后来发现口碑上的收益比想象中大因为用户会觉得自己被尊重了。如果你也在做个人作品集非常建议保留这个开关。做JavaScript特效这几年我最大的体会是吸引人的核心从来不是某个特效有多花哨而是它出现在对的地方。打字机放在首屏标题上是点睛之笔放在用户要快速扫读的数据表格旁边就是灾难。技术实现层面的套路就那么多难点反而在判断什么时候该用、用多强、怎么收场。这篇文章里给出的五个实例都是我自己反复调过参数、踩过坑才留下的版本你可以直接拿去用。如果你的页面需要的不是特效堆砌而是恰到好处的那么一两个亮点从这五个里挑一个打磨到位效果通常比一次上五个更让人印象深刻。
阅读完成 · 觉得有帮助？
