Wednesday, November 1st, 2006

F.prod: animated home page

Category: Prototype, Showcase

Gregory Fortin replaced his usual Flash effects and dove into Prototype and Script.aculo.us to create F.Prod, his site that looks like a business card.

f.prod

Posted by Dion Almaer at 4:09 am
11 Comments

++---
2.1 rating from 40 votes

11 Comments »

Comments feed TrackBack URI

It’s pretty horrible, reminds me of those websites in the 90’s that where filled with page upon page of animated gif’s. It’s pretty jumpy and slow as well.

James.

Comment by James Hughes — November 1, 2006

Looks like powerpoint and replicates the ideas that made people hate Flash. At least it could use Ajax to load the different content bits, get rounded corners and a gradient.

Comment by Chris Heilmann — November 1, 2006

Yet another example of using Ajax effects for the sake of using Ajax effects. Looks like a bad Flash site from 2001.

Comment by Rik Lomas — November 1, 2006

It’s pretty ugly ! I just can’t figure out why that kind of websites desserves to be here ?!

Comment by Tnx — November 1, 2006

Hi there,

Hooo, there has been some misunderstanding : I know what you think : why does he use such effects when a site without effects could have been much more efficient ? I Agree : I didn’t put those effects to make a flashy website, to impress some friends with some picture moving around or some automated scroll…

I maid this site much more like a proof of concept about animating, using some JS and being XHTML 1.0 Strict : look, it’s not a commercial site, there is no ads, no prices, i don’t even sell my own person :P …

I launched it only 24h ago, I didn’t had time yet to write on the blog to explain how things work and why they are there but my main idea about doing this was to show that
1/ it’s possible to replace flash for animations (index introduction animation)
2/ it’s possible to make some “cool” things like the slideshow on the index, like the dock on videos and web pages
3/ it’s possible to make a site using JS and being XHTML 1.0 Strict and being usable when JS is desactivated, even links which should open in a new window are “accessible” ;)
… I’ll tell more things and show some code on the blog as soon as i can

However, i know i maid some mistakes and maybe you’ll help me to improve things
For ex, I would have never used so much effects on a “real” site, even if the effects are maybe nice, maybe cool

I hope after these explanations you will have another look at this site… and if you don’t, no way I like it ;)

Comment by fortin — November 1, 2006

1/ it’s possible to replace flash for animations (index introduction animation)

This statement made 1998 come back into my head for a second.

Comment by José Jeria — November 1, 2006

Doesn’t work in safari… there is a parse error in the JS causing it to fail on line 29 (I believe the word “function” is causing the issue)… not submitting this to critique in as much to say, yes there are Safari users out there, so please test before releasing if possible.

Other than that, decent concept… needs some work… I was hoping for more than just script.aculo.us script calls… how about some really creative energy to extend script.aculo.us to create your own custom effects… that is what I like to see at least

Comment by Ryan Lowe — November 1, 2006

I think the site is a good experiment in exploring Javascript animation (I’m also a fan of the concept,) and respect the author’s efforts there. I feel the comments thus far have been a bit critical – to Greg’s credit, most web developer / engineering types aren’t designers on the side! :)

However, it’s probably also understood that Ajaxian’s readership have high expectations when it comes to sites being profiled here; I try to see it as “constructive criticism.” :)

Comment by Scott Schiller — November 1, 2006

neat playgound! keep up experimentin’, dude!
but get rid of this browser_unsave protocrap and Script.aarglll libs.
this is why the page is slow and not crossbrowser-save…and you can’t do nothing against it…sad.

Comment by teletubbie — November 1, 2006

The Safari problem comes from providing names to what should be anonymous functions. Safari apparently differents from the ECMA standard on this (ECMA says the name is optional). It’s a serious thorn in my side, as I’ve had to revisit old, otherwise working code to remove the names to get Safari to work. That line 29:

afterFinish:function aftfin(){animbk(); slideshow();}

should be

afterFinish:function(){ animbk(); slideshow(); }

Comment by Andy — November 1, 2006

What an amazing waste of my click and definately not worthy of a mention on Ajaxian. I’ve done tons of experiments with AJAX and I’m not egotistical enough to think others need to see my failures. So this site is a demo? Of what? Of canned effects? There is nothing orignal, there is nothing inspiring, there is nothing useful, and there is nothing of technical interest. I could have done this 3-5 years ago with canned scripts from dynamic drive, using canned scriptaculous doesn’t make it worth looking at.

Comment by Vance Dubberly — November 1, 2006

Leave a comment

You must be logged in to post a comment.