Create the effect on this Apple "Your Verse" page?

Question

Can anyone point me in the right direction of a JS library or alike with regards to creating the water/bubble effect on this Apple webpage.

I think it could have been done with a combination of parallax but the 'particles' appear as if they are a looping video rather than reacting to scrolling of the page.

The image below maybe a little too small, but it depicts what I am trying to accomplish.

Answer 1

There are a bunch of different parallax libraries out there (this is decent). Regarding the bubble effect, this is actually achieved pretty simply using this image and some CSS (no JavaScript required!). This jsFiddle has only the dust particles so you can see how it's put together.

The div has a class of .dust which positions it absolutely and sorts the layout:

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

Then there are .dust-small and .dust-medium, which have the aforementioned background image, and some CSS animations applied. One such animation used:

@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); }
}

So, fairly simple CSS, and older browsers just fall back to a static background image. You should be able to play around with the general idea to achieve the effect you want.

I've left out vendor prefixes for this example, but you'll obviously need those.