完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201501/mac-dock.html
摘要:
2015 年的第一篇文章,寫的是我自己在 2012 年的舊作!?隨著這幾年自己技術的提升,總算是運用了一些 HTML5 的技術,來讓當年做的這組 Mac Docker 效果更加完善,這裡將這個效果的製作方式分享給大家,歡迎和期待各路高手和大大能給予一些建議指教。( 完成範例:mac-dock-demo.html ) Mac Dock 的效果其實不難做,說穿了只用了一點點 CSS3 的 transition 與 transform ,HTML5 的 data-attribute,以及 jQuery 的 animate 而已,真正難的地方在於計算各個 icon 的大小和位置,當初光是想這個演算法就花了整整三天,最後出來只要五行就搞定了,可以參考下圖這個計算草稿:
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201501/mac-dock.html
摘要:
2015 年的第一篇文章,寫的是我自己在 2012 年的舊作!?隨著這幾年自己技術的提升,總算是運用了一些 HTML5 的技術,來讓當年做的這組 Mac Docker 效果更加完善,這裡將這個效果的製作方式分享給大家,歡迎和期待各路高手和大大能給予一些建議指教。( 完成範例:mac-dock-demo.html ) Mac Dock 的效果其實不難做,說穿了只用了一點點 CSS3 的 transition 與 transform ,HTML5 的 data-attribute,以及 jQuery 的 animate 而已,真正難的地方在於計算各個 icon 的大小和位置,當初光是想這個演算法就花了整整三天,最後出來只要五行就搞定了,可以參考下圖這個計算草稿: