HTML5 3d房间陈列展示布局效果


源码介绍

简要教程

这是一款HTML5 3d房间陈列展示布局效果。这个3D布局用于展示各种艺术品,每个房间展示一组图片,可以通过前后导航箭头来切换房间,效果非常炫酷。

该特效的动画使用anime.js来驱动,图片加载使用了imagesLoaded库。

这是一个体验性的设计效果,需要浏览器支持CSS 3D Transforms和CSS Flexbox才能查看完整的效果。

下面是该HTML5 3d房间陈列展示布局效果的一些屏幕截图:

下面是初始化时的房间效果:

HTML5 3d房间陈列展示布局效果-1

在点击前后导航按钮之后,房间进行了切换:

HTML5 3d房间陈列展示布局效果-2

当用户点击了右上角的菜单按钮,则会显示全屏的导航菜单:

HTML5 3d房间陈列展示布局效果-3

下面是用户点击了右上角的信息按钮之后显示的描述信息:

HTML5 3d房间陈列展示布局效果-4

该HTML5 3d房间陈列展示布局效果的github地址为:https://github.com/codrops/Exhibition/



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部