谁能告诉我如何实现这种效果?

时间:2014-05-03 03:11:22

标签: css html5

我希望在这个网站上实现相同的图像效果

http://gilgul.co.il/

有人能指出我对css技术的类型或解释图像如何移动?我假设它与GIF类似?

2 个答案:

答案 0 :(得分:2)

  

有人能指出我对css技术的类型或解释图像如何移动?我假设它与GIF类似?

它与gif非常相似,它是用gif实现的。

http://d1fki99wqld33s.cloudfront.net/assets/gifs/GIF25s.gif http://d1fki99wqld33s.cloudfront.net/assets/gifs/GIF8s.gif

因此,他们将一个横跨整个宽度的元素与gif设置为背景图像,设置为跨越整个宽度。然后,他们将该semi transparent PNG平铺的另一个元素嵌套在该元素内,以创建净效果。

他们还有一些疯狂的javascript来响应滚动位置并管理哪些图像固定在哪里以保持它看起来不错。

最终结果很漂亮,但它需要相当多的管道。没有一个"技巧"这样做。只是一堆聪明的东西。其中任何一个都可能是多个Stack Overflow问题。


哦,仅供参考,完全加载该页面为14.5MB。那非常巨大。这可能会对较慢或上限带宽的互联网连接产生一些性能影响。

答案 1 :(得分:0)

虽然有些人会考虑最大的恭维,模仿;非常沮丧地公然复制其他人可能花费大量时间工作的工作,特别是如果你没有复制它而没有复制代码的技能。

但是,如果你的兴趣纯粹是推测性的,我建议你研究一下CSS属性,比如变换,它可以让你在border属性上实现类似的效果,并在悬停时改变盒子的角度。