在这个Apple“你的诗歌”页面上创建效果？

Question

在this Apple网页上创建水/气泡效果方面，任何人都可以指出我正确的JS库方向或类似方向。

我认为它可以通过视差的组合来完成，但“粒子”看起来好像是一个循环视频，而不是对页面的滚动作出反应。

下面的图片可能有点太小，但它描绘了我想要完成的任务。

Answer 1

那里有许多不同的视差库（this很不错）。关于气泡效果，实际上这很简单地使用this image和一些CSS（不需要JavaScript！）来实现。 This jsFiddle只有尘埃粒子，所以你可以看到它是如何组合在一起的。

div有一个.dust类，它绝对定位并对布局进行排序：

.dust {
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    background-size:50% auto;
    background-position:center center;
    transform-origin:bottom center;
}

然后有.dust-small和.dust-medium，它们具有上述背景图像，并应用了一些CSS动画。使用了一个这样的动画：

@keyframes dustSmallAnim {
    0%    { opacity:0;   transform:translate3d(-2%,0,0)   scale(1.025); }
    12.5% { opacity:0.4; transform:translate3d(-1.5%,0,0) scale(1.025); }
    25%   { opacity:0.75;   transform:translate3d(-1%,0,0)   scale(1.05); }
    37.5% { opacity:0.4; transform:translate3d(-.5%,0,0)  scale(1.075); }
    50%   { opacity:0.2; transform:translate3d(0,0,0)     scale(1.1); }
    62.5% { opacity:0.4; transform:translate3d(.5%,0,0)   scale(1.125); }
    75%   { opacity:0.75;   transform:translate3d(1%,0,0)    scale(1.15); }
    87.5% { opacity:0.4; transform:translate3d(1.5%,0,0)  scale(1.175); }
    100%  { opacity:0;   transform:translate3d(2%,0,0)    scale(1.2); }
}

因此，相当简单的CSS，旧版浏览器只会回归到静态背景图像。你应该能够使用一般的想法来达到你想要的效果。

我为这个例子省略了供应商前缀，但你显然需要这些。

Answer 2

检查this

您可以随时将div放在您想要的位置，并在脚本中设置必要的字段，例如气泡的数量和大小。