在Paydirt的主頁輕鬆放大幻燈片放映效果

Question

我完全被幻燈片https://paydirtapp.com/吹走了，任何人都可以得到它如何實現的線索？我猜這是一些複雜的html5畫布 - 巨型珍寶？

Answer 1

TL; DR：使用您的瀏覽器的檢查員全力以赴找到它！

可能沒有您期望的那麼多的畫布使用。使用瀏覽器檢查，你可以快速查看是怎麼回事的基礎：

正如你可以看到上面有三個主要組成部分：放大鏡，截圖和消息。使用CSS3，爲放大鏡的每個部分（陰影，發光和畫布）創建投影和圓形效果（框陰影& border-radius）。

畫布部分就是放大鏡下的圖像。使用畫布可以模糊圖像（當放大鏡動畫時，這三個元素的容器管理移動和尺寸（比例）。圓形修剪類效果僅使用邊框半徑樣式。

image_wrapper類保存了遊覽所經歷的所有單獨屏幕截圖，其中有更高分辨率的圖像可能是因爲canvas元素不需要爲「縮放」版本加載單獨的圖像

然後有magnifier_message這個類只包含文本，它通過javascript進行更新 - 這裏沒有什麼太花哨的東西

To將其全部包裝起來，包含這三個元素的父級具有（OSX桌面的）背景圖像。

對於畫布的工作 - 這不是爲了心臟 - 它們在JavaScript下的/assets/promo-0e644...js文件。如果你想有一個良好的閱讀（這是在窗口底部的花括號鍵）WebKit的檢查可以重新格式化的JavaScript所以這是一個有點更具可讀性：

可悲的是，雜耍不（progressive enhancement）：（progressive enhancement）:(