Animate Clouds Across Browser

I’d like to know how to create the effect of the clouds floating across the browser in the footer of this site. Any ideas?

Maybe Stellar from Doobox https://www.doobox.co.uk/stacks_store/demos/stellar.html

Stellar kinda works. Thank you. I had the, moving with JW’s Moving Box, but couldn’t get MB to drop into a background.

It would be easy to do something like that with an animated gif used as a tiled background, although they seem to have used pngs.There are various animation programs which would let you create something similar (or better) as animated gif, png or svg files. Keyshape is a good one.

I am working on an entire suite of animation stacks. For now though, Horizon may be able to do the trick.

If you are using Foundation 6, you could possibly just use 2 position swatches with a transition swatch. Basically transition is from right 0% to right 100% as quickly or as slowly as you want.

1 Like

@joeworkman I will check out Horizon. Still using F1 until I can lower my backlog and spend some time on F6.

I was able to get it to work on Stellar. https://one11sandbox.com/sbc/. By nesting Stellar stacks, I was able to get the clouds to move to the right, and the plane to move to the left. The control of the speed is a bit tricky. I would like the plane to move faster, but the speed of the nested stack overrides the speed.

Other than that, it’s kinda cool.

Power tip… There is nothing stopping you from using swatches in F1. You don’t want to use the F6 site styles. However, swatches will work. Its just CSS… :slight_smile:

1 Like

Never even thought about that. It’s tough to move ahead since I’ve built so many components in F1 that I reuse over and over. That might ease me into F6 a little faster. Thank you.