最近一個 WooCommerce 獨立站網頁設計趨勢是視差滾動,今天説説 WooCommerce 獨立站網頁設計中的熱點技術視差滾動,如果過度使用會適得其反。本文中這些 WooCommerce 獨立站網頁設計效果您絕對沒見過!視差滾動例項展示
1 、 firewatch
每一層樹都獨立移動
我們見過的視差滾動中最美麗的一個例子是這個網站的遊戲 firewatch 。它的偉大,常伴隨視差效果的東西,用在網頁的頂部,其餘頁面您可以清晰的讀取信息。
2 、 Garden Studio
分層的景觀,使它看起來三維
與此類似,花園工作室也選擇在他們的網站上使用視差技術,在他們的網站的頂部設計一個明智和愉快的方式。變化是微妙的,不顯眼但也獨具風格。如果您有 WordPress 外貿獨立站網站建設、 WordPress 站羣網站優化、 logo 設計、品牌設計、印刷等產品服務需求,可以諮詢跨飛獨立站。
3 、 GitHub 的 404
GitHub 的 404 打破視差的規則形成一個讓人迷惑的效果
它真的是一個有趣的網頁,頁面會跟隨滑鼠移動而抖動,這不是嚴格意義上的視差滾動的效果。但是,採用分層來增加視覺深度。背景比前景移動速度更快,讓人產生迷惑,有超凡脱俗的感覺。
4 、 Jess & Russ
每一個插圖都有一種深度感
花式滾動效果和插圖是這個網頁最主要的吸引力,構建了一個美麗的網站,並講述了一個故事。視差滾動是用來在整個增加深度的插圖。
5 、 alquimia WRG
Alquimia WRG 使用視差元件來模擬三維空間環境
HTML5 畫布是用來製作動畫的初始載入影像。通過滑鼠移動建立三維空間環境,是網頁中微妙的視差元素。頁面導航是通過簡單流暢的頁面滑動效果,這是通過改變與 script CSS 屬性來實現。該工作頁包含一個選定專案的簡單列表,在選擇的時候,平滑的滑動效果中顯示更多的信息。