中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

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

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

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

對(duì)于這種效果的設(shè)計(jì),大家的問題一般是:設(shè)計(jì)稿尺寸多大呀?以及內(nèi)容區(qū)域設(shè)置多大呀?有什么注意事項(xiàng)?等等。我認(rèn)為,之所以會(huì)有這些疑問,是因?yàn)榇蠹覜]有明白實(shí)現(xiàn)這種效果的原理。
全屏滾動(dòng)原理
先把全屏滾動(dòng)效果的設(shè)計(jì)分兩部分: 背景圖+內(nèi)容。(這里的背景圖指紋理或者照片作為背景)

對(duì)于背景圖,開發(fā)的設(shè)置是:width:99.99%;heigth:99.99%。意思是無論我們設(shè)計(jì)多大尺寸的背景圖,最終都會(huì)以鋪面瀏覽器窗口來顯示。背景圖的顯示又可以分為兩種情況,一種:裁剪顯示(從左上角,右下角,中間開始裁剪);第二種:縮放顯示。
對(duì)于全屏滾動(dòng)效果,背景圖寬高就是瀏覽器窗口的寬高,但是瀏覽器窗口有各種尺寸,雖然常見16:9這種,但不是每一個(gè)窗口都是有比例可循的,如果以圖片縮放顯示會(huì)拉扯圖片導(dǎo)致變形,所以只能采用剪裁顯示。裁剪方式需要把背景圖設(shè)計(jì)為大尺寸,一般是1920px*1200px,當(dāng)窗口尺寸不匹配時(shí),就可以裁剪某一區(qū)域來顯示。

對(duì)于內(nèi)容區(qū)域,開發(fā)一般是按照最小顯示器的分辨率設(shè)置,一般寬在1000px以內(nèi),高在768px以內(nèi)。和我們平時(shí)設(shè)置網(wǎng)頁尺寸的原理一樣,都是為了保證原圖顯示,即:不做裁剪和縮放處理。
記住哦,背景和內(nèi)容要分開考慮。
怎么設(shè)計(jì)
先說背景圖,背景圖可以為純色、漸變、紋理、照片。純色背景是最方便的,不用傳圖,代碼設(shè)置即可。漸變開發(fā)也可以設(shè)置,或者切圖的方式。紋理,如果是重復(fù)性的可以切圖,不可重復(fù)的就和照片處理方式一樣。對(duì)于照片,就只能是裁剪方式了。

前面說了,剪裁的方式圖片設(shè)計(jì)為大尺寸1920px*1200px,壓縮到100KB以內(nèi)。代碼默認(rèn)從左上角開始剪裁一個(gè)區(qū)域,也可以設(shè)置為右下角,和中間區(qū)域。
background-position-x: 0%;
background-position-y: 0%;
為了保證剪裁后圖片的美觀度,找畫面內(nèi)元素較小的圖片,不要那種整張圖片多大一個(gè)物體,比如下面這種:

再來說內(nèi)容,設(shè)置為1000px*700px以內(nèi),因?yàn)橐紤]上下留白。不考慮響應(yīng)式或者動(dòng)效的話可以把內(nèi)容切成透明png圖片給開發(fā)。對(duì)于全屏滾動(dòng)的響應(yīng)式設(shè)計(jì),建議針對(duì)移動(dòng)設(shè)備設(shè)計(jì)一套圖。
交互
設(shè)計(jì)這種全屏滾動(dòng)效果,目的就是好看,大氣,所以交互也是考慮的重點(diǎn)。那有哪些值得借鑒的優(yōu)秀交互呢?這里給大家分享幾個(gè)案例。
視差
利用視覺錯(cuò)位形成的效果。

元素穿插
某個(gè)對(duì)象會(huì)進(jìn)入下一屏展示。

類3D
通過對(duì)平面圖片加透視,位移形成的效果。

PPT效果
即常見的位移,縮放效果。

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

當(dāng)前題目:網(wǎng)頁設(shè)計(jì)—全屏滾動(dòng)效果
URL標(biāo)題:http://www.rwnh.cn/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)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作
宣化县| 湘西| 利辛县| 崇明县| 陇南市| 天镇县| 海伦市| 石柱| 迁西县| 翼城县| 大新县| 莲花县| 上蔡县| 察雅县| 会同县| 呼图壁县| 彭州市| 陆川县| 晋州市| 巴马| 锡林浩特市| 娱乐| 饶河县| 东乡县| 朔州市| 岳阳县| 大渡口区| 石狮市| 庄浪县| 静宁县| 维西| 廉江市| 炉霍县| 黄冈市| 南安市| 陈巴尔虎旗| 顺昌县| 象州县| 九寨沟县| 林芝县| 额尔古纳市|