[問題] 這樣的網頁要怎麼做?

看板Web_Design作者 (mercedesff)時間11年前 (2014/07/20 18:04), 編輯推噓5(5018)
留言23則, 8人參與, 最新討論串1/2 (看更多)
各位大大好 我想請問一下以下的網站是怎麼做的 http://aioninfo.plaync.com.tw/preview/45_0528/index.asp 因為我比較在行的是APP 網頁設計不是我的專業 所以對於以上的網頁感到非常精美又好奇 希望能請問一下它是用到了什麼技術什麼方法...之類的 可以說得天花亂墜一點讓我崇拜XD (您提供的專有名詞我會儘量自己查) 也希望能藉此展開網頁設計的學習旅途... (目前我只會簡單的html + css + 類似用frontpage拉出來的簡單網頁...) 比如我最想問的就是 1. 為什麼右邊的超連結可以讓中間主要的部分跟著移動?這是錨點嗎? 2. 為什麼網頁在最top的時候,背景的女主角很亮,但往下捲動後,她就跟著變暗? 這樣的網頁設計實在很漂亮,怎麼做到的? 3. 一定要用ASP嗎?如果用PHP等等之類的可以做到一樣的效果嗎? 希望能請多指教...謝謝 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 27.52.8.110 ※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1405850676.A.01E.html

07/20 18:35, , 1F
好像沒啥特別的....一個jQuery就可以全部搞定
07/20 18:35, 1F

07/20 18:59, , 2F
1. scrollintoview
07/20 18:59, 2F

07/20 18:59, , 3F
2.我猜是利用透明度
07/20 18:59, 3F

07/20 19:00, , 4F
3.html + css +javascript 就可以
07/20 19:00, 4F

07/20 19:01, , 5F
承3,其實你問的是屬於前端的問題,你說的ASP和PHP
07/20 19:01, 5F

07/20 19:01, , 6F
其實是用來處理後端的
07/20 19:01, 6F

07/20 19:02, , 7F
另外,這個網頁是屬於資料呈現的,沒有太多程式技巧
07/20 19:02, 7F

07/20 19:03, , 8F
重點在於,視覺的呈現,這方面就看天分或是否有美工配合
07/20 19:03, 8F

07/20 19:33, , 9F
keywords: jquery single page scroll plugin
07/20 19:33, 9F

07/20 19:34, , 10F
另外女主角是opacity沒錯 這頁就算用html都可以
07/20 19:34, 10F

07/20 20:06, , 11F
html+jquery+css 就可以 不難
07/20 20:06, 11F

07/20 21:25, , 12F
利用別人寫的 jQuery 的 ScrollTo Module 營造出來的效果
07/20 21:25, 12F

07/20 21:26, , 13F
基本上前端的東西要用 javascript處理
07/20 21:26, 13F

07/20 21:26, , 14F
至於動畫的呈現那些不如先畫好你要哪些效果o.O
07/20 21:26, 14F

07/20 21:27, , 15F

07/20 21:30, , 16F
右邊的menu那裡的動畫處理應該用這套沒錯
07/20 21:30, 16F

07/20 21:31, , 17F
其他部分用 javascript/jQuery 計算位置跟做基本fadeIn/Out
07/20 21:31, 17F

07/20 21:32, , 18F
另外錨點動畫這個也不太需要用到模組就是了 @.@ jQuery原生
07/20 21:32, 18F

07/20 21:32, , 19F
的animate蠻夠用的
07/20 21:32, 19F

07/21 02:41, , 20F
非常感謝各位高手的推文!受教了!
07/21 02:41, 20F

07/21 12:55, , 21F
adobe的muse作這種的都基本款而已了
07/21 12:55, 21F

08/04 11:18, , 22F
這目錄前陣子我同事好像也有用,但改了一個地方
08/04 11:18, 22F

08/04 11:20, , 23F
右邊menu點下後的不要觸發scrollmove的event。
08/04 11:20, 23F
文章代碼(AID): #1JovGq0U (Web_Design)
文章代碼(AID): #1JovGq0U (Web_Design)