Hey there
I’m trying to recreate an animated static effect similar to what appears here in the example image below. It is just animated noise. similar to static that appears on a tv.
I’m trying to apply it to sections in a wix page.
What I’ve attempted so far is to overlay two sections, one with the color I want in the background, and then another that references the noise image that is in my media library.
Then I’ve created a timeline sequence that animates it.
The issue I’m running in to is that the actual box itself that contains the image bounces around the container and you can see the edges. I’m using translate x/y to do the animation.
Here is my Code I’m Trying to use:
Anyone know an easier way to do this? I page sections don’t seem to have a background attribute so I have had zero luck in changing it and really need it to apply to sections and not the entire page.
timeline ({ repeat : - 1 , yoyo : true })
. add ( $w ( '#static' ), { opacity :. 1 , y : 5 , x : 10 , duration : 10 })
. add ( $w ( '#static' ), { opacity :. 2 , y : 15 , x : 20 , duration : 10 })
. add ( $w ( '#static' ), { opacity :. 3 , y : 5 , x : 20 , duration : 10 })
. add ( $w ( '#static' ), { opacity :. 4 , y : 15 , x : 20 , duration : 10 })
. add ( $w ( '#static' ), { opacity :. 5 , y : 5 , x : 10 , duration : 10 })
. add ( $w ( '#static' ), { opacity :. 6 , y : 15 , x : 20 , duration : 10 })
. add ( $w ( '#static' ), { opacity :. 7 , y : 5 , x : 10 , duration : 10 })
. add ( $w ( '#static' ), { opacity :. 8 , y : 15 , x : 20 , duration : 10 })
. add ( $w ( '#static' ), { opacity :. 9 , y : 5 , x : 10 , duration : 10 })
. add ( $w ( '#static' ), { opacity : 1 , y : 15 , x : 20 , duration : 10 })
. play ()
