I had also tried to do a skew/rotate/scale transform on the div with the wallpaper itself so that it would look like the screen was flickering a bit, but it didn't wind up looking very good so I tossed it.
Three seconds later the scan function is called. Then it sleeps for 3 seconds and calls the reset function which hides the scanline by making it transparent, and moves it back to the start position. The scan function is called first, and it will move my scanline image from a little ways off screen on the left, to a little ways offscreen on the right and it takes 2s to do it. It's a pretty simple implementation of a translation modeled after saurik's opacity transition but it gets the job done.
The zip has the same structure as a theme and the html expects it so unzip it with paths intact. Will you post some of yours?Attached the zip with the html and images (and a screenshot of the theme for some context). I can actually scroll through the pages while it is crossing the screen which I couldn't do with the opacity transition.
Its smooth and best of all doesn't seem to disturb the SB performance in the slightest. So I now have a transparent png scanline img sitting on top of my wallpaper and I simply use the translate mechanism to move it across the screen every ten seconds or so. I then discovered that webkit has a built in transform mechanism that allows you to do scaling, rotation, skews and translations (movement). This proved both crappy looking and would slow down the SB a lot when it triggered. I started by making a few wallpapers with the scanline in various positions hoping that if it animated fast enough it would look like it moved. There are a few pretty cool things that you can do with it that don't slow down the SB at all.įor instance: I am putting together a pip-boy style green-screen theme and I wanted to have a periodic semi transparent raster-scan line sweep across it. Depending on what you are trying to do, you may want to consider using the other built in webkit stuff.
0 kommentar(er)
