TV tvOS 视差效果海报（ CSS+JavaScript/jQuery）

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3378 天前的主题，其中的信息可能已经有所发展或是发生改变。

根据教程所作。

12MB 的 GIF 动态效果图

在线展示

Ps. 因为使用高分辨率素材，网页加载较慢。以及不适合没有鼠标的设备访问。

实测 Firefox 浏览器体验不佳，建议使用 Chrome.

12 条回复 • 2015-09-26 13:35:20 +08:00

DIYgod

2015-09-21 20:09:19 +08:00

效果好漂亮！

Livid

MOD

2015-09-21 20:17:42 +08:00

Chrome 的最后不动的时候也是有抗锯齿效果的，而 Firefox 没有，有趣。

ceoimon

2015-09-21 20:35:23 +08:00 via iPhone

@Livid 但是在 Firefox 下鼠标连续滑动时并不会有动画啊，滑动结束后才动的，难道说只有我的电脑是这样的。

Livid

MOD

2015-09-21 20:45:52 +08:00

@ceoimon 我在 Firefox 40.0.3 上可以正常使用，只是最后一帧的边缘有锯齿。

zonghua

2015-09-21 20:49:59 +08:00

@Livid 为什么 gif 压缩之后呈现为很多点点

c742435

2015-09-21 20:56:06 +08:00

@zonghua 因为一张 gif 能表现的色彩只有 256 种。表现不出来的色彩，就用叫“抖动”的方式混合得到。也就是，一个白点和一个色点混合得出高亮的色点

fatestigma

2015-09-21 22:34:03 +08:00

Safari 下效果也好渣，但是 Chrome 的效果简直酷炫到没朋友。。。

ajan

2015-09-22 13:12:52 +08:00

炫

strom001

2015-09-22 18:19:04 +08:00

我这是 el capitan 的 safari ，看着还行啊，有点点

Bayonetta

2015-09-22 19:43:52 +08:00

Cool

windirt

2015-09-23 10:20:01 +08:00

三个浏览器都测试了， Firefox 无论是流畅度和抗锯齿都不行， Safari 和 Chrome 效果一致

iheshix

2015-09-26 13:35:20 +08:00

其实说实话，这次的发布会，这个 tvOS 其实算个亮点。大部分人都没看到细节。在细节上， Apple 确实牛逼。当初我看到这个 tvOS 的视差效果的时候都惊了。

首先要说的是，楼主做得好赞！
然后要说的是，其实我很好奇 Apple 是怎么做到的？电影库里那么多电影，全部收工处理貌似不太现实，难道全部都是图形分析算法按路径差异来自动处理的？如果是后者，那就牛逼了。