蘋果Mac Pro官方網站是怎麼運作的?

5 / 10, 2014 Apple , CSS , JS , mac , 推薦網站

大概在去年蘋果更新了Mac Pro,變成黑色垃圾桶(?),但是最令我意外的是這垃圾桶可以煮火鍋他的官方網站設計,實在很驚人,可以說是神之作,有豐富的動畫、方便的操作和讓人有種想要立刻去買的衝動的那種設計,實在令我非常著迷,於是最近就無聊分析了一下Mac Pro官方網站的設計


註:以下圖片太小的都可以點擊放大
首先打開開發者工具,研究一下架構,網站主體被包在#wrapper裡面
mac-pro-site-1

進入畫面時,會發現有個#introcontainer,顧名思義,這就是一開始載入時的動畫,用video tag播放的
mac-pro-site-2
影片網址:http://movies.apple.com/media/us/mac-pro/2013/96614028-695e-478a-8db8-0ad1c7b42925/video/macpro_intro_desktop.mp4

接下來繼續往下看,當#introcontainer被隱藏後,#videocontainer就要出場了,當然想也知道裡面一定就是主體的影片囉
mac-pro-site-3
影片網址:http://movies.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4

移動時會被加上-webkit-transform: translate3d(0, -20px, 0);,這就是轉場特效的源頭
mac-pro-site-9

轉場時#curtain,類似「窗簾」的功能,負責fadeIn和fadeOut
mac-pro-site-5

播放影片到一個段落時,影片就會暫停播放並隱藏,改由圖片顯示,在#stillcontainer裡面,class=”visible crossFade”代表就是目前的頁面
mac-pro-site-6

繼續看,#panelcontainer當然就是panel的容器,打開來就是每一個頁面的資料,而目前正在瀏覽的頁面會是class=”panel border-bottom show front”,前後兩者則是class=”panel border-bottom show”
mac-pro-site-4

最後,到底是怎麼指定每一頁的影片要播放到哪裡?原來通通藏在旁邊的list啊,data-seek-time是開始時間,播放到下一個頁面的data-seek-time為止
mac-pro-site-8

HTML主體分析完成,那Javascript呢?所有的JS都藏在這裡:
http://images.apple.com/v/mac-pro/home/b/scripts/overview.js
基於我對JS不熟,就不加以分析囉

另外還有一點要提起,以上都是使用Chrome作研究,Firefox並不會有Video,而是會下載數百張圖片作canvas動畫,大概是因為Apple不想準備ogg格式吧我猜
mac-pro-site-10
mac-pro-site-11

  • 頻果?

    • s3131212

      謝謝你的挑錯字神功

  • 滿強大的

    • s3131212

      Apple的設計師都很神人

  • secret

    Firefox 可以播放 H.264 跟 VP9 喔!!
    Cisco(思科)開放了他們家的H.264編碼技術
    http://www.ithome.com.tw/node/83484

    • s3131212

      拜託我是在他們公布原始碼前一天寫這篇文章的欸,當時不能啊,況且Apple官網也沒有要更新的意思

      • secret

        所以是我錯囉?

        • s3131212

          我又沒怪你….別那麼敏感,我只是想表達我文章沒寫錯,是時間所造成的矛盾
          (而且其實我不是很喜歡Firefox)

          • secret

            每個瀏覽器都有特色

            也都各自擁有愛好者

            • s3131212

              IE也有他的愛好者XD