<noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>

    <noframes id="jjr3b"><span id="jjr3b"><span id="jjr3b"></span></span>

    <noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>
    <form id="jjr3b"></form>

    <noframes id="jjr3b">
      18868949445

      寧國高端網站制作:什么是視差滾動,舉例說明

      日期:2020-05-11 閱讀:257   作者:寧國網站設計開發公司

      回到2011年在網上首次亮相時,視差滾動效應作為一種新的、令人興奮的網頁設計趨勢掀起了波瀾。自那以后,許多互聯網潮流來來去去,但視差滾動似乎已經確立了自己作為一項基本設計資產的地位,這一資產肯定還會繼續存在。

      什么時候創建網站,視差滾動可以是一個偉大的方式,增加深度和運動的瀏覽體驗。下面,您將更深入地了解視差滾動是什么,其中包括10個可供學習的鼓舞人心的網站示例和一些模板讓你開始:

      什么是視差滾動?

      視差滾動是一種網頁設計技術,它的背景移動速度比前景慢。這就產生了3D效果,當訪問者向下滾動網站,增加了一種深度感,并創造了一種更沉浸的體驗。

      視差是建立在一種光學錯覺的基礎上的,這是因為人眼感覺到離我們很近的物體比離我們更遠的物體更大。因此,我們感覺到遠處的物體比那些近在咫尺的物體移動得更慢。

      這種認為背景的動作比前景慢的感覺早已被不同媒介的視差所采用,從而產生了一種現實的效果。它的第一次使用是在傳統動畫中,最早可以追溯到迪斯尼的白雪公主和七個小矮人,而在電子游戲中,如超級馬里奧。隨著css和HTML的進步,視差效應后來演變成網頁設計就像我們今天所知道的。

      這里有十個優秀的視差滾動例子,這些例子是用Wix構建的,為您的網頁設計靈感精心挑選:

      視差滾動示例

      01. 溫和設計

      埃米莉·德格羅斯博伊斯是蒙特利爾的視覺藝術家,也是“溫和設計”的創始人。她的投資組合令人印象深刻的歡迎:一系列復雜的全屏圖像,顯示在一個長卷軸。通過使用視差,從一幅圖像到另一幅圖像的過渡不僅變得更加平滑,而且還增加了一種深度感,就像圖像在彼此上方輕輕滑動一樣。

      Mild Design studio website

      02. 特拉維夫

      2019年的OFFF節日網站帶著游客們一起去享受一段令人興奮的旅程,它的粉紅色背景,巨大的文本和動態的感覺。該頁也充滿了運動,通過一個組合動畫和視差。當我們向下滾動頁面時,我們展示了會議的視頻循環、演講和活動,以及許多閃爍的眼睛,讓我們有了心情。

      OFFF Tel Aviv 2019 Wix website

      03. 克里斯·克魯

      航天工程師克里斯·克哈特的大膽簡歷網站就像創新一樣專業。該網站的設計和交互性成功地將克里斯的大部分個性注入了原本可能是枯燥的技能、經驗和教育的列表中。利用顯示滾動效果,Chris將簡歷頁或名片的照片放置在屏幕中間,并允許背景在它們停留時迅速變化,從而獲得一個令人驚訝的結果。

      Chris Covert resume website

      04. 陳常薇

      設計師和插畫家陳艾薇對視差的使用造就了一個獨特的投資組合網站在其中,她的作品逐漸顯露出來,仿佛是通過滾動魔法。常春藤帶領我們完成她的多學科作品:一幅時尚插畫慢慢地變成了一件真實的服裝,然后在一次時尚拍攝中變成了一個整體的外觀。這是一個迷人的效果,既放大和解釋網頁的內容。

      Ivy Chen portfolio website

      05. 工業珠寶

      珠寶設計師Hila Rawet Karni的網站使用視差創建一個有趣的,多層次的卷軸。通過將圖片和文本放在一起,并使它們以不同的速度移動,頁面似乎在不斷變化,形成新的構圖,我們滾動。例如,請注意,當其他元素在旁邊漂移時,穿著黑色連衣裙的女性中間的照片是如何留在原處的,直到該女性最終也從屏幕上展開,為其他部分騰出空間。

      Industrial Jewellery web design

      06. 墨藍色動物救援

      除了非??蓯壑?,Inky Blue乙酰膽堿公司的網站還以有凝聚力為榮。配色方案藍調和中性人(這自然來源于組織的名字),以及對運動的極大利用。在網站的頂部,商業名稱的大寫字母在屏幕上運行。下面是一個視差效應,揭示兩個毛茸茸的小朋友,因為我們滾動。一直往下看,在主頁底部,同樣類型的動畫從更早的時候就在頁腳上重復了一遍,使網站成了一個完整的圓圈。

      Inky Blue Animal Rescue web design

      07. 卡莉·克洛斯

      這個優雅干凈的網站是完美的。建模組合給超級名??ɡ颉た寺逅?。設計風格的目的是簡單的選擇其顏色的白色,灰色和黑色,并在大量的白色空間。同時,這種優雅的外觀與小的觸摸相結合,使網站遠離尋常:粉紅的微妙使用,沉重的黑色字體,以及由視差和視頻循環插入的運動感。

      Karlie Kloss modeling portfolio

      08. 哈娜·克尼佐娃

      倫敦Hana Knizova‘s攝影網站特色是一個長卷軸的視差圖像。主頁上的照片介紹了Hana的各種項目和攝影師的許多專長,從編輯到肖像再到產婦照片。同時,圖片也雙重作為網站的菜單,創造了一個獨特的導航系統,每個圖像導致一個不同的內部頁面。

      Hana Knizova's photography website

      9. Vale das Nuvens酒店

      這個巴西人酒店網站由幾條帶視差滾動組成。每條條子提供不同的呼叫行動按鈕并擁有酒店地面和設施的圖像或視頻。文本放置在每一條的中心,移動的速度略不同于背景照片,實現了一種平滑的,容易的視覺效果。

      Hotel Vale das Nuvens website design

      10. 弗蘭基·拉特福德

      這個個人網站平面設計師和數字游牧民弗蘭基·拉特福德五彩繽紛,充滿活力,充滿活力。陽光明媚的頂部褶皺具有幾層視差:弗蘭基自己在一張直率和可關聯的圖片中保持靜止。在這張照片的背面,她的名字向上滑動,然后是在同一張圖片上滑動的生物部分。剩下的平面設計師網站更微妙地使用視差滾動顯示各種信息細節。

      Frankie Ratford's personal website

      啟用Wix網站上的視差滾動

      寧國高端網站制作若要啟用Wix網站上的視差滾動,請使用具有顏色、圖像或視頻背景的條帶。將多條條帶組合在一起,可以豐富效果。

      如何在條帶上啟用視差滾動:

      1.在編輯器中,單擊左側菜單上的“添加”,然后選擇“Strip.”

      2.單擊“變更地帶背景”。在這里,您可以將背景更改為您選擇的顏色、圖像或視頻。

      3.單擊條形背景上的“設置”,并在“滾動效果”下選擇所需的效果(視差、顯示、縮放或淡入)。

      4.查看預覽模式下的效果,并在需要時進行修改。


      网赚团队