当我在网上冲浪时,我看到了这个:http : //www.enter-the-void.co.uk/#/menu 你知道用 jquery / html5 做这个吗?
先感谢您。
编辑 :
最后我认为最好的方法是使用这种方法:
- 每个示例创建一个高度为 100% 且宽度为 1200 像素的容器 div
- 在这个容器上创建并修复许多小 div
- 使用 jQuery 获取鼠标位置并将容器 div 向右或向左移动
- 当容器移动时,在小 div 上添加带有 CSS 3D 变换的“透视”样式
你怎么看 ?
在我的脑海中,Three.js可以帮助你。它是一个用于渲染 3D 对象的 javascript 库。我猜这些物体本身不会太难。一堆带有自定义纹理的平面。不过,相机可能更难完成。
显然,有几种创造性的方法可以解决这个问题。但是,截至目前,没有浏览器原生支持 3d 渲染。但是,webkit、opera 和 Mozilla 确实支持2d 渲染
这意味着仅通过javascript 和 css 就可以创建 3d 的外观。但除了已经提到的(WebGL、three.js 库、画布技巧)之外,没有浏览器支持 3d 渲染。
阅读我一年前的博客文章:使用 CSS3 和 Javascript 进行简单的“3D”渲染
你可以使用 Webgl 或 canvas 来制作这个效果
就像 rory mccrossan 在评论中所说的那样。
检查 jquery 视差,这正是在 void 站点上发生的情况。
将你的 div 放在不同的视差层上,看看神奇的发生 ;-)
http://stephband.info/jparallax/
https://github.com/IanLunn/jQuery-Parallax
http://www.sequencejs.com/themes/sliding-horizontal-parallax/