17例視差滾動效果網站設計案例

2020-12-19 網際網路的那點事

17例視差滾動效果網站設計案例

P迪

|

2013-10-17 8:15:37

|

科技資訊 10,127

摘要:視差滾動(Parallax Scrolling),通過多層背景的移動帶來層次錯落的視覺體驗。你所要做的就是不斷滾動滑鼠,去體驗本期介紹的這17個網站。Baylie WordPress ThemeBroken TwilltheQ cameraBetty and BettyScytaleSrgintCyclemonSojourn N ...

視差滾動(Parallax Scrolling),通過多層背景的移動帶來層次錯落的視覺體驗。你所要做的就是不斷滾動滑鼠,去體驗本期介紹的這17個網站。

 



相關焦點

  • 寫給新手的滾動視差設計經驗(附9個教科書級案例)
    視差滾動特效是用戶在滾動頁面的過程當中,頁面中不同元素隨之進行不同速率的運動,所營造出的接近3D的視覺效果。設計中增添音頻和視覺為內容賦予了更多的生機,傳達出許多純文字無法捕捉到的內容。滾動視差以步步推進的方式傳達出內容,以吸引人們閱讀,它利用了網頁的優勢呈現出非常棒的視覺效果。當你想要表達一個細膩故事時,考慮使用滾動視差設計滾動視差設計特別適合用來敘述一些細膩內容,隨著內容慢慢鋪開,通過設計能使得內容變得更加鮮活。滾動視差能夠突出故事內容,並把你吸引到它的敘述中。
  • 2019年23個激發靈感的最佳視差網站
    網站設計領域的傳統思想認為,網站的設計應儘量減少用戶滾動的需求,並使最重要的信息保持在網站第一屏。但是,近年來發生了很多變化,如果您考慮一下,我們生活在一種滾動文化中。視差滾動是一種用於Web設計的特殊滾動技術,該技術在整個網頁中的背景圖像移動速度比前景圖像慢,從而在二維站點上產生深度錯覺。它是目前網頁設計中最常用的設計技術之一,但是您甚至可能還沒有意識到自己已經經歷過。這是您已經習慣的簡單動作,它使用戶在網站上感到動態和互動。但是,如果選擇使用此功能,需集思廣益,視差也可能會影響移動體驗,這一點很重要。
  • 【漫談時間】遊戲瑰寶 #3:Moon Patrol 視差滾動和氪金鼻祖
    視差滾動(Parallax Scrolling)和氪金?西山隆志原本的志向是成為一名新聞記者。在他獲得了一份 Irem 的兼職工作之後,他也嘗試著寫一些遊戲策劃。:視差滾動。這款遊戲中滾動的捲軸在當年已不是新鮮事兒了,但是遊戲背景的視差滾動,還真的是第一次被大家真實體驗。
  • 89平幸福現代風,結合鏡面與斜角視差設計,呈現交迭效果
    89平幸福現代風,結合鏡面與斜角視差設計,呈現交迭效果材質的選取與設計的概念息息相關,體現設計美學,運用上乘材質,搭配合理的剪切,才能傳達出設計師獨具匠心、嘔心瀝血的設計方案精美之處。材質的延伸與轉折讓空間的通透和延續更加明顯,自然風的暗門巧思同樣給屋主帶來了驚喜,愜意溫馨的的過度,結合鏡面與斜角的視差,呈現出不一樣的交迭效果。
  • 8個超棒的HTML5網站設計欣賞
    HTML5又和CSS及 其Javascript如何一起改變我們的網站設計和實現的呢? 帶著這些問題,我們將推薦給大家8個超棒的HTML5網站設計。其中包括了Jordan主站的視差滾動特效,它將滾動帶入了一個新的境界!還有Draw stick man,這個網站允許你使用你的繪畫技能完成你自己的作品。希望大家喜歡!如果你對於HTML5的互動應用有興趣,這個網站絕對值得你玩玩。
  • 臺灣網站設計案例賞析:怎麼設計美觀網頁
    雖然網站設計的風格千差萬別,但同一文化地區的網站設計有趨同趨勢。但趨同不是完全相同,一些臺灣地區企業網站,其設計風格和大陸略有不同,但也有很多值得參考的地方。下面就從幾個臺灣網站設計案例來給大家分析一下,怎麼做好臺灣網站建設。
  • Axure教程-錨點滾動效果
    今天給大家分享一個axure案例,錨點滾動效果,看到名字,大家可能覺得有些陌生,相信這個效果大家並不陌生,在許多html5的網站都有用到,下面直接上示例原型下載地址。
  • 40個最佳水平滾動的網站
    對於一些領域,網頁設計可以變得更有特色一些,比如說針對玩遊戲比較多的網民可以多考慮採用水平滾動的頁面設計,畢竟很少人用上網本和筆記本玩吧,臺式機的解析度和寬度一般來說都是很大的了,而且會越來越大的。這篇文章翻譯自WDL的40 of the Best Horizontal Scrolling Websites。另外翻譯完後才發現,已經有人翻譯了這篇文章,更加相信這是一篇有價值的文章。
  • 「網站正在建設中」的頁面設計案例
    維護一個網站需要大量時間和耐心,你需要更新內容,刷新設計,甚至全部刪除重新設計。這時候我們就需要製作「網站正在建設中」的頁面。雖然「網站正在建設中」的頁面是暫時的,但仍需將它設計得好看、井井有條,這對品牌形象很重要。所以,戴上工具包背上工具箱,和我們一起來看看20個「網站正在建設中」頁面的精彩案例。
  • 10個人人必知的網頁設計術語-UI博客精選
    請注意,響應的設計概念不是簡單地重新設計內容。想學習關於響應式的童鞋,可以先看看這《15個優秀的響應式網站設計》,再從基礎開始,學習一下《想學響應式設計?重點通常是通過使用大小,顏色,字體和特殊效果,如陰影等表現出來。視覺層次的結果往往是一個信息架構的過程,一個有意識的決定。10. Infinite/parallax scrolling(無線滾動/視差滾動)
  • 信息層級的新維度:視差運動
    圖四說了這麼多視差運動的原理,其實就是為了讓設計更加接近本質,更有說服力。當看到一個好的設計時,不應忙著借鑑,應該深入思考其設計的源頭。就好比剛剛列舉的視差運動情況,大家都常見後景比前景慢的現象,但只要稍作分析就能發現,其實也會存在後景比前景快的情況。四、視差運動與交互視差運動的不同形式剛好對應著不同的屏幕交互:平移運動對應著滑動屏幕,旋轉運動對應著轉動屏幕。隨著交互動作的發生,視差效果也會同時表現出來,如圖五、圖六所示。
  • 20個優秀主頁設計案例
    虛擬實境或360°場景漫遊頁面可以更立體地向用戶展示公司業務及其產品,達到鞏固其與品牌之間聯繫的效果。定期更新主頁內容、及時反映客戶所需或分享公司的最新動態,這些都是使網站保持活力並與訪客加強聯繫的方式。IBM.com提供了很多動態主頁布局的案例。
  • 著名網站重新設計的10個經典案例
    當你重新設計網站的時候,功能實現與用戶體驗是你需要考慮的首要因素。以下的十個重設案例中,包括了著名的社交網站Facebook,搜索巨頭Google,視頻巨擘Youtube,以及權威的影視評分網站IMDB。
  • 網頁設計中常見的五種互動設計錯誤
    下面是另外一個案例,這個名為Safety on the Slopes 的項目是為了說明冬季運動的危險的,整個網站的設計整潔,交互也直觀。網站設計也有所創新,但是同時是以用戶交互直覺為先決條件,以身臨其境為目標。
  • 傳統網頁設計都有什麼風格類型?
    一、扁平化設計扁平化是近些年來比較流行的網站設計方式,這種設計的目的是消除複雜性,使頁面更簡單,即刪除所有不相關的裝飾。這是一個新的設計理念,很多網站公司現在都在推出這種風格的網站設計。它在網站設計風格上也非常流行,未來大家也會看到更多的這些設計。三、全屏網頁設計全屏是近年來網頁設計的一種趨勢。它的典型特徵是純淨、空白、簡單、舒適。如今,許多網站將採用全屏設計。一般的做法是以漂亮的圖形為背景,加上合理有序的頁面布局,文字短小新穎,注意排版的細節。
  • 「MD規範」1.1-Material Design設計案例講解-Basil
    one 點設計-木木翻譯Basil是一個菜譜app,使用了MD設計組件和主題創造了一個令人激動和易於探索的品牌體驗。在電腦上可以使用垂直滾動條瀏覽每個章節的內容,平板上則使用水平滾動條。選擇菜譜後,使用Tabs(選項卡)在配方和工序之間切換。使用自定義Stepper(步進器)組件顯示步驟。手機導航在行動裝置上,可以通過向下滑動以顯示導航抽屜來訪問Basil的主要部分。選擇一個部分之後,水平滑動切換菜譜。
  • 著名網站重新設計的10個經典案例-UI博客精選
    網站的重新設計可能會為它的成長和發展帶來新的契機。隨著時間的推移,網站的訪問者變了,而網站本身也有必要隨之進化。它並不一定非得和過去一樣,你可以隨著網站設計的趨勢重新構建它。當你重新設計網站的時候,功能實現與用戶體驗是你需要考慮的首要因素。以下的十個重設案例中,包括了著名的社交網站Facebook,搜索巨頭Google,視頻巨擘Youtube,以及權威的影視評分網站IMDB。看看這些案例,再點擊每張圖片上方的連結訪問原始網頁,你可以對比以下它們的差異。琢磨一下為什麼這些重設是成功的,你可能會從中受益匪淺。
  • 2021年UX設計趨勢
    像Behance和Dribbble這類專業的設計平臺中已經出現了很多案例,我們有足夠的理由相信,這一風格將在2021年被大量的使用在各類產品中。圖片來源:dribbble.com(Varsha Singh設計)視差效果和3D元素並不是體驗設計中新出現的內容,我們已經在很多網站中看到了這類設計的實現
  • UX設計細節:無限滾動VS分頁
    本文共 2566 個字,預計閱讀 7 分鐘,記得點擊上面的 藍字 關注我哦~在頁面內容過多時,很多設計師不清楚應該選擇無限滾動還是分頁設計?