My Site I Made for the Contest

Oh, and it is 5 MB, so it may take some time to load. Sorry about that :(

Very cool Paul. Do share the source code. Would like to take a look. Thanks

Here is the source code, as requested by @Satish :)

I took advantage of the HYPE.js which makes animations in HTML5 much simpler to do, and I also used a little WYSIWYG, so full disclosure there.

Anyway, here you go: http://cl.ly/MtjQ.

Thanks Paul.

A question. How would we use this so that along with the text, it show a new image every time?

So that i can write a short story and put an image relating to it. Would be wonderful resource for telling kids stories.

@Satish In my case it had to be a single page, but for a short story, I'd recommend creating a new page for every page of your short story.

var resources = {"3":{n:"badges_WebsiteIsland1_Stage2.png",p:1},"1  {n:"Mike%20The%20Frog.png",p:1},"4":{n:"badges_WebsiteIsland1_Stage3.png",p:1},"2":{n:"Logo.png",p:1},"0":{n:"preview.mp3"}};

Use code like the code above for loading up a file (it is also in the heytheremikethefrog_hype_generated_script.js in the source code I gave you).

Then you can use code like this for positioning:

var scenes = [{x:0,p:"600px",c:"#353535",v:{"25":{G:"#92AE57",aU:8,c:552,aV:8,r:"inline",d:29,e:"0.000000",t:24,Z:"break-word",v:"bold",w:"Because I can code, I can change the world.<div>It's really true.</div>"

It is also in the JavaScript file in the source code. But I'd recommend doing each page in different files, or it will take a very long time to load.

Edit: Never mind.

Thanks Paul.

I will share what i turn this into with you soon.

Hey Paul,

Thanks for sharing! I'm glad to see people are using HYPE.js; I've fooled around with it once or twice, and I definitely agree with you about how simple it is to implement. I think your project is really cool. Keep up the good work!

Cheers,

J.T.

Satish... Look into jQuery waypoints. It would be great for telling kids stories via the web. You can scroll down a page and animations can happen when div sections are passed.

jQuery sounds like a better option. Just never bothered learning it, yet.

Found a bug with the site where it won't load the background music. I'll fix it in the morning, but just so you know, it's set to the instrumental version of Hey There Delilah.

On that note, Paul, although your use of "Hey There Delilah" would more than likely fall under Fair Use, be aware of DMCA-related conflicts when it comes to embedding copyrighted media. You're more than likely okay in this situation, but let us know if the Plain White T's start hitting you up for royalties... :-)

Cheers,

J.T.

P.S. - I'm not a lawyer, so take what I say with a proverbial grain of salt.

Well it's a parody done by a kid... So it should be ok ;)

Ok, it has been fixed. A loading message will be displayed until the website is finished loading everything.

@Paul -

A quick note on the tags you used for this post. If it were me I'd go for, community, contest & feedback and cut the rest.

Tags which are overly general like design & website should be avoided because they are void for vagueness. Tags such as song are unlikely ever to be re-used by another post.