鼠标悬停菜单上内容全屏切换效果

全屏循环效果,可在悬停特殊菜单项时显示图像的快速预览。

今天我们想和你分享一点艺术效果。这个想法是在悬停在特殊链接上时显示图像的快速全屏预览。在我们的演示中,我们使用摄影师网站的概念,其中链接到他们的作品触发效果。在悬停时,一些照片会在循环中快速显示。单击链接后,当前图像会缩小并移动到网格中的位置。动画是使用TweenMax制作的

查看演示 下载源代码

我们的演示登陆页面右上角有一个菜单。

鼠标悬停菜单上内容全屏切换效果

“摄影”链接将触发循环。循环将仅包含将在视口中可见的网格项:

鼠标悬停菜单上内容全屏切换效果

实际点击“摄影”链接后,我们缩小当前图像并将其设置为网格中的位置:

鼠标悬停菜单上内容全屏切换效果

点击后退按钮或左上角的页面名称时,我们会再次显示目标网页内容。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/courses/261390.html

(0)
上一篇 2022年5月24日 14:50
下一篇 2022年5月24日 14:55

相关推荐

发表回复

登录后才能评论