Search
「視差滾動(parallax scrolling)」是一種近來很夯的網頁設計技術。指的是利用背景圖和前景圖滾動速度的不同，而製造3D視覺效果。每次滑這種網頁時都覺得好賞心悅目啊~><
下面是小編覺得很讚的視差滾動網頁：
http://www.spaceneedle.com/home/
http://shibui.me/web/scroll/index.html
http://www.dangersoffracking.com/
http://www.flatvsrealism.com/
http://makeyourmoneymatter.org/
http://www.exsus.com/highway-one-roadtrip
[範例] 以 CSS 與 JavaScript 做出 3D 視差（Parallax）效果的立體邊框
這篇文章示範了如何利用 CSS 與 JavaScript 做出 3D 視差效果，並用此效果呈現出立體邊框。如果您想要讓自己的輸入框被使用者「更加」注意到的話，不妨用這招試試看：
http://css-tricks.com/3d-inset-parallax-effect/
---
歡迎加入 Google+ 「紀老師網頁程式設計」私密社團，完全免費！盡情學習 HTML、CSS、與 JavaScript：
（更多資源、更快速的分享、更專注的主題、更多樣的活動）
https://plus.google.com/communities/100793154849235819235
（申請制，點擊後請靜待至多 24 小時審核）
2013 年八個網站設計趨勢
自從 1993 年第一個網頁出現在地球表面後，算算也過了 20 年了。這 20 年來，網頁設計從樸實無華，轉向以 Flash 為主的互動設計，又回頭往「簡約」風走。讓我們來看看，2013 年流行的網站設計趨勢為何？
1. 單一頁面網站：
將所有資訊全數集中於一頁、讓使用者一直往下捲就可以看到所有內容。以前會因為一次塞太多東西，網頁載入太慢，怕使用者沒耐心等，所以倡議網頁一頁不要超過兩個 PgDn。現在由於網路速度快，又有 AJAX 這種部分載入功能，為了讓使用者不必按「下一頁」，又走回「單頁風格」。
2. 大照片
文字太單調、Flash 太沈重。所以現在流行介於兩者中間的「照片」，將它放到很大，作為網頁主體。不僅美觀，也夠吸睛。
3. 方塊狀設計
就是類似 Windows 8 那種拼貼風。
4. 大圖示
如果你有 3 個要點要講，何不設計三個大圖示，讓人一目了然呢？
5. 簡單
像 Google、Dropbox 首頁，除了必要的功能外，提供大量的留白。不僅讓使用者一下子就了解你的網站是做什麼的，也能簡化使用上的困難度。
6. 適應各種螢幕尺寸
這個是因應平板與手機瀏覽網站的需求而興起的。作法是準備好幾套 CSS 排版版型，偵測使用者螢幕大小後分別套用之。
7. 視差設計（Parallax）
此類型網頁運用兩個或兩個以上的背景或物件，以不同速度移動，造成不同感受的視覺體驗，打破線性單調的網站呈現方式，是目前接受度頗高的設計趨勢。
8. 字體造型設計（Typography）
網站設計時運用特殊字型，不但視覺感較為強烈，也較能吸引網友目光。
原文連結在此：
我們喜愛的網站設計趨勢（上）：http://www.bnext.com.tw/focus/view/cid/103/id/27278
我們喜愛的網站設計趨勢（下）：http://www.bnext.com.tw/Article/view/cid/103/id/27289
❤歡迎訂閱Free subscribe❤
https://pse.is/submytube
---------
2020年WIX 中文教學-Wix Editor X #02 | parallax scrolling & menu settings
上一篇影片介紹
2020年WIX 中文教學-Wix Editor X #01
https://www.youtube.com/watch?time_continue=4&v=9KfsUIFYejA
✪✪✪FYR 補充資料如下✪✪✪
■聯絡我們 Contact Us
https://pse.is/forums_op
■更多教學
https://freeday.cc/
■設計資訊相關討論區
https://freeday.cc/forum/index.php?p=/categories/freesource
■Facebook
https://www.facebook.com/wolfmarketing66/
■迷你購一站式電商
https://room404.tw/minigo/
■Wordpress免費架網站教學
https://www.youtube.com/playlist?list=PLx1Sz7nuD5XoCf4-RN13R_l72iXhq0zl2
■Wix免費架網站教學
https://www.youtube.com/playlist?list=PLx1Sz7nuD5XqtWmmGTag3sOeUJf9Q38s6
❤小額贊助頻道 Donate us a cup coffee❤
https://www.paypal.me/178yo
❤歡迎訂閱Free subscribe❤
https://pse.is/submytube
---------
免費網頁設計工具 | Webflow 中文教學-02 | parallax scrolling animation & anchor
實作範例
http://yt-wixpress-org-test.webflow.io/
Parallax image backgrounds, gradients, and video backgrounds
https://www.youtube.com/watch?v=GxhbxvUIUd4
✪✪✪FYR 補充資料如下✪✪✪
一頁式購物網站線上申請
https://room404.tw/minigo/
■Wordpress免費架網站教學
https://www.youtube.com/playlist?list=PLx1Sz7nuD5XoCf4-RN13R_l72iXhq0zl2
■Wix免費架網站教學
https://www.youtube.com/playlist?list=PLx1Sz7nuD5XqtWmmGTag3sOeUJf9Q38s6
❤小額贊助頻道 Donate us a cup coffee❤
https://www.paypal.me/178yo
❤歡迎訂閱Free subscribe❤
https://goo.gl/mG0yTA
---------
✪✪✪FYR 補充資料如下✪✪✪
【最新Wix中文教學】1-3 輪播圖 & parallax背景效果
wixsite demo 英語家教
https://178gogogo.wixsite.com/janet-english
#網頁設計 #廣告行銷
❤小額贊助頻道 Donate us a cup coffee❤
https://www.paypal.me/178yo
網頁 設計- 視差捲動(PARALLAX SCROLLING) 教學http://www.tellustek.com/web-design/156-web-design-58.html. ... <看更多>
視差滾動(Parallax Scrolling)練習：運用JavaScipt、jQuery和RWD響應式網頁設計，並導入SASS/SCSS。 ... <看更多>
parallax網頁 在 免費網頁設計工具| Webflow 中文教學-02 | parallax scrolling ... 的推薦與評價
免費 網頁 設計工具| Webflow 中文教學-02 | parallax scrolling animation & anchor. 885 views · 3 years ago ...more ... ... <看更多>