Monday, March 11, 2013

Paper Toy Web Site Launches

My paper toy web site has now launched! This site features 37 of my paper toys all together in one seamless interface with links to the free PDF template.


Although I will always add new toys here first, I wanted to experiment with HTML5 and CSS3 transforms animated using GreenSock's GSAP JS. I thought a paper toy micro site would be the perfect opportunity to do this.

Screen cap of a selected toy and image gallery. The toys are currently divided into 6 categories. (Monsters, Famous Characters, Halloween, Halloween & Fall, Robots & Scifi, and Kids)

Once you select a category, the thumbnails of the toy load to the left and you drag and drop them into the selection area. (I did this to with jQuery UI, and used jQuery as the overall selectors)

My goal with the drag and drop was to use it in conjunction with GreenSock's GSAP JS.

Screen cap of the opening animation of the "Begin" mechanism. 

Screen cap of the welcome screen, after the interface loads by clicking "begin" on the previous screen. (pictured above)

Screen cap of the Monsters section title screen. Thumbnails of the image gallery and template will load after the
main monster thumbnail is dragged and dropped into the Drop target area.


Screen cap of the template image with link to the template PDF.

The site is an experiment with HTML and JavaScript animation.  I have spent over a decade creating Flash animation, web sites, presentations and media. Over the past year I have almost completely stopped using Flash and been creating similar projects using HTML5, CSS3 & JavaScript.

Go to the site: www.chemicalnine.com/papertoys

The site was developed using:

3 comments:

  1. Congratulations! This is the best thing, Thank you so much for taking the time to share this exciting information.
    Sample Words

    ReplyDelete
  2. Hello, I like a lot your paper toy website. The design of the site is great. Really awesome.
    Cheers

    ReplyDelete
    Replies
    1. Thank you! I really appreciate the comment!

      Delete