在Paydirt的主页上幻灯片放映时出色的放大镜/放大效果

Question

我在https://paydirtapp.com/的幻灯片中完全被吹走了，任何人都有关于如何实现的线索？我猜它是一些复杂的html5画布mumbo-jumbo？

Answer 1

TL; DR ：使用浏览器的检查员全力以赴！

可能没有你想象的那么多画布使用。使用浏览器检查器，您可以快速查看此处发生的基本操作：

从上面可以看出，有三个主要组件：放大镜，屏幕截图和消息。使用CSS3，为放大镜的每个部分（阴影，光晕和画布）制作投影和圆形效果（box-shadow＆amp; border-radius）。

画布部分只是放大镜下的图像。使用画布可以模糊图像（当放大镜动画时。这三个元素的容器管理移动和尺寸调整（缩放）。圆形裁剪效果只使用边框半径样式。

image_wrapper类包含巡视经历的所有单独屏幕截图。可能存在比所需图像更高分辨率的图像，因为画布元素不必为“缩放”加载单独的图像。在版本中。

那时只有magnifier_message类只包含文本。它是通过javascript更新的 - 这里没什么特别的。

要将其全部包装起来，包含这三个元素的父级具有背景图像（OSX桌面）。

对于画布工作 - 它不适合胆小的人 - 他们在/assets/promo-0e644...js文件下的javascript中。 Webkit的检查员可以重新格式化javascript，这样如果你想要一个好的阅读（它是窗口底部的花括号按钮），它就会更具可读性：

可悲的是，旁观者没有优雅地降级（或progressive enhancement的任何迹象）:(