免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

網頁設計—全屏滾動效果

2022-05-14    分類: 網站建設

因為經常有小伙伴在群里問網站全屏滾動相關問題,以前我雖然做過相關設計,但是時間久了,加上項目簡單,也遺忘的差不多了,最近比較閑,就去搜了相關資料,憑借以前的設計經驗,寫下這篇文章。

問題引入
全屏滾動是網站常見的交互效果,一般應用在企業官網,產品展示等場景,既美觀又大氣。比如:

對于這種效果的設計,大家的問題一般是:設計稿尺寸多大呀?以及內容區域設置多大呀?有什么注意事項?等等。我認為,之所以會有這些疑問,是因為大家沒有明白實現這種效果的原理。
全屏滾動原理
先把全屏滾動效果的設計分兩部分: 背景圖+內容。(這里的背景圖指紋理或者照片作為背景)

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

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

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

再來說內容,設置為1000px*700px以內,因為要考慮上下留白。不考慮響應式或者動效的話可以把內容切成透明png圖片給開發。對于全屏滾動的響應式設計,建議針對移動設備設計一套圖。
交互
設計這種全屏滾動效果,目的就是好看,大氣,所以交互也是考慮的重點。那有哪些值得借鑒的優秀交互呢?這里給大家分享幾個案例。
視差
利用視覺錯位形成的效果。

元素穿插
某個對象會進入下一屏展示。

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

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

最后做個小廣告:創新互聯專注于:成都網站設計、成都小程序開發

當前題目:網頁設計—全屏滾動效果
URL標題:http://m.newbst.com/news48/153398.html

網站建設、網絡推廣公司-創新互聯,是專注品牌與效果的網站制作,網絡營銷seo公司;服務項目有網站建設

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

外貿網站制作