如何根据浏览器的滚动位置浏览GIF动画?

问题描述 投票:0回答:1

我有一个要在要构建的React Web应用程序中使用的GIF。我希望能够根据站点的滚动位置逐步浏览动画。即当我滚动浏览页面的50%时,我希望gif将图像显示在其50%的位置。gif将在div中,位置:固定。因此,它将始终位于浏览器的右上角。

Web应用程序是一个React应用程序,因此,如果有可能存在一个实现此功能的React库,那就太好了。

谢谢!

reactjs scroll gif
1个回答
0
投票

[似乎至少有一个现成的React实施来处理与GIF的交互/播放,可能可以帮助您进行项目。

React Gif Player是一个React组件,它创建一个类似于Facebook实现的GIF播放器。它还带有pause函数(和示例),您可以使用该函数根据滚动位置以编程方式在相应点处暂停GIF。

Gif Frames是用于提取GIF帧并将其保存到文件的纯JavaScript工具。您可能可以创建单个框架,并使框架与滚动的某些点相对应。

我不知道可以完全实现您所期望的gif播放器,尽管其他人也可以在这方面提供帮助。如果没有,您可能必须结合使用它们,或者自己做一个完整的实现。

希望这会有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.