簡介在線黑色響應(yīng)式全屏滾動(dòng)主頁HTML源碼是一套可直接運(yùn)行的整站主頁模板適合前端學(xué)習(xí)者、UI設(shè)計(jì)師及需要快速產(chǎn)出落地頁的開發(fā)者。源碼基于響應(yīng)式設(shè)計(jì)思路利用媒體查詢適配桌面、平板與手機(jī)結(jié)合全屏滾動(dòng)效果呈現(xiàn)黑色主題的品牌頁面包內(nèi)共37個(gè)文件以HTML、CSS、JavaScript為核心輔以圖片、字體圖標(biāo)及少量MP4素材整體壓縮包僅2.72MB結(jié)構(gòu)簡潔便于二次修改。已有187人學(xué)習(xí)下載。解壓后可見首頁與錯(cuò)誤頁模板、樣式文件、腳本文件及字體與圖片目錄開發(fā)者可依據(jù)目錄名快速定位并替換內(nèi)容調(diào)整配色、斷點(diǎn)或滾動(dòng)動(dòng)畫適配個(gè)人作品集、產(chǎn)品發(fā)布頁等場景。資源體積小巧、依賴少適合作為學(xué)習(xí)響應(yīng)式布局和滾動(dòng)交互的參照樣例也可直接改造成獨(dú)立站點(diǎn)的落地頁。1. 項(xiàng)目核心拆解與方案選型先把這個(gè)標(biāo)題拆開看黑色、響應(yīng)式、全屏滾動(dòng)、html源碼。這四個(gè)詞幾乎是目前個(gè)人作品集、產(chǎn)品落地頁、品牌官網(wǎng)里最主流的一套組合拳。黑色打底能讓內(nèi)容聚焦全屏滾動(dòng)能給用戶一種“翻頁讀故事”的儀式感響應(yīng)式則保證你在電腦上做完的東西到手機(jī)和平板上不至于垮掉。我最初接觸這類頁面是因?yàn)榻o自己搭作品集當(dāng)時(shí)找了一圈現(xiàn)成模板要么太重、引入一堆用不上的組件要么交互太花哨、光鮮但不好改。后來干脆自己寫慢慢養(yǎng)成了“一切從源碼層面可控”的習(xí)慣。這篇就把整個(gè)構(gòu)建過程拆開講從設(shè)計(jì)語言的確定、交互方案選型到每一塊代碼怎么寫、上線后踩到哪些坑全部過一遍。1.1 黑色風(fēng)格的設(shè)計(jì)語言與選色邏輯很多人以為黑色頁面就是把背景設(shè)成#000000文字設(shè)成白色就完事了。實(shí)際做出來往往發(fā)悶、刺眼深色區(qū)域糊成一片根本看不清層級。我做這類頁面時(shí)一般不用純黑而是選帶一點(diǎn)灰調(diào)的深色比如#0d0d0d、#111111、#1a1a1a這樣能保留暗色氛圍又不會(huì)讓屏幕上的黑色死板。文字的對比度也要控制。純白#ffffff在某些深色底上反而刺眼我習(xí)慣用#e5e5e5或#f2f2f2作為主文字色次級信息用#888888到#999999。強(qiáng)調(diào)色只留一個(gè)通常是一抹亮色比如熒光綠、電光藍(lán)或者橙色用于按鈕、光標(biāo)、關(guān)鍵數(shù)據(jù)整個(gè)頁面不會(huì)超過兩種強(qiáng)調(diào)色否則黑色背景的“高級感”瞬間就沒了。字體上標(biāo)題用較粗的字重或帶幾何感的字體正文保持簡潔的無襯線。由于深色背景下文字的視覺重量不同行高我一般放大到1.6到1.8避免多行文字?jǐn)D在一起看不清。圖片方面最好統(tǒng)一壓暗處理半透黑色遮罩層是常見做法這樣不管用戶上傳什么圖頁面整體氛圍都不會(huì)被破壞。1.2 全屏滾動(dòng)交互成熟插件還是原生實(shí)現(xiàn)全屏滾動(dòng)最常用的方案是fullPage.js生態(tài)成熟、兼容性處理好基本“開箱即用”。它內(nèi)部把每一屏設(shè)為 100% 視口高度監(jiān)聽滾輪事件并做攔截滾動(dòng)結(jié)束后將頁面定位到目標(biāo)屏。同時(shí)支持錨點(diǎn)導(dǎo)航、左右滑動(dòng)翻屏、鍵盤方向鍵控制等一個(gè)頁面幾分鐘就能搭起來。但插件也有它的代價(jià)體積不算小而且默認(rèn)樣式多改起來要想辦法覆蓋更關(guān)鍵的是如果你只需要“豎直全屏翻頁”這一個(gè)能力為一個(gè)功能引入整個(gè)庫反而讓源碼里堆了不少用不到的配置。所以我的做法是先評估需求只有交互簡單、需要快速上線時(shí)用插件想深入理解原理、追求極致性能時(shí)自己用原生 JS 實(shí)現(xiàn)。我在這篇里采用的是“原生實(shí)現(xiàn) 少量輔助函數(shù)”的路線。核心原理其實(shí)不復(fù)雜監(jiān)聽滾輪事件在滾動(dòng)方向確定后計(jì)算目標(biāo)屏的索引再用 CSStransform: translateY(-index * 100%)把容器移到對應(yīng)位置。核心代碼量很小而且每一行都能看懂后期加動(dòng)畫、加導(dǎo)航高亮都非常順手。當(dāng)然純原生方案需要自己處理滾動(dòng)節(jié)流、邊界判斷、移動(dòng)端觸摸滑動(dòng)這也是我后面會(huì)重點(diǎn)講的部分。1.3 響應(yīng)式適配的技術(shù)路線響應(yīng)式不只是“用媒體查詢改幾個(gè)樣式”真正的核心是布局結(jié)構(gòu)在任意寬度下都能成立。對全屏滾動(dòng)頁面來說最大的挑戰(zhàn)是“一屏裝不下的內(nèi)容”在窄屏上怎么處理。我的策略是桌面端嚴(yán)格一屏一頁內(nèi)容不超過視口高度平板和手機(jī)端適當(dāng)放開高度限制允許某幾屏內(nèi)容自然撐開并上下滾動(dòng)。為此我給容器設(shè)置的并不是生硬的height: 100vh而是min-height: 100vh這樣既能保證小屏上內(nèi)容放得下又能在內(nèi)容不足時(shí)撐滿全屏。斷點(diǎn)上我一般設(shè)三個(gè)檔768px以下按手機(jī)端處理769px到1024px按平板端處理1024px以上是桌面端。手機(jī)端時(shí)全屏滾動(dòng)的“滾動(dòng)攔截”也會(huì)關(guān)掉恢復(fù)到普通上下滑動(dòng)的體驗(yàn)。為什么這樣設(shè)計(jì)因?yàn)槿翝L動(dòng)在小屏上很容易誤觸用戶只是想快滑動(dòng)結(jié)果被一屏一屏地?cái)r截體驗(yàn)很糟糕。移動(dòng)端優(yōu)先考慮內(nèi)容的可讀性而不是交互特效。提示CSS 里有個(gè)容易踩的坑100vh在 iOS Safari 上會(huì)包含地址欄高度導(dǎo)致一屏內(nèi)容底部被裁剪?，F(xiàn)在更推薦使用100dvh動(dòng)態(tài)視口單位或者干脆用min-height: 100vh加一個(gè)保底的min-height: -webkit-fill-available來兼容。2. 源碼結(jié)構(gòu)設(shè)計(jì)與關(guān)鍵細(xì)節(jié)這個(gè)項(xiàng)目的源碼組織我把它分成三層HTML 負(fù)責(zé)內(nèi)容與語義結(jié)構(gòu)CSS 負(fù)責(zé)視覺與布局表現(xiàn)JavaScript 負(fù)責(zé)交互邏輯與狀態(tài)切換。每一層都保持獨(dú)立這樣日后維護(hù)、加功能、換膚都不用大動(dòng)干戈。2.1 HTML骨架分屏結(jié)構(gòu)與語義化整個(gè)頁面最外層是一個(gè)#fullpage容器里面用section標(biāo)簽分別放每一屏。每屏都帶>div idfullpage section classsection>body { font-family: Inter, PingFang SC, Microsoft YaHei, sans-serif; background: #0d0d0d; color: #e5e5e5; line-height: 1.7; } .section { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; } .section .inner { max-width: 520px; padding: 24px; }2.3 JS邏輯滾動(dòng)節(jié)流、導(dǎo)航高亮與視口判斷原生實(shí)現(xiàn)全屏滾動(dòng)的核心代碼分三段容器定位、方向判定、導(dǎo)航聯(lián)動(dòng)。容器定位上我給#fullpage設(shè)置transform: translateY(-currentIndex * 100%)并為它加上transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1)。為什么用transform而不是top或margin-top因?yàn)閠ransform不觸發(fā)重排只觸發(fā)合成動(dòng)畫性能好很多。方向判定上滾輪事件會(huì)連續(xù)觸發(fā)很多次必須做節(jié)流。我采用設(shè)置一個(gè)isScrolling布爾鎖的方式當(dāng)滾動(dòng)事件觸發(fā)且當(dāng)前未處于動(dòng)畫狀態(tài)時(shí)判斷deltaY的正負(fù)來決定上一屏還是下一屏然后立即把isScrolling設(shè)為true。在transitionend事件里再解鎖這樣一次動(dòng)畫過程中后續(xù)的滾動(dòng)事件都被忽略不會(huì)出現(xiàn)連跳兩屏的失控感。導(dǎo)航高亮則用IntersectionObserver。切換時(shí)給當(dāng)前屏設(shè)置active狀態(tài)在回調(diào)里更新導(dǎo)航對應(yīng)項(xiàng)的class。這個(gè)方案比“監(jiān)聽scroll事件 計(jì)算offsetTop”更穩(wěn)定和高效IE 時(shí)代的技術(shù)已經(jīng)可以完全替換掉了。let currentIndex 0; let isScrolling false; const slides document.querySelectorAll(.section); const total slides.length; function goTo(index) { if (index 0 || index total || isScrolling) return; currentIndex index; document.getElementById(fullpage).style.transform translateY(- currentIndex * 100 %); isScrolling true; updateNav(); } document.getElementById(fullpage).addEventListener(transitionend, () { isScrolling false; }); window.addEventListener(wheel, (e) { if (Math.abs(e.deltaY) 10) return; e.preventDefault(); if (!isScrolling) { goTo(e.deltaY 0 ? currentIndex 1 : currentIndex - 1); } }, { passive: false });3. 實(shí)操過程從零搭一個(gè)可運(yùn)行的版本理論說完了直接進(jìn)入實(shí)戰(zhàn)。我按實(shí)際開發(fā)順序走一遍初始化項(xiàng)目、寫內(nèi)容結(jié)構(gòu)、調(diào)樣式、處理交互、最后做響應(yīng)式和真機(jī)驗(yàn)證。全程只依賴一個(gè)文本編輯器和瀏覽器不引入框架方便你直接復(fù)現(xiàn)。3.1 初始化項(xiàng)目與引入依賴新建一個(gè)文件夾在里面建三個(gè)文件index.html、style.css、main.js再建一個(gè)assets目錄放圖片。這個(gè)階段不需要構(gòu)建工具、不需要 npm普通的靜態(tài)頁面就夠了。如果你后續(xù)要部署直接把這三個(gè)文件丟到任意服務(wù)器或靜態(tài)托管平臺即可。如果追求極端精簡可以把 CSS 和 JS 直接寫進(jìn) HTML 里但拆成獨(dú)立文件更利于維護(hù)尤其是全屏滾動(dòng)頁面結(jié)構(gòu)本身不復(fù)雜文件一多反而礙事。另外我習(xí)慣在head里補(bǔ)上meta描述、og標(biāo)簽和favicon這對上線后的預(yù)覽分享和 SEO 都有幫助。!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 meta namedescription content黑色響應(yīng)式全屏滾動(dòng)主頁示例 title黑色全屏滾動(dòng)主頁/title link relstylesheet hrefstyle.css /head body !-- 內(nèi)容結(jié)構(gòu)在下一節(jié)寫入 -- script srcmain.js/script /body /html3.2 分屏內(nèi)容編寫與樣式調(diào)試頁面的分屏內(nèi)容要提前規(guī)劃好我一般遵循“首頁引導(dǎo) → 能力/作品 → 過程/理念 → 聯(lián)系”的邏輯。每屏內(nèi)容不要貪多標(biāo)題、說明、一個(gè)按鈕就夠再多就會(huì)超出視口。在寫 HTML 時(shí)我特意給每屏添加了aria-label方便讀屏用戶區(qū)分。標(biāo)題層級上第一屏用h1后面的屏用h2不要每個(gè)屏都用h1這對 SEO 和結(jié)構(gòu)清晰度都是減分項(xiàng)。按鈕我統(tǒng)一用a而不是button因?yàn)閺恼Z義上講它是引導(dǎo)用戶到下一個(gè)區(qū)塊的鏈接而不是表單提交。樣式調(diào)試時(shí)先把所有屏的background設(shè)成帶透明度的底色如rgba(255,255,255,0.02)用來區(qū)分邊界。確認(rèn)每一屏的 flex 居中生效后再去掉調(diào)試色加最終背景。這個(gè)過程很笨但不容易漏看問題。section classsection style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />