Animated Parallax Backgrounds?

[Deviousity (Wong Jiong Yu)]

Hi everyone! I’m a new user of webflow, planning to use it to design a personal portfolio site. I have a couple of design ideas in mind, one of which being animated parallax background.

For those who don’t already know, parallax means that elements of a page move at different speeds while being scrolled to give an illusion of depth. ( Example: http://www.firewatchgame.com/ )

I’m thinking of doing the same for my website, however instead of static elements, they are animated.
Is it possible to achieve the same effect as http://www.firewatchgame.com/ but with loopable video elements such as ( https://www.youtube.com/watch?v=EiobsNAKqHU )?

Summary

This probably means that the animated elements can’t be video files because transparency is affected.

I don’t have a built site right now, but I hope this idea is possible!
Thank you so much for reading. If you decide to implement this idea to your website, do share it!

[DharmaNode (Michael)]

Hi @Deviousity

It is possible.
Here is an example of someone using alpha transparency in video.

Alpha transparency in Chrome video - Chrome Developers

If you have After Effects (which you’ll probably need (you can get a free trial)) here is a tutorial on how to render using alpha channel transparency.
https://forums.creativecow.net/thread/2/1094437

For the parallax effect, check out this tutorial:

Parallax movement on scroll | Webflow University

[Deviousity (Wong Jiong Yu)]

Thanks so much for the resources!
Will try experimenting with webm. Cheers!