Moonsong gif?

It isn't a gif because a gif of it would be absolutely massive. It isn't Flash because flash is being phased out these days. It was Flash once, but that was a loooong long time ago.

That image Woodenrat posted is used as a background. On top of it is each cloud section that is repositioned every 0.046 seconds using javascript and loops back to the start with every 320 pixels of movement. The dragon is repositioned 1 pixel every around 0.1 seconds maybe for up to 13 pixels in phases of up and down and the wing animation is simply showing and hiding a tiny image. It is made using javascript, css, html, and 7 different images (4 clouds, 1 background, 1 dragon, and 1 wing). Plus I've optimised the shit out of it over the years.

Oh, and it is standard DOM-based animation, not canvas in case you were wondering.

You can see the related javascript and css here if you wish:
http://www.cavestory.org/moonsong.js
http://www.cavestory.org/moonsong.css

 

o.o
The only real question now is:How long did it take to make it?!

 

Clearly it's claymation

 

Is there a way of making this code into a gif?
That animated image seems so peaceful...

 

it's already been explained how you would do that

 

it's already been explained how you would do that

i kno! I am lazy

Spoiler

Looks like maybe flying over fog or something, with dark, dark, water in the background.

If you wanted to make an attempt at a gif you'll need lossless video capture, maybe use virtualdub to make a gif [100+ megs lol], then use something like photoshop to optimize it to try to make it a reasonable size... [under a meg if you're lucky...]

Why is it black-white?

 

Why is it black-white?

I felt like trying to make the Moonsong gif you were hoping for ;D
But, unfortunately the screen recorder I used was lossy. It introduced a whole load of color variation, and minor compression artifacts. I usually think of Livestream Procaster as an excellent tool for recording video, but in this case where preserving the exact colors are crucial (by adding extra details, colors or shifting colors the video becomes a lot more complex to make a gif from, not to mention it doesn't look quite the same).

I tried to manually switch the colors back to the original, and remove excess color information; but unfortunately it never looked quite right, and the results were still a gif of 2 megs or more. In the end, I just reduced the colors to black and white and played around with it, and the above product is that result.

I was unable to get FRAPS to capture aero desktop, and I no longer have camtasia studio... So, at the moment I don't have a lossless video capture solution...

...
PS the gif above is like 1400 frames I think, but only 370 KBs lol (almost 2 minutes of animation)
If you reduce the amount of frames, you can increase the color information without it being...

 

Here’s the gif lmao it’s not amazing but it my live wallpaper now , screen recorded the gif and sent it to a gif converter

 

it's not an explanation of how to get a gif of it, but here's how it works:

here's the HTML:

Spoiler

<div class="killreflow2">
	<div class="dragonalt">
		<div id="dragonaltl" class="dragonaltl" style="top: 9px;">
			<div class="dragonwc">
				<div class="dragonwcni" id="dragonwing" style="background-position: 6px 0px;">&nbsp;</div>
			</div>
		</div>
	</div>
	<div class="cloud4alt">
		<div id="cloud4altl" class="cloudaltl" style="left: -152px;">&nbsp;</div>
	</div>
	<div class="cloud3alt">
		<div id="cloud3altl" class="cloudaltl" style="left: -304px;">&nbsp;</div>
	</div>
	<div class="cloud2alt">
		<div id="cloud2altl" class="cloudaltl" style="left: -288px;">&nbsp;</div>
	</div>
	<div class="cloud1alt">
		<div id="cloud1altl" class="cloudaltl" style="left: -256px;">&nbsp;</div>
	</div>
</div>

the killreflow div has a background-image value of the moon & stuff

Spoiler

the cloudaltl divs have background-image values of the clouds

Spoiler

the dragonalt1 div has a background-image value of the dragon

Spoiler

the dragonwcni div has a background-image value of the dragon wing

Spoiler

there's some javascript that moves the clouds left (at different rates) using the "left" property of CSS

different js moves the dragon up and down by manipulating the "top" property of CSS for these between 0px and 13px

different js moves the dragonwing image up and down using the "top" property of CSS

 

You can make an animated background like this without JS fyi

Look what I did on my website
Edit : Seems to be down at the moment so here's the css code

.mnbanner{
     text-align: center;
     height: 252px;
     background-color : #000;
     background-image: url(Images/MNBannerFront.gif), url(Images/MNBannerBack.jpg);
     background-position: 0 0, 0 0;
     background-repeat: repeat, repeat;
     animation : animatemn 90s linear infinite;
 }
 @keyframes animatemn {
     from {
     background-position : 3072px 0, 1536px 0;
         }
     to {
         background-position : 0 0, 0 0;
         }
     }

 

You can make an animated background like this without JS fyi

Look what I did on my website
Edit : Seems to be down at the moment so here's the css code

.mnbanner{
     text-align: center;
     height: 252px;
     background-color : #000;
     background-image: url(Images/MNBannerFront.gif), url(Images/MNBannerBack.jpg);
     background-position: 0 0, 0 0;
     background-repeat: repeat, repeat;
     animation : animatemn 90s linear infinite;
 }
 @keyframes animatemn {
     from {
     background-position : 3072px 0, 1536px 0;
         }
     to {
         background-position : 0 0, 0 0;
         }
     }

yeah, I wasn't saying that it couldn't be done in a better way, I was explaining how it was done
I would probably just use percentages in the animations though

also, what's your hosting / domain setup?

 

It's hosted by someone with their own server setup

 

It's hosted by someone with their own server setup

ah. i use heroku because I don't care about my own domain yet, but i'll probably go with namecheap at some point and digitalocean

 

I did something similar for usagi story's website: https://usagistory.sallai.me/ it's using andwhy's sprites
code for it is here: https://github.com/jozsefsallai/usagistory-www/blob/master/assets/style.css#L18 you can do whatever you want with it

 

So people never ask me for this again:

It's a 20fps gifcam recording with some lazy edits to the dragon's flight pattern to make it somewhat seemless. Go nuts.

 

Legit though cool to see! Crazy to see this posted after 3 years of the thread going silent.