Jaw-Droppingly Smooth Webpage - How's it done?

[H3LL]

I've seen some nice webpages but rarely have I stopped and played with a page because it was so ... what's the word ... clever?

It is a simple(?) online virtual catalogue .. but soooo well presented.

How's it done?

Why so quick for what I would have thought was a large file?

Anyone here who can/does code such a thing?

Is it something that can be added to any webpage or is it bespoke?

Have a look:

http://www.flyingtoys.co.uk/index.php?categoryID=23

Simply left click and hold to drag the pages, or click on the corners to flip them faster!...

:D
.

[Rat]

It's done using Flash, which is really for things like that. I shudder to think what it might look like to a screenreader, but I suppose I might be pleasantly surprised, as I didn't test. It's a gimmick.

[H3LL]

It's done using Flash, which is really for things like that. I shudder to think what it might look like to a screenreader, but I suppose I might be pleasantly surprised, as I didn't test. It's a gimmick.

What're you doing up at this time. ;)

Just the text at the bottom right visible without Flash. Better than nothing though.

Still like it... I had another play... How sad. :p

.

[Rat]

Going to bed.

Yes, I thought as much. DDA be damned.

It is good. It's quite entertaining...as a gimmick. If they have a more accessible alternative, then great.

[Nick Bogaerts]

The design of the page is good, the concept sweet, but as Rat mentions, the accessibility is down the dump, with (fromm a cursory glance) no non-flash alternative, a table-based layout, scrolling text in an animated gif, and text within the flash too small to read (not everyone has perfect eyesight).
Also, from a look at the rest of the site, it looks as if it's been coded for IE6 and not tested in any other browser, which is unfortunate.

I reallly like the concept, but I'd implement it correctly.

To answer H3LL's other questions, yes it is bespoke, and yes, I could do that (or rather the agency I work, for since it usually takes more than one person).

[Wowbagger]

Hmmmmm....
I wonder if one could whip up a standard XHTML and AJAX version of that catalouge. It would still have the same, awesome page-flip effect, but accessability would also be retained, for the most part.

[ddt]

Hmmmmm....
I wonder if one could whip up a standard XHTML and AJAX version of that catalouge. It would still have the same, awesome page-flip effect, but accessability would also be retained, for the most part.

It's definitely possible to get the same page flipping effect with JavaScript.
Of course, if you want accessibilty, you'd need to make up the individual pages in (X)HTML and not be each a simple image.

[H3LL]

It's definitely possible to get the same page flipping effect with JavaScript.
Of course, if you want accessibilty, you'd need to make up the individual pages in (X)HTML and not be each a simple image.

Would you still have the grab and play with the pages option?

.

[Rat]

I just can't imagine doing that with (X)HTML and JS alone. Maybe it's just way beyond my ability, but I can't see a way to do it, at least not so the text on the pages is text, rather than an image, but even if not, it's still well beyond my ken.

[Wowbagger]

Well, frankly, it might be beyond my current level of abilities, as well. But, I doubt most of the effect is impossible.

Though, now that I think about it, it might be tough to rotate the letters of the words around. I have seen JS animate text around a page, before. But, I don't recall ever seeing any JS rotate or flip the characters around.

[Rat]

Theoretically, if you're bothered about standards and accessibility, it should be possible using SVG. But, again, it's beyond my ability (which stretches to describing shapes and colours in SVG), and no current browser could render it properly anyway.

[tkingdoll]

H3LL, I thought you were obsessed with accessiblity? Didn't you say something along the lines of there being no excuse to have a page that a blind person can't use?

I assume there are items in the catalogue not shown on the main site. Otherwise what's the point?

They don't even appear to have an HTML alternative version of the catalogue, let alone an accessible version of the Flash. I don't blame them though, as I explained in the other thread, that would double their costs, and Flash development is expensive to start with.

Having said that, we just launched a deal where if you have a Flash site above a certain cost, we throw in an HTML version for free.

The page-turning action is nice but it's a flawed design as there's no button to go to the start or end. As I said in the other thread, you can do Flash development for the partially-sighted, with audio tags and such, but it is expensive.

[H3LL]

H3LL, I thought you were obsessed with accessiblity?

I'm unaware that I'm obsessed with anything.

The OP was about the cleverness (to me) of the presentation of the catalogue not its accessibility.

I liked the Dylan thing. The fact that it's even less accessible didn't stop me liking it. I don't think it's quite so clever... but that's subjective.

.

[ddt]

Would you still have the grab and play with the pages option?

I just can't imagine doing that with (X)HTML and JS alone. Maybe it's just way beyond my ability, but I can't see a way to do it, at least not so the text on the pages is text, rather than an image, but even if not, it's still well beyond my ken.

I have to admit I missed out on some things at my first inspection of the site. I hadn't noticed the grabbing and playing effects. I indeed see a problem with the non-rectangular nature of that.

If the page only has to be moved from left to right, it's simple to make a <div> for it, and from JavaScript change the CSS attributes of the <div> - that way you can adjust the viewport for the <div>, the margins of its contents (also to negative values), and if you set 'overflow' to hidden, the contents that get outside the box are clipped.

As CSS uses a box model where the boxes strictly have horizontal and vertical edges, I don't see how a sideways movement could be done with it. I took a quick glance at what CSS3 might offer in this, but it doesn't seem that is going to change.

[Rat]

Here's another one: http://www.nxtbook.com/nxtbooks/navteq/superbowlxlii/index.php

I have an awful feeling we're going to be seeing more of this.

[SusanB-M1]

H3LL, I thought you were obsessed with accessiblity? Didn't you say something along the lines of there being no excuse to have a page that a blind person can't use?
------
The page-turning action is nice but it's a flawed design as there's no button to go to the start or end. As I said in the other thread, you can do Flash development for the partially-sighted, with audio tags and such, but it is expensive.
Thought I'd have a look at this board today, so noticed this topic. When I've typed this, I'll click on the link and see what happens! I think there is a demo version of Supernova which can be downloaded if ever you want to; and of course I could answer questions about how I use mine, but going direct to Dolphin would be much more likely to elicit sensible answers.

ETA Interesting, and pretty easy to use. With magnification on, I had no trouble finding the moving corner of the page and dragging it across. The pictures are, however, difficult to get more than an outline impression of with mag off, and with mag on, they are too blurred. So then I tried a link on the left which came up with a large picture of a toy and a box of text below which I could place the AVF (Auto Virtual Focus) on so that the voice would read it. I then scrolled down and tried another piece of text. Dolphin advise Supernova users to have all background colours off, so all internet pages I ever open have a white background although pictures - and in this case, the blue rectangle behind the catalogue, remain in colour. I do not think a totally blind person would find much use for this catalogue, but you never knowl

[Vitnir]

The UFO Mothership on p38 would be a prank to fly in a city on the evening with poor light available.

[Darat]

The Admin Zone's been using a page-turn-down for ads for a little while now. http://www.theadminzone.com/ Nice as a gimmick.