Registration is disabled!

How to make your own animated wallpaper

Post Reply
User avatar
rasputin007
Posts: 49
Joined: Mon Sep 28, 2015 6:27 pm

How to make your own animated wallpaper

Post by rasputin007 » Thu May 24, 2018 7:35 pm

It is really quite simple, once you have done it it really goes quite fast.
It is only the first time to get all the steps right.
I use looping animated gifs that I convert into sprite png. Then with a bit of css code they get animated. Much smoother then using the animated gif at all.
OK, first you need to find an animated gif that you like, ideally a looping one, so it repeats itself again and again without any visible interruption, e.g start and end frames are identical.
My first port of call is https://giphy.com/explore/loop-animation!
From there you can specify more what you want. It is amazing what you can find there, it just takes some time to search.
Once you found what you want, download it as a gif file. Might need a few steps as not all are straight forward offered as gifs.
Once you got the animated gif on your computer, go to https://ezgif.com/.
There you can upload your gif and edit it. For example if your gif is 500x500 then either resize smaller (in my case it would be 320x320 as my SE screen is 320 wide) or resize bigger ( in my case it would be 568x568 as the SE screen is 568 high) and then I use the crop feature on the website to "cut out" a 320x568 gif from the 568x568 gif.
Sometimes you might want to rotate the gif so it better fits on the screen.
So do your work with your gif until it is what you want . Save it to your computer, that is important as the step to split it to a sprite sheet, you can not transfer it as you can when working with it.
Once you are happy with the result and you have saved the gif it is time to change it to a sprite sheet.
For that select the "Split" top menu and on the opening page select the "GIF to sprite sheet" tab.
Now upload your saved gif and when that is done, all you have to do is tick the "Stack Horizontally" box, all other default options are fine. It should look something like this.
Image
Now is a good time to take some notes as you will need them later with the css code.
Write down the size, width and height, as well as the number of frames. So in the above example it would be 320x320 with 282 frames.
Further down on that page, out of the screenshot is a "Convert to Sprite Sheet: button, press it!
Once the online conversion is done you will see a "Sprite sheet output" window.
Time to write down another value, the new width of the sprite png, which will be a multiple of the original gif width. Basically original gif width x number of frames.
Save the png!
Now it is time to make the html page for the sprite png animation.
It is really quite simple and it looks like this.
Image
This example.html is being attached so you can download it and change it to your work.
The "body " css style part has my screen size (320x568) and as the sprite png has black background I set the background-color to black.
The "background" css style uses the gif size (width and height) of the gif before it was converted. The top value (75) is there because the sprite png is not as heigh as my screen and so I placed it in the middle. 568 (screen height) minus 418( gif height) equal 150, now divided by 2 is 75. So 75 + 418 + 75 = 568!
The background-image refers to your png file.
The last line in the "background" css style part is the webkit-animation. The "player" is play - see next css entry. then is the time it should take to complete the whole animation - rule of thumb is the more frames the more time. Steps are the number of original gif frames!
Infinite just means to loop playing forever.
Now to the next css part which is the "player" or properly called webkit-keyframes play - the "play" is just a name, you could call it getOnWithIt or what ever you want, but then you have to change the name at the -webkit-animation in the "background" css part as well. They both have to be the same.
As you can see it takes the width of the png (not gif!), starting from 0 to the end. In the screenshot it also would be 320 (width) x 28 (number of frames) = 8960!
Well last thing is to add a div for the "background" in the body tag of the html and you are good to go.

I usually save them in iWidget format as XenHTML can use iWidgets on LS and SB.
Have fun making your own "Live Wallpapers"
Attachments
example.html.zip
Example html file
(1.02 KiB) Downloaded 5 times
Nothing is impossible, only miracles take a bit longer!

Post Reply