網(wǎng)頁設(shè)計(jì)—全屏滾動效果

2022-05-14 分類：網(wǎng)站建設(shè)

因?yàn)榻?jīng)常有小伙伴在群里問網(wǎng)站全屏滾動相關(guān)問題，以前我雖然做過相關(guān)設(shè)計(jì)，但是時間久了，加上項(xiàng)目簡單，也遺忘的差不多了，最近比較閑，就去搜了相關(guān)資料，憑借以前的設(shè)計(jì)經(jīng)驗(yàn)，寫下這篇文章。

問題引入

全屏滾動是網(wǎng)站常見的交互效果，一般應(yīng)用在企業(yè)官網(wǎng)，產(chǎn)品展示等場景，既美觀又大氣。比如：

對于這種效果的設(shè)計(jì)，大家的問題一般是：設(shè)計(jì)稿尺寸多大呀？以及內(nèi)容區(qū)域設(shè)置多大呀？有什么注意事項(xiàng)？等等。我認(rèn)為，之所以會有這些疑問，是因?yàn)榇蠹覜]有明白實(shí)現(xiàn)這種效果的原理。

全屏滾動原理

先把全屏滾動效果的設(shè)計(jì)分兩部分：背景圖+內(nèi)容。（這里的背景圖指紋理或者照片作為背景）

對于背景圖，開發(fā)的設(shè)置是：width：99.99%；heigth：99.99%。意思是無論我們設(shè)計(jì)多大尺寸的背景圖，最終都會以鋪面瀏覽器窗口來顯示。背景圖的顯示又可以分為兩種情況，一種：裁剪顯示（從左上角，右下角，中間開始裁剪）；第二種：縮放顯示。

對于全屏滾動效果，背景圖寬高就是瀏覽器窗口的寬高，但是瀏覽器窗口有各種尺寸，雖然常見16:9這種，但不是每一個窗口都是有比例可循的，如果以圖片縮放顯示會拉扯圖片導(dǎo)致變形，所以只能采用剪裁顯示。裁剪方式需要把背景圖設(shè)計(jì)為大尺寸，一般是1920px*1200px，當(dāng)窗口尺寸不匹配時，就可以裁剪某一區(qū)域來顯示。

對于內(nèi)容區(qū)域，開發(fā)一般是按照最小顯示器的分辨率設(shè)置，一般寬在1000px以內(nèi)，高在768px以內(nèi)。和我們平時設(shè)置網(wǎng)頁尺寸的原理一樣，都是為了保證原圖顯示，即：不做裁剪和縮放處理。

記住哦，背景和內(nèi)容要分開考慮。

怎么設(shè)計(jì)

先說背景圖，背景圖可以為純色、漸變、紋理、照片。純色背景是最方便的，不用傳圖，代碼設(shè)置即可。漸變開發(fā)也可以設(shè)置，或者切圖的方式。紋理，如果是重復(fù)性的可以切圖，不可重復(fù)的就和照片處理方式一樣。對于照片，就只能是裁剪方式了。

前面說了，剪裁的方式圖片設(shè)計(jì)為大尺寸1920px*1200px，壓縮到100KB以內(nèi)。代碼默認(rèn)從左上角開始剪裁一個區(qū)域，也可以設(shè)置為右下角，和中間區(qū)域。

background-position-x: 0%;

background-position-y: 0%;

為了保證剪裁后圖片的美觀度，找畫面內(nèi)元素較小的圖片，不要那種整張圖片多大一個物體，比如下面這種：

再來說內(nèi)容，設(shè)置為1000px*700px以內(nèi)，因?yàn)橐紤]上下留白。不考慮響應(yīng)式或者動效的話可以把內(nèi)容切成透明png圖片給開發(fā)。對于全屏滾動的響應(yīng)式設(shè)計(jì)，建議針對移動設(shè)備設(shè)計(jì)一套圖。

交互

設(shè)計(jì)這種全屏滾動效果，目的就是好看，大氣，所以交互也是考慮的重點(diǎn)。那有哪些值得借鑒的優(yōu)秀交互呢？這里給大家分享幾個案例。

視差

利用視覺錯位形成的效果。

元素穿插

某個對象會進(jìn)入下一屏展示。

類3D

通過對平面圖片加透視，位移形成的效果。

PPT效果

即常見的位移，縮放效果。

最后做個小廣告：創(chuàng)新互聯(lián)專注于：成都網(wǎng)站設(shè)計(jì)、成都小程序開發(fā)

當(dāng)前題目：網(wǎng)頁設(shè)計(jì)—全屏滾動效果
URL標(biāo)題：http://www.bm7419.com/news48/153398.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容