如何重新創建Google Zeitgeist 2013中所示的圖片庫動畫？

Question

Google zeitgeist 2013頁面顯示規則的圖像網格，並在水平和垂直鼠標拖動動作中重復。 看起來很棒！

是否存在現有的js開放項目與Google zeitgeist 2013相同？

Answer 1

我認為他們正在使用CSS轉換來實現這一目標。 看看我在瀏覽Zeitgeist頁面時捕獲的這個簡短的.gif動畫，您可以注意到transform屬性如何動態更改值。 我認為它是基於CSS的，但可能是JS發揮了作用。

我還檢查了它們的4個JS文件，它們似乎都是Angular JS或Prototype庫，而且似乎也有JS參與其中，如果您注意到選擇器js-detail--searches_grid但這是Google的自定義解決方案，因此我不知道有任何類似的實現，但是如果您花足夠的時間研究它的工作原理，即逆向工程，那么您也可以創建一個。

我對此進行了更多研究，結果發現它使用的是CSS transform matrix ，您可以在此處查看 。 一開始要理解是一件很復雜的事情，但是卻很有收獲。 矩陣方法采用六個參數，其中包含數學函數，這些參數使您可以：旋轉，縮放，移動（平移）和傾斜元素。 從Google使用的代碼可以明顯看出這一點（請參閱我提供的圖像中的6個參數）。