Beautiful jquery ajax responsive website

[reintrichter]

http://www.grandcafepublic.nl

CMSMS 10.3
Products module for their 'diner menu'
CGCalendar for their upcoming events

I'll check later for versions and other installed modules / udt's and post m here.

This site wouldn't be possible without cmsms. It surely demonstrates the massive flexibility. Compatible with iPad and iPhone, each device has his own display feature.

Kind regards,

Reint
RichterReclame

[paulbaker]

Not my cup of tea design-wise. But a truly amazing piece of work. Like you say, really shows off the power of CMSMS. Must have taken many hours. I have no idea how you managed to slant the form fields at an angle.

Great work!

[reintrichter]

Hi Paul, thanks for your comment!

Yeah, the jquery animation stuff really took some time. The 3D rotation effect of both the form fields and cylinder are done using (many, many) div blocks with all the same background image. but every div block has the background image at a slightly different position, but all have the same class. Then using jquery you can move all the backgrounds like 100 pixels to left or right.

And with a no-repeat in the css you can easily hide the background by simply moving it out of its div block.

Anyway, as promised, here's the list with all the installed modules:
SEOTools2 1.0.5
CGExtensions 1.28.1
CGCalendar 1.9.4
FormBuilder 0.7.2
Gallery 1.5.3
TruetypeText 2.2.1
CGSimpleSmarty 1.5
Products 2.17
CGSmartImage 1.8.1
CMSForms 0.1.7
Twitter 1.10

[psy]

Wow, oh Wow! (would have only been one "Wow" but message minimum was 10 characters! LOL)

[zharlize]

I just love it!!! Really awesome! I love the design, and how things slide and so on. I wish I could do something like that!

[Dr.CSS]

http://validator.w3.org/check?verbose=1 ... 23fundatie

[faglork]

Holy sh*t!!!

This is great work. Formerly, this would have only been possible with FLASH.

http://validator.w3.org/check?verbose=1 ... 23fundatie

Most errors are "following errors". I think it should be possible to clean this up.

I have no idea how you managed to slant the form fields at an angle.

Firebug

element.style {
transform: rotate(-2deg);
}

Cheers,
Alex

[SanderBroek]

Very well done! Knap werk!